feat: OPTIC-1746: Improve global error message handling by showing toast messages in favour of modals with increased Sentry reporting (#7167)

Co-authored-by: robot-ci-heartex <[email protected]>

Author: bmartel

web/apps/labelstudio/src/app/App.jsx

@@ -72,11 +72,11 @@ const App = ({ content }) => {
             <QueryClientProvider client={LSQueryClient} key="query" />,
             <JotaiProvider key="jotai" store={JotaiStore} />,
             <AppStoreProvider key="app-store" />,
+            <ToastProvider key="toast" />,
             <ApiProvider key="api" />,
             <ConfigProvider key="config" />,
             <RoutesProvider key="rotes" />,
             <ProjectProvider key="project" />,
-            <ToastProvider key="toast" />,
             <CurrentUserProvider key="current-user" />,
             isFF(FF_PRODUCT_TOUR) && <TourProvider useAPI={useAPI} />,
           ].filter(Boolean)}

web/apps/labelstudio/src/app/ErrorBoundary.jsx

@@ -1,6 +1,9 @@
 import React, { Component } from "react";
 import { ErrorWrapper } from "../components/Error/Error";
 import { Modal } from "../components/Modal/ModalPopup";
+import { captureException } from "../config/Sentry";
+import { isFF } from "../utils/feature-flags";
+import { IMPROVE_GLOBAL_ERROR_MESSAGES } from "../providers/ApiProvider";
 
 export const ErrorContext = React.createContext();
 
@@ -16,7 +19,13 @@ export default class ErrorBoundary extends Component {
   }
 
   componentDidCatch(error, { componentStack }) {
-    // You can also log the error to an error reporting service
+    // Capture the error in Sentry, so we can fix it directly
+    // Don't make the users copy and paste the stacktrace, it's not actionable
+    captureException(error, {
+      extra: {
+        component_stacktrace: componentStack,
+      },
+    });
     this.setState({
       error,
       hasError: true,
@@ -35,13 +44,19 @@ export default class ErrorBoundary extends Component {
         setTimeout(() => location.reload(), 32);
       };
 
+      // We will capture the stacktrace in Sentry, so we don't need to show it in the modal
+      // It is not actionable to the user, let's not show it
+      const stacktrace = isFF(IMPROVE_GLOBAL_ERROR_MESSAGES)
+        ? undefined
+        : `${errorInfo ? `Component Stack: ${errorInfo}` : ""}\n\n${this.state.error?.stack ?? ""}`;
+
       return (
         <Modal onHide={() => location.reload()} style={{ width: "60vw" }} visible bare>
           <div style={{ padding: 40 }}>
             <ErrorWrapper
               title="Runtime error"
               message={error}
-              stacktrace={`${errorInfo ? `Component Stack: ${errorInfo}` : ""}\n\n${this.state.error?.stack ?? ""}`}
+              stacktrace={stacktrace}
               onGoBack={goBack}
               onReload={() => location.reload()}
             />

web/apps/labelstudio/src/components/Error/InlineError.jsx

@@ -7,7 +7,7 @@ export const InlineError = ({ children, includeValidation, className, style }) =
   const context = React.useContext(ApiContext);
 
   React.useEffect(() => {
-    context.showModal = false;
+    context.showGlobalError = false;
   }, [context]);
 
   return context.error ? (

web/apps/labelstudio/src/components/Form/Form.jsx

@@ -18,6 +18,7 @@ import {
   FormValidationContext,
 } from "./FormContext";
 import * as Validators from "./Validation/Validators";
+import { ToastProvider, ToastViewport } from "@humansignal/ui";
 
 const PASSWORD_PROTECTED_VALUE = "got ya, suspicious hacker!";
 
@@ -65,6 +66,7 @@ export default class Form extends React.Component {
       <FormSubmissionContext.Provider key="form-submission-ctx" value={this.state.submitting} />,
       <FormStateContext.Provider key="form-state-ctx" value={this.state.state} />,
       <FormResponseContext.Provider key="form-response" value={this.state.lastResponse} />,
+      <ToastProvider key="toast" />,
       <ApiProvider key="form-api" ref={this.apiRef} />,
     ];
 
@@ -86,6 +88,7 @@ export default class Form extends React.Component {
             <ValidationRenderer validation={this.state.validation} />
           )}
         </form>
+        <ToastViewport />
       </MultiProvider>
     );
   }

web/apps/labelstudio/src/components/Modal/Modal.jsx

@@ -8,6 +8,7 @@ import { cn } from "../../utils/bem";
 import { Button } from "../Button/Button";
 import { Space } from "../Space/Space";
 import { Modal } from "./ModalPopup";
+import { ToastProvider, ToastViewport } from "@humansignal/ui";
 
 const standaloneModal = (props) => {
   const modalRef = createRef();
@@ -27,7 +28,12 @@ const standaloneModal = (props) => {
         providers={
           props.simple
             ? []
-            : [<ConfigProvider key="config" />, <ApiProvider key="api" />, <CurrentUserProvider key="current-user" />]
+            : [
+                <ConfigProvider key="config" />,
+                <ToastProvider key="toast" />,
+                <ApiProvider key="api" />,
+                <CurrentUserProvider key="current-user" />,
+              ]
         }
       >
         <Modal
@@ -40,6 +46,7 @@ const standaloneModal = (props) => {
           }}
           animateAppearance={animate}
         />
+        {!props.simple && <ToastViewport />}
       </MultiProvider>,
       rootDiv,
     );

web/apps/labelstudio/src/config/Sentry.ts

@@ -2,26 +2,52 @@ import * as Sentry from "@sentry/browser";
 import * as ReactSentry from "@sentry/react";
 import type { RouterHistory } from "@sentry/react/build/types/reactrouter";
 import { Route } from "react-router-dom";
+import { isDefined } from "../utils/helpers";
+
+const SENTRY_DSN = APP_SETTINGS.sentry_dsn;
+const SENTRY_ENV = APP_SETTINGS.sentry_environment ?? process.env.NODE_ENV;
+const SENTRY_RATE = APP_SETTINGS.sentry_rate ? Number.parseFloat(APP_SETTINGS.sentry_rate) : 0.25;
+const SENTRY_ENABLED = APP_SETTINGS.debug === false && isDefined(SENTRY_DSN);
 
 export const initSentry = (history: RouterHistory) => {
-  if (APP_SETTINGS.debug === false && APP_SETTINGS.sentry_dsn) {
+  if (SENTRY_ENABLED) {
     setTags();
     Sentry.init({
       dsn: APP_SETTINGS.sentry_dsn,
       integrations: [
         Sentry.browserTracingIntegration(),
         ReactSentry.reactRouterV5BrowserTracingIntegration({ history }),
       ],
-      environment: process.env.NODE_ENV,
+      environment: SENTRY_ENV,
       // Set tracesSampleRate to 1.0 to capture 100%
       // of transactions for performance monitoring.
       // We recommend adjusting this value in production
-      tracesSampleRate: 0.25,
+      tracesSampleRate: SENTRY_RATE,
       release: getVersion(),
     });
   }
 };
 
+export const captureMessage: typeof Sentry.captureMessage = (message, type) => {
+  if (!SENTRY_ENABLED) {
+    if (typeof type === "string" && type in console) {
+      (console as any)[type](message);
+    } else {
+      console.log(message);
+    }
+    return "";
+  }
+  return Sentry.captureMessage(message, type);
+};
+
+export const captureException: typeof Sentry.captureException = (exception, captureContext) => {
+  if (!SENTRY_ENABLED) {
+    console.error(exception, captureContext);
+    return "";
+  }
+  return Sentry.captureException(exception, captureContext);
+};
+
 const setTags = () => {
   const tags: Record<string, any> = {};