Handle errors to get more infos from e2e tests

openshift · Aug 21, 2021 · 43fbe96 · 43fbe96
1 parent 6f396b1
commit 43fbe96
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 27 deletions.
diff --git a/frontend/public/components/app.jsx b/frontend/public/components/app.jsx
@@ -54,6 +54,8 @@ const NOTIFICATION_DRAWER_BREAKPOINT = 1800;
 // Edge lacks URLSearchParams
 import 'url-search-params-polyfill';
 import { graphQLReady } from '../graphql/client';
+import { ErrorBoundary } from '@console/shared/src/components/error/error-boundary';
+import { ErrorBoundaryFallback } from './error';
 
 // Disable linkify 'fuzzy links' across the app.
 // Only linkify url strings beginning with a proper protocol scheme.
@@ -398,15 +400,17 @@ graphQLReady.onReady(() => {
   }
 
   render(
-    <React.Suspense fallback={<LoadingBox />}>
-      <Provider store={store}>
-        <CaptureTelemetry />
-        <ToastProvider>
-          <PollConsoleUpdates />
-          <AppRouter />
-        </ToastProvider>
-      </Provider>
-    </React.Suspense>,
+    <ErrorBoundary FallbackComponent={ErrorBoundaryFallback}>
+      <React.Suspense fallback={<LoadingBox />}>
+        <Provider store={store}>
+          <CaptureTelemetry />
+          <ToastProvider>
+            <PollConsoleUpdates />
+            <AppRouter />
+          </ToastProvider>
+        </Provider>
+      </React.Suspense>
+    </ErrorBoundary>,
     document.getElementById('app'),
   );
 });
diff --git a/frontend/public/components/error.tsx b/frontend/public/components/error.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Helmet } from 'react-helmet';
 
 import { ErrorBoundaryFallbackProps } from '@console/shared/src/components/error/error-boundary';
-import { CopyToClipboard, getQueryArgument, PageHeading, ExpandCollapse } from './utils';
+import { CopyToClipboard, getQueryArgument, PageHeading } from './utils';
 
 // User messages for error_types returned in auth.go
 const messages = {
@@ -62,25 +62,23 @@ export const ErrorPage404: React.SFC<ErrorPage404Props> = (props) => (
 export const ErrorBoundaryFallback: React.SFC<ErrorBoundaryFallbackProps> = (props) => (
   <div className="co-m-pane__body">
     <h1 className="co-m-pane__heading co-m-pane__heading--center">Oh no! Something went wrong.</h1>
-    <ExpandCollapse textCollapsed="Show Details" textExpanded="Hide Details">
-      <h3 className="co-section-heading-tertiary">{props.title}</h3>
-      <div className="form-group">
-        <label htmlFor="description">Description: </label>
-        <p>{props.errorMessage}</p>
-      </div>
-      <div className="form-group">
-        <label htmlFor="componentTrace">Component Trace: </label>
-        <div className="co-copy-to-clipboard__stacktrace-width-height">
-          <CopyToClipboard value={props.componentStack.trim()} />
-        </div>
+    <h3 className="co-section-heading-tertiary">{props.title}</h3>
+    <div className="form-group">
+      <label htmlFor="description">Description: </label>
+      <p>{props.errorMessage}</p>
+    </div>
+    <div className="form-group">
+      <label htmlFor="componentTrace">Component Trace: </label>
+      <div className="co-copy-to-clipboard__stacktrace-width-height">
+        <CopyToClipboard value={props.componentStack.trim()} />
       </div>
-      <div className="form-group">
-        <label htmlFor="stackTrace">Stack Trace: </label>
-        <div className="co-copy-to-clipboard__stacktrace-width-height">
-          <CopyToClipboard value={props.stack.trim()} />
-        </div>
+    </div>
+    <div className="form-group">
+      <label htmlFor="stackTrace">Stack Trace: </label>
+      <div className="co-copy-to-clipboard__stacktrace-width-height">
+        <CopyToClipboard value={props.stack.trim()} />
       </div>
-    </ExpandCollapse>
+    </div>
   </div>
 );