diff --git a/platform/app/public/config/default.js b/platform/app/public/config/default.js index 8f7bba498..f29a70acb 100644 --- a/platform/app/public/config/default.js +++ b/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: [ diff --git a/platform/app/src/routes/index.tsx b/platform/app/src/routes/index.tsx index d364bc36f..193c806c2 100644 --- a/platform/app/src/routes/index.tsx +++ b/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 ( - + Points to consider while using `dangerouslyUseDynamicConfig`:
- User have to enable this feature by setting `dangerouslyUseDynamicConfig.enabled:true`. By default it is `false`. diff --git a/platform/ui-next/src/components/Errorboundary/ErrorBoundary.tsx b/platform/ui-next/src/components/Errorboundary/ErrorBoundary.tsx index 67cf9db7c..78b689cad 100644 --- a/platform/ui-next/src/components/Errorboundary/ErrorBoundary.tsx +++ b/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 ( {}, fallbackComponent: FallbackComponent = DefaultFallback, children, + showErrorDetails, }: ErrorBoundaryProps) => { const [error, setError] = useState(null); @@ -303,6 +317,7 @@ const ErrorBoundary = ({ )} onReset={onResetHandler} @@ -315,6 +330,7 @@ const ErrorBoundary = ({ error={error} context={context} resetErrorBoundary={() => setError(null)} + showErrorDetails={showErrorDetails} /> )}