diff --git a/apps/web/src/app/[locale]/(auth)/error.tsx b/apps/web/src/app/[locale]/(auth)/error.tsx index 5246f1100..56bbe675c 100644 --- a/apps/web/src/app/[locale]/(auth)/error.tsx +++ b/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, diff --git a/apps/web/src/app/[locale]/(interviews)/(footerless)/error.tsx b/apps/web/src/app/[locale]/(interviews)/(footerless)/error.tsx index d3e8a633d..dc9a9120c 100644 --- a/apps/web/src/app/[locale]/(interviews)/(footerless)/error.tsx +++ b/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, diff --git a/apps/web/src/app/[locale]/(interviews)/(footerless)/questions/error.tsx b/apps/web/src/app/[locale]/(interviews)/(footerless)/questions/error.tsx index bb9c55e9a..b180867bb 100644 --- a/apps/web/src/app/[locale]/(interviews)/(footerless)/questions/error.tsx +++ b/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, diff --git a/apps/web/src/app/[locale]/(interviews)/(sidebar)/(topnav)/questions/formats/[format]/page.tsx b/apps/web/src/app/[locale]/(interviews)/(sidebar)/(topnav)/questions/formats/[format]/page.tsx index 0cbe3699f..ea4f904b0 100644 --- a/apps/web/src/app/[locale]/(interviews)/(sidebar)/(topnav)/questions/formats/[format]/page.tsx +++ b/apps/web/src/app/[locale]/(interviews)/(sidebar)/(topnav)/questions/formats/[format]/page.tsx @@ -258,7 +258,7 @@ export async function generateMetadata({ params }: Props): Promise { id: 'Pp+bFM', }), ogImageTitle, - pathname: `/questions/${format}`, + pathname: `/questions/formats/${format}`, socialTitle, title: seoTitle, }); diff --git a/apps/web/src/app/[locale]/(interviews)/error.tsx b/apps/web/src/app/[locale]/(interviews)/error.tsx index abae39307..e80e461fb 100644 --- a/apps/web/src/app/[locale]/(interviews)/error.tsx +++ b/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, diff --git a/apps/web/src/app/[locale]/(standard)/error.tsx b/apps/web/src/app/[locale]/(standard)/error.tsx index 5cd97f2c5..91d47dc46 100644 --- a/apps/web/src/app/[locale]/(standard)/error.tsx +++ b/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, diff --git a/apps/web/src/app/[locale]/blog/error.tsx b/apps/web/src/app/[locale]/blog/error.tsx index 8411d8ec4..ad746e358 100644 --- a/apps/web/src/app/[locale]/blog/error.tsx +++ b/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, diff --git a/apps/web/src/app/[locale]/error.tsx b/apps/web/src/app/[locale]/error.tsx index 169feb45d..b5b37e746 100644 --- a/apps/web/src/app/[locale]/error.tsx +++ b/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, diff --git a/apps/web/src/app/[locale]/projects/error.tsx b/apps/web/src/app/[locale]/projects/error.tsx index ea69c7f70..1c7a69a12 100644 --- a/apps/web/src/app/[locale]/projects/error.tsx +++ b/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, diff --git a/apps/web/src/components/workspace/common/CodingWorkspaceErrorBoundary.tsx b/apps/web/src/components/workspace/common/CodingWorkspaceErrorBoundary.tsx index f13f5f62e..f540ff01e 100644 --- a/apps/web/src/components/workspace/common/CodingWorkspaceErrorBoundary.tsx +++ b/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, diff --git a/apps/web/src/logging/chunkErrorReload.ts b/apps/web/src/logging/chunkErrorReload.ts new file mode 100644 index 000000000..f824f49e2 --- /dev/null +++ b/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(); + } +}