CONSOLE-3093: Add Error Boundaries around extension components (#11607)

* Improve ErrorBoundary and fallbacks

* Add new ErrorBoundary instances

* Align withFallback to new Error components

* Alignment to new ErrorBoundaryPage

* Fix some imports for newly structured error content

* Translation updates

* Bug fix, status is optional

* Fix a merge conflict in import paths

* Fix circular references in tests

* Handle an inline wrapper for the error fallback

Author: andrewballantyne

frontend/packages/console-app/src/components/user-preferences/UserPreferenceCustomField.tsx

@@ -1,11 +1,17 @@
 import * as React from 'react';
 import { UserPreferenceCustomField as CustomFieldType } from '@console/dynamic-plugin-sdk/src';
+import { ErrorBoundaryInline } from '@console/shared/src/components/error';
 import { UserPreferenceFieldProps } from './types';
 
 type UserPreferenceCustomFieldProps = UserPreferenceFieldProps<CustomFieldType>;
 
 const UserPreferenceCustomField: React.FC<UserPreferenceCustomFieldProps> = ({
   component: CustomComponent,
   props: customComponentProps,
-}) => (CustomComponent ? <CustomComponent {...customComponentProps} /> : null);
+}) =>
+  CustomComponent ? (
+    <ErrorBoundaryInline>
+      <CustomComponent {...customComponentProps} />
+    </ErrorBoundaryInline>
+  ) : null;
 export default UserPreferenceCustomField;

frontend/packages/console-shared/locales/en/console-shared.json

@@ -103,6 +103,14 @@
   "View property descriptions": "View property descriptions",
   "Save": "Save",
   "View shortcuts": "View shortcuts",
+  "Extension error": "Extension error",
+  "Show details": "Show details",
+  "Oh no! Something went wrong.": "Oh no! Something went wrong.",
+  "Close": "Close",
+  "Hide details": "Hide details",
+  "Description:": "Description:",
+  "Component trace:": "Component trace:",
+  "Stack trace:": "Stack trace:",
   "You made changes to this page.": "You made changes to this page.",
   "Click {{submit}} to save changes or {{reset}} to cancel changes.": "Click {{submit}} to save changes or {{reset}} to cancel changes.",
   "Reload": "Reload",
@@ -181,7 +189,6 @@
   "Show waiting pods with errors": "Show waiting pods with errors",
   "Waiting for the first build to run successfully. You may temporarily see \"ImagePullBackOff\" and \"ErrImagePull\" errors while waiting.": "Waiting for the first build to run successfully. You may temporarily see \"ImagePullBackOff\" and \"ErrImagePull\" errors while waiting.",
   "View all {{podSize}}": "View all {{podSize}}",
-  "Close": "Close",
   "Quick search bar": "Quick search bar",
   "No results": "No results",
   "Quick search list": "Quick search list",

frontend/packages/console-shared/src/components/dashboard/activity-card/ActivityBody.tsx

@@ -13,6 +13,7 @@ import { ErrorLoadingEvents, sortEvents } from '@console/internal/components/eve
 import { AsyncComponent } from '@console/internal/components/utils/async';
 import { Timestamp } from '@console/internal/components/utils/timestamp';
 import { EventKind } from '@console/internal/module/k8s';
+import { ErrorBoundaryInline } from '@console/shared/src/components/error';
 import EventItem from './EventItem';
 
 import './activity-card.scss';
@@ -173,11 +174,13 @@ export const OngoingActivityBody: React.FC<OngoingActivityBodyProps> = ({
       ({ results, loader, component: Component }, idx) => (
         // eslint-disable-next-line react/no-array-index-key
         <Activity key={idx}>
-          {loader ? (
-            <AsyncComponent loader={loader} results={results} />
-          ) : (
-            <Component results={results} />
-          )}
+          <ErrorBoundaryInline>
+            {loader ? (
+              <AsyncComponent loader={loader} results={results} />
+            ) : (
+              <Component results={results} />
+            )}
+          </ErrorBoundaryInline>
         </Activity>
       ),
     );
@@ -186,11 +189,13 @@ export const OngoingActivityBody: React.FC<OngoingActivityBodyProps> = ({
       .forEach(({ resource, timestamp, loader, component: Component }) =>
         allActivities.push(
           <Activity key={resource.metadata.uid} timestamp={timestamp}>
-            {loader ? (
-              <AsyncComponent loader={loader} resource={resource} />
-            ) : (
-              <Component resource={resource} />
-            )}
+            <ErrorBoundaryInline>
+              {loader ? (
+                <AsyncComponent loader={loader} resource={resource} />
+              ) : (
+                <Component resource={resource} />
+              )}
+            </ErrorBoundaryInline>
           </Activity>,
         ),
       );

frontend/__tests__/components/utils/error-boundary.spec.tsx frontend/packages/console-shared/src/components/error/__tests__/error-boundary.spec.tsx

@@ -1,12 +1,9 @@
 import * as React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
+import { ErrorBoundary, withFallback } from '..';
+import { ErrorBoundaryState } from '../error-boundary'; // not for public consumption
 
-import {
-  ErrorBoundary,
-  ErrorBoundaryProps,
-  ErrorBoundaryState,
-  withFallback,
-} from '@console/shared/src/components/error/error-boundary';
+type ErrorBoundaryProps = React.ComponentProps<typeof ErrorBoundary>;
 
 describe(ErrorBoundary.name, () => {
   let wrapper: ShallowWrapper<ErrorBoundaryProps, ErrorBoundaryState>;

frontend/packages/console-shared/src/components/error/error-boundary.tsx

@@ -1,8 +1,20 @@
 import * as React from 'react';
+import { ErrorBoundaryFallbackProps } from './types';
+
+type ErrorBoundaryProps = {
+  FallbackComponent?: React.ComponentType<ErrorBoundaryFallbackProps>;
+};
+
+/** Needed for tests -- should not be imported by application logic */
+export type ErrorBoundaryState = {
+  hasError: boolean;
+  error: { message: string; stack: string; name: string };
+  errorInfo: { componentStack: string };
+};
 
 const DefaultFallback: React.FC = () => <div />;
 
-export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
   constructor(props) {
     super(props);
     this.state = {
@@ -26,7 +38,7 @@ export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoun
     });
     // Log the error so something shows up in the JS console when `DefaultFallback` is used.
     // eslint-disable-next-line no-console
-    console.error('Catched error in a child component:', error, errorInfo);
+    console.error('Caught error in a child component:', error, errorInfo);
   }
 
   render() {
@@ -45,34 +57,4 @@ export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoun
   }
 }
 
-export const withFallback: WithFallback = (WrappedComponent, FallbackComponent) => {
-  const Component = (props) => (
-    <ErrorBoundary FallbackComponent={FallbackComponent}>
-      <WrappedComponent {...props} />
-    </ErrorBoundary>
-  );
-  Component.displayName = `withFallback(${WrappedComponent.displayName || WrappedComponent.name})`;
-  return Component;
-};
-
-export type WithFallback = <P = {}>(
-  Component: React.ComponentType<P>,
-  FallbackComponent?: React.ComponentType<any>,
-) => React.ComponentType<P>;
-
-export type ErrorBoundaryFallbackProps = {
-  errorMessage: string;
-  componentStack: string;
-  stack: string;
-  title: string;
-};
-
-export type ErrorBoundaryProps = {
-  FallbackComponent?: React.ComponentType<ErrorBoundaryFallbackProps>;
-};
-
-export type ErrorBoundaryState = {
-  hasError: boolean;
-  error: { message: string; stack: string; name: string };
-  errorInfo: { componentStack: string };
-};
+export default ErrorBoundary;

frontend/packages/console-shared/src/components/error/fallbacks/ErrorBoundaryFallbackInline.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Alert, Button, Modal, ModalVariant, Split, SplitItem } from '@patternfly/react-core';
+import { useTranslation } from 'react-i18next';
+import { ErrorBoundaryFallbackProps } from '../types';
+import ErrorDetailsBlock from './ErrorDetailsBlock';
+
+/**
+ * Support for error boundary content that won't consume the whole page.
+ */
+const ErrorBoundaryFallbackInline: React.FC<ErrorBoundaryFallbackProps> = (props) => {
+  const { t } = useTranslation();
+  const [isOpen, setOpen] = React.useState(false);
+  return (
+    <>
+      <Split hasGutter>
+        <SplitItem>
+          <Alert variant="danger" isInline isPlain title={t('console-shared~Extension error')} />
+        </SplitItem>
+        <SplitItem>
+          <Button variant="link" isInline onClick={() => setOpen(true)}>
+            {t('console-shared~Show details')}
+          </Button>
+        </SplitItem>
+      </Split>
+      <Modal
+        variant={ModalVariant.large}
+        title={t('console-shared~Oh no! Something went wrong.')}
+        isOpen={isOpen}
+        onClose={() => setOpen(false)}
+        actions={[
+          <Button key="confirm" variant="primary" onClick={() => setOpen(false)}>
+            {t('console-shared~Close')}
+          </Button>,
+        ]}
+      >
+        <ErrorDetailsBlock {...props} />
+      </Modal>
+    </>
+  );
+};
+
+export default ErrorBoundaryFallbackInline;

frontend/packages/console-shared/src/components/error/fallbacks/ErrorBoundaryFallbackPage.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Text, TextVariants } from '@patternfly/react-core';
+import { useTranslation } from 'react-i18next';
+import { ExpandCollapse } from '@console/internal/components/utils/expand-collapse';
+import { ErrorBoundaryFallbackProps } from '../types';
+import ErrorDetailsBlock from './ErrorDetailsBlock';
+
+/**
+ * Standard fallback catch -- expected to take up the whole page.
+ */
+const ErrorBoundaryFallbackPage: React.FC<ErrorBoundaryFallbackProps> = (props) => {
+  const { t } = useTranslation();
+  return (
+    <div className="co-m-pane__body">
+      <Text component={TextVariants.h1} className="co-m-pane__heading co-m-pane__heading--center">
+        {t('console-shared~Oh no! Something went wrong.')}
+      </Text>
+      <ExpandCollapse
+        textCollapsed={t('console-shared~Show details')}
+        textExpanded={t('console-shared~Hide details')}
+      >
+        <ErrorDetailsBlock {...props} />
+      </ExpandCollapse>
+    </div>
+  );
+};
+
+export default ErrorBoundaryFallbackPage;

frontend/packages/console-shared/src/components/error/fallbacks/ErrorBoundaryInline.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import ErrorBoundary from '../error-boundary';
+import ErrorBoundaryFallbackInline from './ErrorBoundaryFallbackInline';
+
+type ErrorBoundaryInlineProps = {
+  wrapper?: React.ComponentType<{ children: React.ReactNode }>;
+};
+
+/**
+ * Mount an error boundary that will render an inline error with modal stack trace.
+ * @see ErrorBoundaryPage if you do not need an inline fallback.
+ */
+const ErrorBoundaryInline: React.FC<ErrorBoundaryInlineProps> = ({
+  wrapper: Wrapper,
+  ...props
+}) => {
+  let fallback = ErrorBoundaryFallbackInline;
+  if (Wrapper) {
+    fallback = (innerProps) => (
+      <Wrapper>
+        <ErrorBoundaryFallbackInline {...innerProps} />
+      </Wrapper>
+    );
+  }
+
+  return <ErrorBoundary {...props} FallbackComponent={fallback} />;
+};
+
+export default ErrorBoundaryInline;

frontend/packages/console-shared/src/components/error/fallbacks/ErrorBoundaryPage.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import ErrorBoundary from '../error-boundary';
+import ErrorBoundaryFallbackPage from './ErrorBoundaryFallbackPage';
+
+/**
+ * Mount an error boundary that will render a full page error stack trace.
+ * @see ErrorBoundaryInline for a more inline option.
+ */
+const ErrorBoundaryPage: React.FC = (props) => {
+  return <ErrorBoundary {...props} FallbackComponent={ErrorBoundaryFallbackPage} />;
+};
+
+export default ErrorBoundaryPage;

frontend/packages/console-shared/src/components/error/fallbacks/ErrorDetailsBlock.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { CopyToClipboard } from '@console/internal/components/utils/copy-to-clipboard';
+import { ErrorBoundaryFallbackProps } from '../types';
+
+const ErrorDetailsBlock: React.FC<ErrorBoundaryFallbackProps> = (props) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <h3 className="co-section-heading-tertiary">{props.title}</h3>
+      <div className="form-group">
+        <label htmlFor="description">{t('console-shared~Description:')}</label>
+        <p>{props.errorMessage}</p>
+      </div>
+      <div className="form-group">
+        <label htmlFor="componentTrace">{t('console-shared~Component trace:')}</label>
+        <div className="co-copy-to-clipboard__stacktrace-width-height">
+          <CopyToClipboard value={props.componentStack.trim()} />
+        </div>
+      </div>
+      <div className="form-group">
+        <label htmlFor="stackTrace">{t('console-shared~Stack trace:')}</label>
+        <div className="co-copy-to-clipboard__stacktrace-width-height">
+          <CopyToClipboard value={props.stack.trim()} />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default ErrorDetailsBlock;

frontend/packages/console-shared/src/components/error/fallbacks/withFallback.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import ErrorBoundary from '../error-boundary';
+
+type WithFallback = <P = {}>(
+  Component: React.ComponentType<P>,
+  FallbackComponent?: React.ComponentType<any>,
+) => React.ComponentType<P>;
+
+const withFallback: WithFallback = (WrappedComponent, FallbackComponent) => {
+  const Component = (props) => (
+    <ErrorBoundary FallbackComponent={FallbackComponent}>
+      <WrappedComponent {...props} />
+    </ErrorBoundary>
+  );
+  Component.displayName = `withFallback(${WrappedComponent.displayName || WrappedComponent.name})`;
+  return Component;
+};
+
+export default withFallback;

frontend/packages/console-shared/src/components/error/index.ts

@@ -0,0 +1,12 @@
+// Default ErrorBoundary usage
+export { default as ErrorBoundary } from './error-boundary';
+export * from './types';
+
+// Packaged, easy to use, fallback options
+export { default as ErrorBoundaryPage } from './fallbacks/ErrorBoundaryPage';
+export { default as ErrorBoundaryInline } from './fallbacks/ErrorBoundaryInline';
+
+// Custom fallback options
+export { default as withFallback } from './fallbacks/withFallback';
+export { default as ErrorBoundaryFallbackPage } from './fallbacks/ErrorBoundaryFallbackPage';
+export { default as ErrorBoundaryFallbackInline } from './fallbacks/ErrorBoundaryFallbackInline';

frontend/packages/console-shared/src/components/error/types.ts

@@ -0,0 +1,6 @@
+export type ErrorBoundaryFallbackProps = {
+  errorMessage: string;
+  componentStack: string;
+  stack: string;
+  title: string;
+};

frontend/packages/operator-lifecycle-manager/src/components/catalog-source.spec.tsx

@@ -7,7 +7,7 @@ import { DetailsPage } from '@console/internal/components/factory';
 import { Firehose, LoadingBox, DetailsItem } from '@console/internal/components/utils';
 import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
 import { referenceForModel } from '@console/internal/module/k8s';
-import { ErrorBoundary } from '@console/shared/src/components/error/error-boundary';
+import { ErrorBoundary } from '@console/shared/src/components/error';
 import { testCatalogSource, testPackageManifest, dummyPackageManifest } from '../../mocks';
 import {
   SubscriptionModel,

frontend/packages/operator-lifecycle-manager/src/components/catalog-source.tsx

@@ -34,7 +34,7 @@ import {
 import i18n from '@console/internal/i18n';
 import { ConfigMapModel } from '@console/internal/models';
 import { referenceForModel, K8sKind, k8sPatch } from '@console/internal/module/k8s';
-import { withFallback } from '@console/shared/src/components/error/error-boundary';
+import { withFallback } from '@console/shared/src/components/error';
 import { DEFAULT_SOURCE_NAMESPACE } from '../const';
 import {
   SubscriptionModel,

frontend/packages/operator-lifecycle-manager/src/components/clusterserviceversion.spec.tsx

@@ -19,7 +19,7 @@ import {
 } from '@console/internal/components/utils';
 import * as operatorLogo from '@console/internal/imgs/operator.svg';
 import { referenceForModel } from '@console/internal/module/k8s';
-import { ErrorBoundary } from '@console/shared/src/components/error/error-boundary';
+import { ErrorBoundary } from '@console/shared/src/components/error';
 import { useActiveNamespace } from '@console/shared/src/hooks/redux-selectors';
 import {
   testClusterServiceVersion,

frontend/packages/operator-lifecycle-manager/src/components/clusterserviceversion.tsx

@@ -65,7 +65,7 @@ import {
   K8sResourceKind,
 } from '@console/internal/module/k8s';
 import { ALL_NAMESPACES_KEY, Status, getNamespace } from '@console/shared';
-import { withFallback } from '@console/shared/src/components/error/error-boundary';
+import { withFallback } from '@console/shared/src/components/error';
 import { consolePluginModal } from '@console/shared/src/components/modals';
 import { RedExclamationCircleIcon } from '@console/shared/src/components/status/icons';
 import { CONSOLE_OPERATOR_CONFIG_NAME } from '@console/shared/src/constants';