Handle chunkLoadError (#771)

vtex · Jun 17, 2021 · dd34712 · dd34712
1 parent dc7e803
commit dd34712
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 20 deletions.
diff --git a/packages/gatsby-theme-store/src/components/Error/ErrorBoundary.tsx b/packages/gatsby-theme-store/src/components/Error/ErrorBoundary.tsx
@@ -1,13 +1,8 @@
-import type { ReactNode } from 'react'
 import React, { Component } from 'react'
 
 import ErrorHandler from './ErrorHandler'
 
-type Props = {
-  children: ReactNode
-}
-
-class ErrorBoundary extends Component<Props> {
+class ErrorBoundary extends Component {
   public state = { hasError: false, error: null }
 
   public static getDerivedStateFromError(error: any) {
@@ -18,7 +13,7 @@ class ErrorBoundary extends Component<Props> {
   }
 
   public render() {
-    if (this.state.hasError) {
+    if (this.state.hasError && process.env.NODE_ENV === 'production') {
       return (
         <ErrorHandler error={this.state.error}>
           {this.props.children}

diff --git a/packages/gatsby-theme-store/src/components/Error/ErrorHandler.tsx b/packages/gatsby-theme-store/src/components/Error/ErrorHandler.tsx
@@ -4,8 +4,8 @@
  * style or change the error page, please shadow the `pages/500.tsx` instead.
  * This component is synchronously imported and has a big TBT implication
  */
-import type { FC } from 'react'
 import { useEffect } from 'react'
+import type { FC } from 'react'
 
 import { uuidv4 } from '../../sdk/uuid'
 
@@ -18,8 +18,6 @@ export const handleError = ({ error, errorId }: Props) => {
   console.error(error)
   console.error(errorId)
 
-  const isUserOffline = !window.navigator.onLine
-
   // prevent infinite loop
   if (
     window.location.pathname.startsWith('/404') ||
@@ -29,18 +27,21 @@ export const handleError = ({ error, errorId }: Props) => {
     return
   }
 
-  if (isUserOffline) {
-    const previousPagePath = encodeURIComponent(window.location.pathname)
+  const from = encodeURIComponent(window.location.pathname)
 
-    window.location.href = `/offline?from=${previousPagePath}`
+  const isOffline = !window.navigator.onLine
+  const is404 = error?.extensions?.exception?.status === 404
+  const isFrameworkLevelError = error.name === 'ChunkLoadError'
 
-    return
+  if (isFrameworkLevelError) {
+    window.location.reload()
+  } else if (isOffline) {
+    window.location.href = `/offline?from=${from}`
+  } else if (is404) {
+    window.location.href = `/404?from=${from}`
+  } else {
+    window.location.href = `/500?from=${from}&errorId=${errorId ?? uuidv4()}`
   }
-
-  window.location.href =
-    error?.extensions?.exception?.status === 404
-      ? `/404?from=${window.location.pathname}`
-      : `/500?from=${window.location.pathname}&errorId=${errorId ?? uuidv4()}`
 }
 
 const ErrorHandler: FC<Props> = ({ error, errorId }) => {

diff --git a/packages/gatsby-theme-store/src/gatsby-browser.tsx b/packages/gatsby-theme-store/src/gatsby-browser.tsx
@@ -6,7 +6,7 @@ import 'requestidlecallback-polyfill'
 import React, { StrictMode } from 'react'
 import { UIProvider } from '@vtex/store-sdk'
 import ReactDOM from 'react-dom'
-import type { WrapRootElementBrowserArgs } from 'gatsby'
+import type { RouteUpdateArgs, WrapRootElementBrowserArgs } from 'gatsby'
 import type { ReactChild } from 'react'
 
 import ErrorBoundary from './components/Error/ErrorBoundary'
@@ -84,3 +84,19 @@ export const wrapPageElement = ({
 export const onRouteUpdate = () => {
   progressOnRouteUpdate()
 }
+
+let nextRoute: string | undefined
+
+export const onPreRouteUpdate = ({ location }: RouteUpdateArgs) => {
+  nextRoute = location.pathname
+}
+
+window.addEventListener('unhandledrejection', (event) => {
+  if (event.reason.name === 'ChunkLoadError') {
+    if (nextRoute) {
+      window.location.pathname = nextRoute
+    } else {
+      window.location.reload()
+    }
+  }
+})