Merge pull request #10203 from jakemcdermott/add-default-error-boundary

Add default error boundary around screens

SUMMARY
Catch any unhandled non-async errors with an error boundary around screens. This will show a generic error message instead
of crashing the page.
The react docs decently summarize the general concept of error boundaries. The example code is informative, but there appears to be a few more edge cases that need to be dealt with. Rather than re-implement solutions for those, I decided to pull in a simple and well-tested library.
ADDITIONAL INFORMATION
before

after

Reviewed-by: Keith Grant <keithjgrant@gmail.com>
Reviewed-by: Kersom <None>
Reviewed-by: Tiago Góes <tiago.goes2009@gmail.com>

awx/ui_next/package-lock.json

@@ -16820,6 +16820,14 @@
         "prop-types-extra": "^1.1.0"
       }
     },
+    "react-error-boundary": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.3.tgz",
+      "integrity": "sha512-A+F9HHy9fvt9t8SNDlonq01prnU8AmkjvGKV4kk8seB9kU3xMEO8J/PQlLVmoOIDODl5U2kufSBs4vrWIqhsAA==",
+      "requires": {
+        "@babel/runtime": "^7.12.5"
+      }
+    },
     "react-error-overlay": {
       "version": "6.0.9",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",

awx/ui_next/package.json

@@ -26,6 +26,7 @@
     "react": "^16.13.1",
     "react-ace": "^9.3.0",
     "react-dom": "^16.13.1",
+    "react-error-boundary": "^3.1.3",
     "react-router-dom": "^5.1.2",
     "react-virtualized": "^9.21.1",
     "rrule": "^2.6.4",

awx/ui_next/src/App.jsx

@@ -7,6 +7,7 @@ import {
   Switch,
   Redirect,
 } from 'react-router-dom';
+import { ErrorBoundary } from 'react-error-boundary';
 import { I18nProvider } from '@lingui/react';
 import { i18n } from '@lingui/core';
 import { Card, PageSection } from '@patternfly/react-core';
@@ -14,6 +15,7 @@ import { Card, PageSection } from '@patternfly/react-core';
 import { ConfigProvider, useAuthorizedPath } from './contexts/Config';
 import AppContainer from './components/AppContainer';
 import Background from './components/Background';
+import ContentError from './components/ContentError';
 import NotFound from './screens/NotFound';
 import Login from './screens/Login';
 
@@ -25,6 +27,16 @@ import Metrics from './screens/Metrics';
 import getRouteConfig from './routeConfig';
 import SubscriptionEdit from './screens/Setting/Subscription/SubscriptionEdit';
 
+function ErrorFallback({ error }) {
+  return (
+    <PageSection>
+      <Card>
+        <ContentError error={error} />
+      </Card>
+    </PageSection>
+  );
+}
+
 const AuthorizedRoutes = ({ routeConfig }) => {
   const isAuthorized = useAuthorizedPath();
   const match = useRouteMatch();
@@ -72,7 +84,11 @@ const AuthorizedRoutes = ({ routeConfig }) => {
 
 const ProtectedRoute = ({ children, ...rest }) =>
   isAuthenticated(document.cookie) ? (
-    <Route {...rest}>{children}</Route>
+    <Route {...rest}>
+      <ErrorBoundary FallbackComponent={ErrorFallback}>
+        {children}
+      </ErrorBoundary>
+    </Route>
   ) : (
     <Redirect to="/login" />
   );