Install Sentry ErrorBoundary at root

authgear · Dec 23, 2024 · 9c4204c · 9c4204c
1 parent 3492c88
commit 9c4204c
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 53 deletions.
diff --git a/portal/src/FlavoredErrorBoundSuspense.tsx b/portal/src/FlavoredErrorBoundSuspense.tsx
@@ -1,20 +1,18 @@
-import React, { useCallback } from "react";
+import React from "react";
 import { Text } from "@fluentui/react";
 import ErrorBoundSuspense, {
   type ErrorBoundSuspenseProps,
   type ErrorBoundaryFallbackProps,
 } from "./ErrorBoundSuspense";
 import ShowLoading from "./ShowLoading";
-import PrimaryButton from "./PrimaryButton";
 import styles from "./FlavoredErrorBoundSuspense.module.css";
-import { FormattedMessage } from "@oursky/react-messageformat";
 
 export interface FlavoredErrorBoundSuspenseProps {
   factory: ErrorBoundSuspenseProps["factory"];
   children: ErrorBoundSuspenseProps["children"];
 }
 
-function FallbackComponent(
+export function FallbackComponent(
   props: ErrorBoundaryFallbackProps
 ): React.ReactElement<any, any> {
   // The definition of resetError is
@@ -25,24 +23,12 @@ function FallbackComponent(
   // But I think that is just a mistake in the type definition.
   // So it should be safe to ignore.
   // eslint-disable-next-line @typescript-eslint/unbound-method
-  const { resetError } = props;
-  const onClick = useCallback(
-    (e: React.MouseEvent<unknown>) => {
-      e.preventDefault();
-      e.stopPropagation();
-      resetError();
-    },
-    [resetError]
-  );
+  const { resetError: _resetError } = props;
+
+  // It is intentionally not using FormattedMessage so that it can always show something.
   return (
     <div className={styles.fallbackContainer}>
-      <Text as="p">
-        <FormattedMessage id="FlavoredErrorBoundSuspense.message" />
-      </Text>
-      <PrimaryButton
-        onClick={onClick}
-        text={<FormattedMessage id="FlavoredErrorBoundSuspense.reload" />}
-      />
+      <Text as="p">{"Something went wrong. Please refresh this page."}</Text>
     </div>
   );
 }

diff --git a/portal/src/ReactApp.tsx b/portal/src/ReactApp.tsx
@@ -11,6 +11,7 @@ import {
   Exception as SentryException,
   ErrorEvent as SentryErrorEvent,
   EventHint,
+  ErrorBoundary,
   init as sentryInit,
 } from "@sentry/react";
 import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
@@ -42,6 +43,7 @@ import { LoadingContextProvider } from "./hook/loading";
 import { ErrorContextProvider } from "./hook/error";
 import ShowLoading from "./ShowLoading";
 import GTMProvider from "./GTMProvider";
+import { FallbackComponent } from "./FlavoredErrorBoundSuspense";
 import { useViewerQuery } from "./graphql/portal/query/viewerQuery";
 import { extractRawID } from "./util/graphql";
 import { useIdentify } from "./gtm_v2";
@@ -364,37 +366,39 @@ const ReactApp: React.VFC = function ReactApp() {
   }
 
   return (
-    <GTMProvider containerID={systemConfig.gtmContainerID}>
-      <ErrorContextProvider>
-        <LoadingContextProvider>
-          <LocaleProvider
-            locale="en"
-            messageByID={systemConfig.translations.en}
-            defaultComponents={defaultComponents}
-          >
-            <HelmetProvider>
-              <PortalClientProvider value={apolloClient}>
-                <ApolloProvider client={apolloClient}>
-                  <SystemConfigContext.Provider value={systemConfig}>
-                    <LoadCurrentUser>
-                      <UnauthenticatedDialogContext.Provider
-                        value={unauthenticatedDialogContextValue}
-                      >
-                        <PortalRoot />
-                      </UnauthenticatedDialogContext.Provider>
-                      <UnauthenticatedDialog
-                        isHidden={!displayUnauthenticatedDialog}
-                        onConfirm={onUnauthenticatedDialogConfirm}
-                      />
-                    </LoadCurrentUser>
-                  </SystemConfigContext.Provider>
-                </ApolloProvider>
-              </PortalClientProvider>
-            </HelmetProvider>
-          </LocaleProvider>
-        </LoadingContextProvider>
-      </ErrorContextProvider>
-    </GTMProvider>
+    <ErrorBoundary fallback={FallbackComponent}>
+      <GTMProvider containerID={systemConfig.gtmContainerID}>
+        <ErrorContextProvider>
+          <LoadingContextProvider>
+            <LocaleProvider
+              locale="en"
+              messageByID={systemConfig.translations.en}
+              defaultComponents={defaultComponents}
+            >
+              <HelmetProvider>
+                <PortalClientProvider value={apolloClient}>
+                  <ApolloProvider client={apolloClient}>
+                    <SystemConfigContext.Provider value={systemConfig}>
+                      <LoadCurrentUser>
+                        <UnauthenticatedDialogContext.Provider
+                          value={unauthenticatedDialogContextValue}
+                        >
+                          <PortalRoot />
+                        </UnauthenticatedDialogContext.Provider>
+                        <UnauthenticatedDialog
+                          isHidden={!displayUnauthenticatedDialog}
+                          onConfirm={onUnauthenticatedDialogConfirm}
+                        />
+                      </LoadCurrentUser>
+                    </SystemConfigContext.Provider>
+                  </ApolloProvider>
+                </PortalClientProvider>
+              </HelmetProvider>
+            </LocaleProvider>
+          </LoadingContextProvider>
+        </ErrorContextProvider>
+      </GTMProvider>
+    </ErrorBoundary>
   );
 };
 

diff --git a/portal/src/locale-data/en.json b/portal/src/locale-data/en.json
@@ -86,8 +86,7 @@
 
   "show-error.retry": "Retry",
 
-  "FlavoredErrorBoundSuspense.message": "Something went wrong",
-  "FlavoredErrorBoundSuspense.reload": "Reload",
+  "FlavoredErrorBoundSuspense.message": "Something went wrong. Please refresh this page.",
 
   "errors.validation.unknown": "Invalid input at {location}: {kind}",
   "errors.validation.required": "Please fill in this field",