[WebApp] Connect error page (#1105)

packages/web-app/package.json

@@ -152,7 +152,7 @@
     "react-copy-to-clipboard": "5.1.0",
     "react-custom-scrollbars-2": "4.5.0",
     "react-dom": "18.2.0",
-    "react-error-boundary": "3.1.4",
+    "react-error-boundary": "4.0.11",
     "react-final-form": "6.5.9",
     "react-helmet": "6.1.0",
     "react-hint": "3.2.1",

packages/web-app/src/App.tsx

@@ -2,7 +2,10 @@ import { SearchProvider } from '@elastic/react-search-ui'
 import AppSearchAPIConnector from '@elastic/search-ui-app-search-connector'
 import classNames from 'classnames'
 import type { History } from 'history'
+import { useEffect } from 'react'
 import Scrollbars from 'react-custom-scrollbars-2'
+import type { UseErrorBoundaryApi } from 'react-error-boundary'
+import { useErrorBoundary } from 'react-error-boundary'
 import type { WithStyles } from 'react-jss'
 import withStyles from 'react-jss'
 import { ToastContainer } from 'react-toastify'
@@ -104,16 +107,30 @@ const searchConfig = {
 
 interface AppProps extends WithStyles<typeof styles> {
   isAuthenticated: boolean
+  setErrorBoundary: (errorBoundary: UseErrorBoundaryApi<Error>) => void
   withInstallReminder: boolean
   novuSignature: string
   history: History
 }
 
-export const _App = ({ classes, history, isAuthenticated, novuSignature, withInstallReminder }: AppProps) => {
+export const _App = ({
+  classes,
+  history,
+  isAuthenticated,
+  setErrorBoundary,
+  novuSignature,
+  withInstallReminder,
+}: AppProps) => {
   const featureManager = useFeatureManager()
+  const errorBoundary = useErrorBoundary()
+
   const shouldShowNovuBanner = isAuthenticated && novuSignature
   const isNewChefDownloadFeatureFlagEnabled = featureManager.isEnabled(FeatureFlags.NewChefDownload)
 
+  useEffect(() => {
+    setErrorBoundary(errorBoundary)
+  }, [setErrorBoundary, errorBoundary])
+
   return (
     <>
       {shouldShowNovuBanner && <NovuNotificationBanner />}
@@ -159,6 +176,7 @@ export const _App = ({ classes, history, isAuthenticated, novuSignature, withIns
 const mapStoreToProps = (store: RootStore): any => ({
   isAuthenticated: store.auth.isAuthenticated,
   novuSignature: store.profile.novuSignature,
+  setErrorBoundary: store.errorBoundary.setErrorBoundary,
   withInstallReminder: store.profile.withInstallReminder,
 })
 

packages/web-app/src/Routes.tsx

@@ -1,7 +1,7 @@
 import type { Location } from 'history'
 import type { RouteComponentProps } from 'react-router'
 import { Redirect, Route, Switch, withRouter } from 'react-router'
-import { NotFoundPage } from './NotFoundPage'
+import { NoPageFound } from './components'
 import { ReferralOnboardingContainer, ReferralWelcomeContainer } from './modules/account-views/referral-views'
 import { ReplaceBonusModalContainer } from './modules/bonus-views'
 import { EarnInfoPage, EarningSummaryContainer } from './modules/earn-views'
@@ -56,7 +56,7 @@ const _Routes = ({ location }: RouteComponentProps) => {
       <Redirect exact from="/rewards/:id" to="/store/rewards/:id" />
       <Redirect exact from="/" to="/store" />
 
-      <Route component={NotFoundPage} />
+      <Route component={NoPageFound} />
     </Switch>
   )
 }

packages/web-app/src/Store.tsx

@@ -10,6 +10,7 @@ import { BalanceStore } from './modules/balance'
 import { BonusStore } from './modules/bonus'
 import { RefreshService } from './modules/data-refresh'
 import { EngagementStore } from './modules/engagement'
+import { ErrorBoundaryStore } from './modules/error-boundary'
 import { HelpScoutStore } from './modules/helpscout/HelpScoutStore'
 import { HomeStore } from './modules/home/HomeStore'
 import { NotificationStore } from './modules/notifications'
@@ -71,6 +72,7 @@ export class RootStore {
   public readonly onboarding: OnboardingStore
   public readonly startButtonUI: StartButtonUIStore
   public readonly saladCard: SaladCardStore
+  public readonly errorBoundary: ErrorBoundaryStore
 
   constructor(axios: AxiosInstance, private readonly featureManager: FeatureManager) {
     this.routing = new RouterStore()
@@ -97,6 +99,7 @@ export class RootStore {
     this.seasons = new SeasonsStore(axios)
     this.onboarding = new OnboardingStore(this)
     this.startButtonUI = new StartButtonUIStore(this)
+    this.errorBoundary = new ErrorBoundaryStore()
 
     // Pass AnalyticsStore to FeatureManager
     featureManager.setAnalyticsStore(this.analytics)

packages/web-app/src/index.tsx

@@ -25,10 +25,9 @@ import { SkeletonTheme } from 'react-loading-skeleton'
 import { Router } from 'react-router-dom'
 import { App } from './App'
 import { createClient } from './axiosFactory'
-import { Head } from './components'
+import { Head, ErrorBoundary } from './components'
 import { NovuProviderWrapper } from './components/NovuProviderWrapper'
 import { config } from './config'
-import { ErrorBoundary } from './ErrorBoundary'
 import { FeatureManagerProvider, UnleashFeatureManager } from './FeatureManager'
 import { DefaultTheme as JSSTheme } from './SaladTheme'
 import { createStore } from './Store'

packages/web-app/src/modules/error-boundary/ErrorBoundaryStore.tsx

@@ -0,0 +1,35 @@
+import { action, observable } from 'mobx'
+import type { UseErrorBoundaryApi } from 'react-error-boundary'
+
+export class ErrorBoundaryStore {
+  @observable
+  private pendingShowErrorBoundaryActions: (() => void)[] = []
+
+  @observable
+  public errorBoundary?: UseErrorBoundaryApi<Error> = undefined
+
+  @action
+  public setErrorBoundary = (errorBoundary: UseErrorBoundaryApi<Error>) => {
+    this.errorBoundary = errorBoundary
+    // Trigger any queued showErrorBoundary actions
+    this.pendingShowErrorBoundaryActions.forEach((queuedAction) => {
+      queuedAction()
+    })
+    this.pendingShowErrorBoundaryActions = []
+  }
+
+  @action
+  public showErrorBoundary = (errorCaughtMessage: Error) => {
+    if (this.errorBoundary) {
+      this.errorBoundary.showBoundary(errorCaughtMessage)
+    } else {
+      // Queue the showErrorBoundary action if errorBoundary is not defined
+      this.pendingShowErrorBoundaryActions.push(() => this.showErrorBoundary(errorCaughtMessage))
+    }
+  }
+
+  @action
+  public resetErrorBoundary = () => {
+    this.errorBoundary?.resetBoundary()
+  }
+}

packages/web-app/src/modules/error-boundary/index.tsx

@@ -0,0 +1 @@
+export * from './ErrorBoundaryStore'

packages/web-app/src/modules/profile/ProfileStore.tsx

@@ -112,9 +112,10 @@ export class ProfileStore {
     try {
       let profile = yield this.axios.get('/api/v1/profile')
       this.currentProfile = profile.data
+      this.store.errorBoundary.resetErrorBoundary()
     } catch (err) {
       this.currentProfile = undefined
-      this.store.routing.replace('/profile-error')
+      this.store.errorBoundary.showErrorBoundary(new Error(`An error occurred: ${err}`))
     }
     return this.currentProfile
   })

packages/web-app/yarn.lock

@@ -3455,7 +3455,7 @@ __metadata:
     react-copy-to-clipboard: "npm:5.1.0"
     react-custom-scrollbars-2: "npm:4.5.0"
     react-dom: "npm:18.2.0"
-    react-error-boundary: "npm:3.1.4"
+    react-error-boundary: "npm:4.0.11"
     react-final-form: "npm:6.5.9"
     react-helmet: "npm:6.1.0"
     react-hint: "npm:3.2.1"
@@ -18590,14 +18590,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-error-boundary@npm:3.1.4":
-  version: 3.1.4
-  resolution: "react-error-boundary@npm:3.1.4"
+"react-error-boundary@npm:4.0.11":
+  version: 4.0.11
+  resolution: "react-error-boundary@npm:4.0.11"
   dependencies:
     "@babel/runtime": "npm:^7.12.5"
   peerDependencies:
     react: ">=16.13.1"
-  checksum: f977ca61823e43de2381d53dd7aa8b4d79ff6a984c9afdc88dc44f9973b99de7fd382d2f0f91f2688e24bb987c0185bf45d0b004f22afaaab0f990a830253bfb
+  checksum: 33dad3df7687971e65c7182d97f44bd618cb5d77d1c338e0a7c17c5cf7706a07b9055fffb771ff19bad750d40dd3cfd18d661a60b0518e73197e294dc185f18c
   languageName: node
   linkType: hard