fix: root error screen for unexpected errors

jwplayer · Feb 7, 2024 · 320fe44 · 320fe44
1 parent c97c59b
commit 320fe44
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/packages/hooks-react/src/useBootstrapApp.ts b/packages/hooks-react/src/useBootstrapApp.ts
@@ -20,7 +20,7 @@ export const useBootstrapApp = (url: string, onReady: OnReadyCallback) => {
   const queryClient = useQueryClient();
   const refreshEntitlements = () => queryClient.invalidateQueries({ queryKey: ['entitlements'] });
 
-  const { data, isLoading, error, isSuccess, refetch } = useQuery<Resources, AppError>(
+  const { data, isLoading, error, isSuccess, refetch } = useQuery<Resources, Error | AppError>(
     'config-init',
     () => applicationController.initializeApp(url, refreshEntitlements),
     {

diff --git a/platforms/web/src/components/DemoConfigDialog/DemoConfigDialog.tsx b/platforms/web/src/components/DemoConfigDialog/DemoConfigDialog.tsx
@@ -11,6 +11,7 @@ import ConfirmationDialog from '@jwp/ott-ui-react/src/components/ConfirmationDia
 import LoadingOverlay from '@jwp/ott-ui-react/src/components/LoadingOverlay/LoadingOverlay';
 import DevStackTrace from '@jwp/ott-ui-react/src/components/DevStackTrace/DevStackTrace';
 import type { BootstrapData } from '@jwp/ott-hooks-react/src/useBootstrapApp';
+import { AppError } from '@jwp/ott-common/src/utils/error';
 
 import styles from './DemoConfigDialog.module.scss';
 
@@ -53,6 +54,9 @@ const DemoConfigDialog = ({ query }: { query: BootstrapData }) => {
 
   const [state, setState] = useState<State>(initialState);
 
+  const errorTitle = error && error instanceof AppError ? error.payload.title : '';
+  const errorDescription = error && error instanceof AppError ? error.payload.description : '';
+
   const configNavigate = async (configSource: string | undefined) => {
     setState((s) => ({ ...s, configSource: configSource, error: undefined }));
 
@@ -160,8 +164,8 @@ const DemoConfigDialog = ({ query }: { query: BootstrapData }) => {
       {!isSuccess && (
         <div className={styles.configModal}>
           <ErrorPage
-            title={error?.payload?.title || t('app_config_not_found')}
-            message={error?.payload?.description || ''}
+            title={errorTitle || t('app_config_not_found')}
+            message={errorDescription}
             learnMoreLabel={t('app_config_learn_more')}
             helpLink={'https://docs.jwplayer.com/platform/docs/ott-create-an-app-config'}
             error={typeof state.error === 'string' ? undefined : state.error}

diff --git a/platforms/web/src/containers/Root/Root.tsx b/platforms/web/src/containers/Root/Root.tsx
@@ -8,6 +8,7 @@ import { type BootstrapData, type OnReadyCallback, useBootstrapApp } from '@jwp/
 import { setThemingVariables } from '@jwp/ott-ui-react/src/utils/theming';
 import { addScript } from '@jwp/ott-ui-react/src/utils/dom';
 import type { Config } from '@jwp/ott-common/types/config';
+import { AppError } from '@jwp/ott-common/src/utils/error';
 
 import DemoConfigDialog from '../../components/DemoConfigDialog/DemoConfigDialog';
 import AppRoutes from '../AppRoutes/AppRoutes';
@@ -17,6 +18,13 @@ import { useTrackConfigKeyChange } from '#src/hooks/useTrackConfigKeyChange';
 
 const IS_DEMO_OR_PREVIEW = IS_DEMO_MODE || IS_PREVIEW_MODE;
 
+const renderError = (error: Error | AppError) => {
+  if (error instanceof AppError) {
+    return <ErrorPage title={error.payload.title} message={error.payload.description} helpLink={error.payload.helpLink} error={error} />;
+  }
+  return <ErrorPage error={error} />;
+};
+
 const ProdContentLoader = ({ query }: { query: BootstrapData }) => {
   const { isLoading, error } = query;
 
@@ -25,7 +33,7 @@ const ProdContentLoader = ({ query }: { query: BootstrapData }) => {
   }
 
   if (error) {
-    return <ErrorPage title={error.payload.title} message={error.payload.description} helpLink={error.payload.helpLink} />;
+    return renderError(error);
   }
 
   return null;
@@ -44,9 +52,7 @@ const DemoContentLoader = ({ query }: { query: BootstrapData }) => {
   return (
     <>
       {/* Show the error page when error except in demo mode (the demo mode shows its own error) */}
-      {!IS_DEMO_OR_PREVIEW && error && (
-        <ErrorPage title={error?.payload?.title} message={error?.payload?.description} error={error} helpLink={error?.payload?.helpLink} />
-      )}
+      {!IS_DEMO_OR_PREVIEW && error && renderError(error)}
       {IS_DEMO_OR_PREVIEW && <DemoConfigDialog query={query} />}
       {/* Config select control to improve testing experience */}
       {(IS_DEVELOPMENT_BUILD || IS_PREVIEW_MODE) && <DevConfigSelector selectedConfig={configSource} />}