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/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}
           />
         )}
       </>