Add global error boundary for capturing client-side errors

src/components/Feedbacks/GlobalErrorBoundary.tsx

@@ -0,0 +1,22 @@
+import { Center } from '@chakra-ui/react';
+import { ErrorBoundary } from '@sentry/nextjs';
+import { ReactElement, ReactNode } from 'react';
+import { SuspendedAlert } from './SuspendedAlert';
+
+export const GlobalErrorBoundary = ({ children }: { children: ReactNode | ReactElement }) => {
+  return (
+    <ErrorBoundary
+      fallback={({ error, resetError }) => (
+        <Center>
+          <SuspendedAlert
+            label="Sorry, we've encountered an application error"
+            error={error}
+            resetErrorBoundary={resetError}
+          />
+        </Center>
+      )}
+    >
+      {children}
+    </ErrorBoundary>
+  );
+};

src/components/Layout/Layout.tsx

@@ -10,6 +10,7 @@ import { Notification } from '@/components/Notification';
 import Head from 'next/head';
 import { Favicons } from '@/components/Favicons/Favicons';
 import { BRAND_NAME_FULL } from '@/config';
+import { GlobalErrorBoundary } from '@/components/Feedbacks/GlobalErrorBoundary';
 
 const LandingTabs = dynamic(() => import('@/components/LandingTabs/LandingTabs').then((mod) => mod.LandingTabs), {
   ssr: false,
@@ -38,7 +39,7 @@ export const Layout: FC = ({ children }) => {
       <main>
         {isLandingPage && <LandingTabs />}
         <Container maxW={isLandingPage ? 'container.md' : 'container.xl'} id="main-content">
-          {children}
+          <GlobalErrorBoundary>{children}</GlobalErrorBoundary>
         </Container>
       </main>
       {isPrint ? null : <Footer />}

src/pages/search/index.tsx

@@ -146,7 +146,10 @@ const SearchPage: NextPage = () => {
 
     // generate search string and trigger page transition, also update store
     const search = makeSearchParams({ ...params, ...query, sort, p: 1 });
-    void router.push({ pathname: router.pathname, search }, null, { scroll: false, shallow: true });
+    void router.push({ pathname: router.pathname, search }, null, {
+      scroll: false,
+      shallow: true,
+    });
   };
 
   // On submission handler
@@ -165,7 +168,10 @@ const SearchPage: NextPage = () => {
 
     // generate a URL search string and trigger a page transition, and update store
     const search = makeSearchParams({ ...params, ...query, q, p: 1 });
-    void router.push({ pathname: router.pathname, search }, null, { scroll: false, shallow: true });
+    void router.push({ pathname: router.pathname, search }, null, {
+      scroll: false,
+      shallow: true,
+    });
   };
 
   // Update the store when we have data
@@ -193,7 +199,10 @@ const SearchPage: NextPage = () => {
     // clear current docs on filter change
     clearSelectedDocs();
 
-    void router.push({ pathname: router.pathname, search }, null, { scroll: false, shallow: true });
+    void router.push({ pathname: router.pathname, search }, null, {
+      scroll: false,
+      shallow: true,
+    });
   };
 
   const handleToggleExpand = () => {