feat(app): add ErrorBoundary and Suspense overlay to catch rendering …

…errors

src/components/error-boundary/index.jsx

@@ -0,0 +1,36 @@
+import { useRouter } from 'next/router'
+import { Component } from 'react'
+import FiveHundredPage from 'pages/500'
+
+import { getLogger } from 'utils/logging/log-util'
+
+export class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true }
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.log(error, errorInfo)
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <h1>Error occur</h1>
+    }
+
+    return this.props.children
+  }
+}
+
+export const SuspenseFallback = (branch) => {
+  const { asPath } = useRouter()
+  const logger = getLogger('Suspense Fallback')
+  logger.error(`Error while processing ${asPath}`)
+
+  return <FiveHundredPage branch={branch} />
+}

src/pages/_app.tsx

@@ -14,6 +14,8 @@ import Layout from 'components/layout'
 type Props = AppProps & {
   Component: Page
 }
+import { ErrorBoundary, SuspenseFallback } from 'components/error-boundary'
+import { Suspense } from 'react'
 
 import TrackerProvider from 'utils/contexts/trackerContext'
 import PreviewContextProvider from 'utils/contexts/preview'
@@ -40,7 +42,13 @@ function MyApp({ Component, pageProps }: Props) {
             sectionSelected={pageProps.sectionSelected}
             parentsArray={pageProps.parentsArray}
           >
-            <Component {...pageProps} />
+            <ErrorBoundary>
+              <Suspense
+                fallback={<SuspenseFallback branch={pageProps.branch} />}
+              >
+                <Component {...pageProps} />
+              </Suspense>
+            </ErrorBoundary>
           </Layout>
         </PreviewContextProvider>
       </IntlProvider>

tsconfig.json

@@ -37,7 +37,8 @@
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
-    "src/tests/cypress/support/commands.js"
+    "src/tests/cypress/support/commands.js",
+    "src/components/error-boundary/index.jsx"
   ],
   "exclude": ["node_modules"]
 }