[web] misc: reload when ChunkLoadError

(cherry picked from commit eb193461b2e503ac9b3d25fbcee3e092d39c13f8)
(cherry picked from commit 9e80865bfe4d6a56be0c1b3a12772a339651d7a3)

apps/web/src/app/[locale]/(auth)/error.tsx

@@ -5,6 +5,7 @@ import { useEffect } from 'react';
 
 import ErrorMessageBlock from '~/components/global/error/ErrorMessageBlock';
 
+import { chunkLoadErrorReload } from '~/logging/chunkErrorReload';
 import logEvent from '~/logging/logEvent';
 import logMessage from '~/logging/logMessage';
 
@@ -16,6 +17,13 @@ type Props = Readonly<{
 export default function AuthError({ error }: Props) {
   useEffect(() => {
     console.error(error);
+    // If the error is a ChunkLoadError, we reload the page to try to load the chunk again because it's likely an intermittent network issue.
+    if (error.name === 'ChunkLoadError') {
+      chunkLoadErrorReload();
+
+      return;
+    }
+
     logMessage({
       level: 'error',
       message: error.message,

apps/web/src/app/[locale]/(interviews)/(footerless)/error.tsx

@@ -4,6 +4,7 @@ import { useEffect } from 'react';
 
 import ErrorMessageBlock from '~/components/global/error/ErrorMessageBlock';
 
+import { chunkLoadErrorReload } from '~/logging/chunkErrorReload';
 import logEvent from '~/logging/logEvent';
 import logMessage from '~/logging/logMessage';
 
@@ -15,6 +16,13 @@ type Props = Readonly<{
 export default function Error({ error }: Props) {
   useEffect(() => {
     console.error(error);
+    // If the error is a ChunkLoadError, we reload the page to try to load the chunk again because it's likely an intermittent network issue.
+    if (error.name === 'ChunkLoadError') {
+      chunkLoadErrorReload();
+
+      return;
+    }
+
     logMessage({
       level: 'error',
       message: error.message,

apps/web/src/app/[locale]/(interviews)/(footerless)/questions/error.tsx

@@ -4,6 +4,7 @@ import { useEffect } from 'react';
 
 import ErrorMessageBlock from '~/components/global/error/ErrorMessageBlock';
 
+import { chunkLoadErrorReload } from '~/logging/chunkErrorReload';
 import logEvent from '~/logging/logEvent';
 import logMessage from '~/logging/logMessage';
 
@@ -15,6 +16,13 @@ type Props = Readonly<{
 export default function Error({ error }: Props) {
   useEffect(() => {
     console.error(error);
+    // If the error is a ChunkLoadError, we reload the page to try to load the chunk again because it's likely an intermittent network issue.
+    if (error.name === 'ChunkLoadError') {
+      chunkLoadErrorReload();
+
+      return;
+    }
+
     logMessage({
       level: 'error',
       message: error.message,

apps/web/src/app/[locale]/(interviews)/(sidebar)/(topnav)/questions/formats/[format]/page.tsx

@@ -258,7 +258,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
         id: 'Pp+bFM',
       }),
       ogImageTitle,
-      pathname: `/questions/${format}`,
+      pathname: `/questions/formats/${format}`,
       socialTitle,
       title: seoTitle,
     });

apps/web/src/app/[locale]/(interviews)/error.tsx

@@ -5,6 +5,7 @@ import { useEffect } from 'react';
 
 import ErrorMessageBlock from '~/components/global/error/ErrorMessageBlock';
 
+import { chunkLoadErrorReload } from '~/logging/chunkErrorReload';
 import logEvent from '~/logging/logEvent';
 import logMessage from '~/logging/logMessage';
 
@@ -16,6 +17,13 @@ type Props = Readonly<{
 export default function InterviewsError({ error }: Props) {
   useEffect(() => {
     console.error(error);
+    // If the error is a ChunkLoadError, we reload the page to try to load the chunk again because it's likely an intermittent network issue.
+    if (error.name === 'ChunkLoadError') {
+      chunkLoadErrorReload();
+
+      return;
+    }
+
     logMessage({
       level: 'error',
       message: error.message,

apps/web/src/app/[locale]/(standard)/error.tsx

@@ -5,6 +5,7 @@ import { useEffect } from 'react';
 
 import ErrorMessageBlock from '~/components/global/error/ErrorMessageBlock';
 
+import { chunkLoadErrorReload } from '~/logging/chunkErrorReload';
 import logEvent from '~/logging/logEvent';
 import logMessage from '~/logging/logMessage';
 
@@ -16,6 +17,13 @@ type Props = Readonly<{
 export default function GeneralError({ error }: Props) {
   useEffect(() => {
     console.error(error);
+    // If the error is a ChunkLoadError, we reload the page to try to load the chunk again because it's likely an intermittent network issue.
+    if (error.name === 'ChunkLoadError') {
+      chunkLoadErrorReload();
+
+      return;
+    }
+
     logMessage({
       level: 'error',
       message: error.message,

apps/web/src/app/[locale]/blog/error.tsx

@@ -5,6 +5,7 @@ import { useEffect } from 'react';
 
 import ErrorMessageBlock from '~/components/global/error/ErrorMessageBlock';
 
+import { chunkLoadErrorReload } from '~/logging/chunkErrorReload';
 import logEvent from '~/logging/logEvent';
 import logMessage from '~/logging/logMessage';
 
@@ -16,6 +17,13 @@ type Props = Readonly<{
 export default function BlogError({ error }: Props) {
   useEffect(() => {
     console.error(error);
+    // If the error is a ChunkLoadError, we reload the page to try to load the chunk again because it's likely an intermittent network issue.
+    if (error.name === 'ChunkLoadError') {
+      chunkLoadErrorReload();
+
+      return;
+    }
+
     logMessage({
       level: 'error',
       message: error.message,

apps/web/src/app/[locale]/error.tsx

@@ -5,6 +5,7 @@ import { useEffect } from 'react';
 
 import ErrorMessageBlock from '~/components/global/error/ErrorMessageBlock';
 
+import { chunkLoadErrorReload } from '~/logging/chunkErrorReload';
 import logEvent from '~/logging/logEvent';
 import logMessage from '~/logging/logMessage';
 
@@ -21,6 +22,13 @@ type Props = Readonly<{
 export default function GlobalError({ error }: Props) {
   useEffect(() => {
     console.error(error);
+    // If the error is a ChunkLoadError, we reload the page to try to load the chunk again because it's likely an intermittent network issue.
+    if (error.name === 'ChunkLoadError') {
+      chunkLoadErrorReload();
+
+      return;
+    }
+
     logMessage({
       level: 'error',
       message: error.message,

apps/web/src/app/[locale]/projects/error.tsx

@@ -5,6 +5,7 @@ import { useEffect } from 'react';
 
 import ErrorMessageBlock from '~/components/global/error/ErrorMessageBlock';
 
+import { chunkLoadErrorReload } from '~/logging/chunkErrorReload';
 import logEvent from '~/logging/logEvent';
 import logMessage from '~/logging/logMessage';
 
@@ -16,6 +17,13 @@ type Props = Readonly<{
 export default function ProjectsError({ error }: Props) {
   useEffect(() => {
     console.error(error);
+    // If the error is a ChunkLoadError, we reload the page to try to load the chunk again because it's likely an intermittent network issue.
+    if (error.name === 'ChunkLoadError') {
+      chunkLoadErrorReload();
+
+      return;
+    }
+
     logMessage({
       level: 'error',
       message: error.message,

apps/web/src/components/workspace/common/CodingWorkspaceErrorBoundary.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import Button from '~/components/ui/Button';
 import EmptyState from '~/components/ui/EmptyState';
 
+import { chunkLoadErrorReload } from '~/logging/chunkErrorReload';
 import logEvent from '~/logging/logEvent';
 import logMessage from '~/logging/logMessage';
 
@@ -32,6 +33,14 @@ export default class CodingWorkspaceErrorBoundary extends React.Component<
   }
 
   componentDidCatch(error: Error & { digest?: string }) {
+    console.error(error);
+    // If the error is a ChunkLoadError, we reload the page to try to load the chunk again because it's likely an intermittent network issue.
+    if (error.name === 'ChunkLoadError') {
+      chunkLoadErrorReload();
+
+      return;
+    }
+
     logMessage({
       level: 'error',
       message: error.message,

apps/web/src/logging/chunkErrorReload.ts

@@ -0,0 +1,16 @@
+import GreatStorage from '~/greatstorage/GreatStorage';
+
+export function chunkLoadErrorReload(): void {
+  const storage = new GreatStorage({
+    namespace: 'gfe',
+    storage: sessionStorage,
+  });
+
+  if (!storage.getItem('chunk-load-error-refresh')) {
+    // Set a TTL of 1 minute to prevent infinite reloads in case the chunk still fails to load
+    storage.setItem('chunk-load-error-refresh', true, { ttl: 60 });
+
+    // Reload the page to see if the chunk loads successfully
+    window.location.reload();
+  }
+}