Better handling of OAuth/Lazy Load App breaking errors (#946)

* Making the full page error dialog more reusable
 - Converting the reload dialog to it
 - Adding an OAuth dialog

Adding log rocket event for window.opener not being there

* New files for the error dialog

* Moving the reload dialog

* Adding before unload alert

* Instead of having a user reload manually just kick off the reload automatically

* Adding a quicker handler to prevent infinite loops

* Adding comment

* Cleaning up code

Author: travjenkins

src/components/shared/ErrorDialog/OauthWindowOpenerMissing.tsx

@@ -0,0 +1,38 @@
+import { Button, Stack, Typography } from '@mui/material';
+import { FormattedMessage } from 'react-intl';
+import ErrorDialog from './index';
+
+const ARIA_NAME = 'OauthWindowOpenerMissing';
+
+function OauthWindowOpenerMissing() {
+    return (
+        <ErrorDialog
+            body={
+                <Stack spacing={2}>
+                    <Typography>
+                        <FormattedMessage id="oauth.windowOpener.error.message1" />
+                    </Typography>
+                    <Typography>
+                        <FormattedMessage id="oauth.windowOpener.error.message2" />
+                    </Typography>
+                </Stack>
+            }
+            bodyTitle={<FormattedMessage id="oauth.windowOpener.error.title" />}
+            cta={
+                <Button
+                    onClick={() => {
+                        window.close();
+                    }}
+                >
+                    <FormattedMessage id="cta.close" />
+                </Button>
+            }
+            dialogTitle={
+                <FormattedMessage id="oauth.windowOpener.error.dialog.title" />
+            }
+            name={ARIA_NAME}
+        />
+    );
+}
+
+export default OauthWindowOpenerMissing;

src/components/shared/ErrorDialog/index.tsx

@@ -0,0 +1,48 @@
+import {
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+} from '@mui/material';
+import { ReactNode } from 'react';
+import AlertBox from '../AlertBox';
+
+const ARIA_DESC_ID = '-dialog-description';
+const ARIA_LABEL_ID = '-dialog-title';
+
+interface Props {
+    body: ReactNode;
+    cta: ReactNode;
+    name: string;
+    dialogTitle: ReactNode;
+    bodyTitle: ReactNode;
+}
+
+function ErrorDialog({ name, dialogTitle, bodyTitle, body, cta }: Props) {
+    const labelledBy = `${name}${ARIA_LABEL_ID}`;
+    const describedby = `${name}${ARIA_DESC_ID}`;
+
+    return (
+        <Dialog
+            open
+            aria-labelledby={labelledBy}
+            aria-describedby={describedby}
+            sx={{
+                minWidth: 300,
+            }}
+        >
+            <DialogTitle id={labelledBy}>{dialogTitle}</DialogTitle>
+            <DialogContent>
+                <AlertBox short severity="info" title={bodyTitle}>
+                    <DialogContentText id={describedby} component="div">
+                        {body}
+                    </DialogContentText>
+                </AlertBox>
+            </DialogContent>
+            <DialogActions>{cta}</DialogActions>
+        </Dialog>
+    );
+}
+
+export default ErrorDialog;

src/components/shared/MustReloadDialog.tsx

@@ -1,8 +1,9 @@
 import { accessToken, authURL } from 'api/oauth';
 import { useOAuth2 } from 'hooks/forks/react-use-oauth2/components';
 import { isEmpty } from 'lodash';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useIntl } from 'react-intl';
+import { useBeforeUnload } from 'react-use';
 import { useDetailsForm_connectorImage_connectorId } from 'stores/DetailsForm/hooks';
 import { useEndpointConfigStore_endpointConfig_data } from 'stores/EndpointConfig/hooks';
 import { CREDENTIALS, INJECTED_VALUES } from './shared';
@@ -94,6 +95,13 @@ export const useOauthHandler = (
         }
     };
 
+    // Loading usually means there is an OAuth in progress so make sure
+    //  they want to close the window.
+    const when = useCallback(() => {
+        return loading;
+    }, [loading]);
+    useBeforeUnload(when, intl.formatMessage({ id: 'confirm.oauth' }));
+
     return {
         errorMessage,
         openPopUp,

src/forms/renderers/OAuth/useOauthHandler.ts

@@ -1,6 +1,10 @@
 // Heavily edited version of https://github.com/tasoskakour/react-use-oauth2
+
 import FullPageSpinner from 'components/fullPage/Spinner';
-import { useEffect } from 'react';
+import OauthWindowOpenerMissing from 'components/shared/ErrorDialog/OauthWindowOpenerMissing';
+import { useEffect, useState } from 'react';
+import { logRocketEvent } from 'services/shared';
+import { CustomEvents } from 'services/types';
 import { base64RemovePadding } from 'utils/misc-utils';
 import { OAUTH_RESPONSE, OAUTH_STATE_KEY } from './constants';
 
@@ -26,6 +30,7 @@ const sendMessage = (body: any) => {
 };
 
 const OAuthPopup = (props: Props) => {
+    const [showError, setShowError] = useState(false);
     const { Component = <FullPageSpinner delay={0} /> } = props;
 
     // On mount
@@ -37,7 +42,12 @@ const OAuthPopup = (props: Props) => {
         const { error, state } = payload;
 
         if (!window.opener) {
-            throw new Error('No window opener');
+            logRocketEvent(CustomEvents.OAUTH_WINDOW_OPENER, {
+                missing: true,
+            });
+
+            setShowError(true);
+            return;
         }
 
         if (error) {
@@ -55,6 +65,10 @@ const OAuthPopup = (props: Props) => {
         }
     }, []);
 
+    if (showError) {
+        return <OauthWindowOpenerMissing />;
+    }
+
     return Component;
 };
 

src/hooks/forks/react-use-oauth2/components/OAuthPopup.tsx

@@ -195,16 +195,12 @@ const ErrorBoundry: ResolvedIntlConfig['messages'] = {
     'errorBoundry.title': `${Error['error.title']}`,
     'errorBoundry.message1': `There was an unexpected application error. `,
     'errorBoundry.message2': `Expand to see details.`,
-    'errorBoundry.chunkNotFetched.dialog.title': `Reload Required`,
-    'errorBoundry.chunkNotFetched.error.title': `Failure to load`,
-    'errorBoundry.chunkNotFetched.error.message1': `There was an issue fetching this portion of the application.`,
-    'errorBoundry.chunkNotFetched.error.message2': `This is usually caused by a network issue or an old dashboard version being cached.`,
-    'errorBoundry.chunkNotFetched.error.instructions': `To continue please reload.`,
 };
 
 const ConfirmationDialog: ResolvedIntlConfig['messages'] = {
     'confirm.title': `Are you sure?`,
     'confirm.loseData': `You have unsaved work. If you continue, you will lose your changes.`,
+    'confirm.oauth': `You are in the process of OAuth. If you continue, you will lose your changes.`,
 };
 
 const FullPage: ResolvedIntlConfig['messages'] = {
@@ -1039,6 +1035,10 @@ const OAuth: ResolvedIntlConfig['messages'] = {
     'oauth.authenticate': `Authenticate your {provider} account`,
     'oauth.remove': `Remove`,
     'oauth.edit.message': `If you edit your endpoint config and want to continue using OAuth you must reauthenticate.`,
+    'oauth.windowOpener.error.dialog.title': `OAuth Failed`,
+    'oauth.windowOpener.error.title': `Cannot reach parent window`,
+    'oauth.windowOpener.error.message1': `We are unable to communicate with the window that opened the OAuth pop up. The window may have been closed.`,
+    'oauth.windowOpener.error.message2': `Please close this dialog and try again.`,
 };
 
 const Supabase: ResolvedIntlConfig['messages'] = {

src/lang/en-US.ts

@@ -1,15 +1,54 @@
-import MustReloadDialog from 'components/shared/MustReloadDialog';
+import FullPageSpinner from 'components/fullPage/Spinner';
 import { lazy } from 'react';
 import { logRocketConsole, logRocketEvent } from './shared';
 import { CustomEvents } from './types';
 
+const LAZY_LOAD_FAILED_KEY = 'chunk_failed';
+
+// https://mitchgavan.com/code-splitting-react-safely/
+const setWithExpiry = (key: string, value: string, ttl: number) => {
+    localStorage.setItem(
+        key,
+        JSON.stringify({
+            value,
+            expiry: new Date().getTime() + ttl,
+        })
+    );
+};
+
+const getWithExpiry = (key: string) => {
+    const itemString = window.localStorage.getItem(key);
+    const item = itemString ? JSON.parse(itemString) : null;
+
+    // Either there is no setting or we couldn't parse it. Either way we should try reloading again
+    if (item === null) {
+        return null;
+    }
+
+    // We have waited long enough to allow trying again so clearing out the key
+    if (new Date().getTime() > item.expiry) {
+        localStorage.removeItem(key);
+        return null;
+    }
+
+    // Return value so we do not try reloading again
+    return item.value;
+};
+
 const handledLazy = (factory: () => Promise<{ default: any }>) => {
     return lazy(() =>
         factory().catch((error) => {
             logRocketEvent(CustomEvents.LAZY_LOADING, 'failed');
             logRocketConsole('Component Failed Loading:', error);
 
-            return { default: MustReloadDialog };
+            // Check if we're in an infinite loading loop before trying again
+            if (!getWithExpiry(LAZY_LOAD_FAILED_KEY)) {
+                setWithExpiry(LAZY_LOAD_FAILED_KEY, 'true', 10000);
+                window.location.reload();
+            }
+
+            // Still make sure to return something so the app does not blow up
+            return { default: FullPageSpinner };
         })
     );
 };

src/services/react.ts

@@ -30,6 +30,7 @@ export enum CustomEvents {
     MATERIALIZATION_TEST = 'Materialization_Test',
     MATERIALIZATION_TEST_BACKGROUND = 'Materialization_Test_Background',
     NOTIFICATION_NETWORK_WARNING = 'Notification_Network_Warning',
+    OAUTH_WINDOW_OPENER = 'Oauth_Window_Opener',
     STRIPE_FORM_LOADING_FAILED = 'Stripe_Form_Loading_Failed',
     SUPABASE_CALL_FAILED = 'Supabase_Call_Failed',
     SUPABASE_CALL_UNAUTHENTICATED = 'Supabase_Call_Unauthenticated',