fix(ErrorBoundary): Allow for details to be shown in production. (#5504)

Added showErrorDetails to config to allow for details to be shown in various runtime environments.

platform/app/public/config/default.js

@@ -25,6 +25,7 @@ window.config = {
     // above, the number of requests can be go a lot higher.
     prefetch: 25,
   },
+  showErrorDetails: 'always', // 'always', 'dev', 'production'
   // filterQueryParam: false,
   // Defines multi-monitor layouts
   multimonitor: [

platform/app/src/routes/index.tsx

@@ -128,11 +128,17 @@ const createRoutes = ({
   ];
 
   function RouteWithErrorBoundary({ route, ...rest }) {
+    const [appConfig] = useAppConfig();
+    const { showErrorDetails } = appConfig;
+
     history.navigate = useNavigate();
 
     // eslint-disable-next-line react/jsx-props-no-spreading
     return (
-      <ErrorBoundary context={`Route ${route.path}`}>
+      <ErrorBoundary
+        context={`Route ${route.path}`}
+        showErrorDetails={showErrorDetails}
+      >
         <route.children
           {...rest}
           {...route.props}

platform/docs/docs/configuration/configurationFiles.md

@@ -196,6 +196,7 @@ if auth headers are used, a preflight request is required.
 - `activateViewportBeforeInteraction`: (default to true), if set to false, tools can be used directly without the need to click and activate the viewport.
 - `autoPlayCine`: (default to false), if set to true, data sets with the DICOM frame time tag (i.e. (0018,1063)) will auto play when displayed
 - `addWindowLevelActionMenu`: (default to true), if set to false, the window level action menu item is NOT added to the viewport action corners
+- `showErrorDetails`: determines which runtime environments can display exception and error details caught at the `ErrorBoundary`; acceptable values include: `always`, `dev`, and `production`
 - `dangerouslyUseDynamicConfig`: Dynamic config allows user to pass `configUrl` query string. This allows to load config without recompiling application. If the `configUrl` query string is passed, the worklist and modes will load from the referenced json rather than the default .env config. If there is no `configUrl` path provided, the default behaviour is used and there should not be any deviation from current user experience.<br/>
 Points to consider while using `dangerouslyUseDynamicConfig`:<br/>
   - User have to enable this feature by setting `dangerouslyUseDynamicConfig.enabled:true`. By default it is `false`.

platform/ui-next/src/components/Errorboundary/ErrorBoundary.tsx

@@ -112,10 +112,17 @@ interface ErrorBoundaryError extends Error {
   stack?: string;
 }
 
+enum ShowErrorDetails {
+  always = 'always',
+  dev = 'dev',
+  production = 'production',
+}
+
 interface DefaultFallbackProps extends FallbackProps {
   error: ErrorBoundaryError;
   context: string;
   resetErrorBoundary: () => void;
+  showErrorDetails?: ShowErrorDetails;
 }
 
 interface ErrorBoundaryProps {
@@ -126,13 +133,21 @@ interface ErrorBoundaryProps {
   children: React.ReactNode;
   fallbackRoute?: string | null;
   isPage?: boolean;
+  showErrorDetails?: ShowErrorDetails;
 }
 
 const DefaultFallback = ({
   error,
   context,
   resetErrorBoundary = () => {},
+  showErrorDetails,
 }: DefaultFallbackProps) => {
+  const isShowDetailsButtonVisible =
+    showErrorDetails == null ||
+    showErrorDetails === ShowErrorDetails.always ||
+    (showErrorDetails === ShowErrorDetails.dev && !isProduction) ||
+    (showErrorDetails === ShowErrorDetails.production && isProduction);
+
   const { t } = useTranslation('ErrorBoundary');
   const [showDetails, setShowDetails] = useState(false);
   const { show } = useNotification();
@@ -165,17 +180,15 @@ const DefaultFallback = ({
       type: 'error',
       duration: 0,
       id: errorId,
-      action: {
-        label: t('Show Details'),
-        onClick: () => setShowDetails(true),
-      },
+      action: isShowDetailsButtonVisible
+        ? {
+            label: t('Show Details'),
+            onClick: () => setShowDetails(true),
+          }
+        : undefined,
     });
   }, [error, errorTitle, subtitle, t, title, show]);
 
-  if (isProduction) {
-    return null;
-  }
-
   return (
     <Dialog
       open={showDetails}
@@ -250,6 +263,7 @@ const ErrorBoundary = ({
   onError = _error => {},
   fallbackComponent: FallbackComponent = DefaultFallback,
   children,
+  showErrorDetails,
 }: ErrorBoundaryProps) => {
   const [error, setError] = useState<ErrorBoundaryError | null>(null);
 
@@ -303,6 +317,7 @@ const ErrorBoundary = ({
         <FallbackComponent
           {...props}
           context={context}
+          showErrorDetails={showErrorDetails}
         />
       )}
       onReset={onResetHandler}
@@ -315,6 +330,7 @@ const ErrorBoundary = ({
             error={error}
             context={context}
             resetErrorBoundary={() => setError(null)}
+            showErrorDetails={showErrorDetails}
           />
         )}
       </>