diff --git a/awx/ui_next/package-lock.json b/awx/ui_next/package-lock.json index b4978a09ec..a08df59cb4 100644 --- a/awx/ui_next/package-lock.json +++ b/awx/ui_next/package-lock.json @@ -16826,6 +16826,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", diff --git a/awx/ui_next/package.json b/awx/ui_next/package.json index cc3d2c9d1a..5984c117de 100644 --- a/awx/ui_next/package.json +++ b/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", diff --git a/awx/ui_next/src/App.jsx b/awx/ui_next/src/App.jsx index 2ae8adf284..e98fdc3035 100644 --- a/awx/ui_next/src/App.jsx +++ b/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 ( + + + + + + ); +} + const AuthorizedRoutes = ({ routeConfig }) => { const isAuthorized = useAuthorizedPath(); const match = useRouteMatch(); @@ -72,7 +84,11 @@ const AuthorizedRoutes = ({ routeConfig }) => { const ProtectedRoute = ({ children, ...rest }) => isAuthenticated(document.cookie) ? ( - {children} + + + {children} + + ) : ( );