From b0087fd52b194e417a0e9ae7d3e508f4b4ae4d1a Mon Sep 17 00:00:00 2001
From: Yangshun <tay.yang.shun@gmail.com>
Date: Fri, 1 Aug 2025 11:32:33 +0800
Subject: [PATCH] [web] workspace/sandpack: don't switch bundler URL when
 timeout

---
 .../ProjectsChallengeSolutionSection.tsx       |  8 +-------
 .../common/sandpack/SandpackObservability.tsx  | 12 ++++++++++++
 .../common/sandpack/useSandpackBundlerURL.ts   | 18 ++----------------
 .../JavaScriptCodingWorkspaceSection.tsx       |  8 +-------
 .../UserInterfaceCodingWorkspaceSavesPage.tsx  | 10 ++--------
 .../UserInterfaceCodingWorkspaceSection.tsx    |  8 +-------
 ...erfaceCodingWorkspaceSolutionPreviewTab.tsx |  8 +-------
 7 files changed, 20 insertions(+), 52 deletions(-)

diff --git a/apps/web/src/components/projects/challenges/solutions/ProjectsChallengeSolutionSection.tsx b/apps/web/src/components/projects/challenges/solutions/ProjectsChallengeSolutionSection.tsx
index f2f8e00f1..c54adcf07 100644
--- a/apps/web/src/components/projects/challenges/solutions/ProjectsChallengeSolutionSection.tsx
+++ b/apps/web/src/components/projects/challenges/solutions/ProjectsChallengeSolutionSection.tsx
@@ -8,7 +8,6 @@ import CodingPreferencesProvider from '~/components/global/CodingPreferencesProv
 import { useColorSchemePreferences } from '~/components/global/color-scheme/ColorSchemePreferencesProvider';
 import type { ProjectsChallengeSolutionBundle } from '~/components/projects/challenges/types';
 import SandpackObservability from '~/components/workspace/common/sandpack/SandpackObservability';
-import { SandpackTimeout } from '~/components/workspace/common/sandpack/SandpackTimeout';
 import { useSandpackBundlerURL } from '~/components/workspace/common/sandpack/useSandpackBundlerURL';
 
 import ProjectsChallengeSolutionWorkspace from './ProjectsChallengeSolutionWorkspace';
@@ -21,8 +20,7 @@ const sandpackO11yInstance = 'projects.challenge_solution';
 
 export default function ProjectsChallengeSolutionSection({ solution }: Props) {
   const { colorScheme } = useColorSchemePreferences();
-  const [bundlerURL, changeToFallbackUrl] =
-    useSandpackBundlerURL(sandpackO11yInstance);
+  const bundlerURL = useSandpackBundlerURL(sandpackO11yInstance);
   const { files, workspace } = solution;
 
   return (
@@ -51,10 +49,6 @@ export default function ProjectsChallengeSolutionSection({ solution }: Props) {
           activeTabScrollIntoView={true}
           defaultFiles={files}
         />
-        <SandpackTimeout
-          instance={sandpackO11yInstance}
-          onTimeout={() => changeToFallbackUrl('timeout')}
-        />
         <SandpackObservability
           bundlerURL={bundlerURL}
           instance={sandpackO11yInstance}
diff --git a/apps/web/src/components/workspace/common/sandpack/SandpackObservability.tsx b/apps/web/src/components/workspace/common/sandpack/SandpackObservability.tsx
index 229635787..4a855479e 100644
--- a/apps/web/src/components/workspace/common/sandpack/SandpackObservability.tsx
+++ b/apps/web/src/components/workspace/common/sandpack/SandpackObservability.tsx
@@ -73,8 +73,20 @@ export default function SandpackObservability({ bundlerURL, instance }: Props) {
   const { status: sandpackStatus } = sandpack;
   const loadingStartedRef = useRef(false);
   const readySentRef = useRef(false);
+  const timeoutSentRef = useRef(false);
 
   usePingSandpackBundler({ bundlerURL, instance });
+
+  useEffect(() => {
+    if (sandpackStatus === 'timeout' && !timeoutSentRef.current) {
+      logEvent('sandpack.timeout', {
+        instance,
+        namespace: 'workspace',
+      });
+      timeoutSentRef.current = true;
+    }
+  }, [instance, sandpackStatus]);
+
   useEffect(() => {
     if (loadingStartedRef.current) {
       return;
diff --git a/apps/web/src/components/workspace/common/sandpack/useSandpackBundlerURL.ts b/apps/web/src/components/workspace/common/sandpack/useSandpackBundlerURL.ts
index f60f77e81..b0a2b77a1 100644
--- a/apps/web/src/components/workspace/common/sandpack/useSandpackBundlerURL.ts
+++ b/apps/web/src/components/workspace/common/sandpack/useSandpackBundlerURL.ts
@@ -8,7 +8,7 @@ import { getErrorMessage } from '~/utils/getErrorMessage';
 const defaultBundlerURL = 'https://bundler.greatfrontend.io';
 const fallbackBundlerURL = 'https://bundler.greatfrontend.com';
 
-export function useSandpackBundlerURL(instance: string) {
+export function useSandpackBundlerURL(instance: string): string {
   const [url, setUrl] = useGreatStorageLocal(
     'workspace:bundler-url', // Change the key if you want to reset the URL in local storage
     defaultBundlerURL,
@@ -17,20 +17,6 @@ export function useSandpackBundlerURL(instance: string) {
     },
   );
 
-  const changeToFallbackUrl = useCallback(
-    (reason: 'blocked' | 'timeout' | 'unknown') => {
-      setUrl(fallbackBundlerURL);
-      logEvent('sandpack.bundler_fallback', {
-        instance,
-        namespace: 'workspace',
-        online: navigator.onLine,
-        reason,
-        url: fallbackBundlerURL,
-      });
-    },
-    [instance, setUrl],
-  );
-
   const pingBundlerURL = useCallback(async () => {
     try {
       const response = await fetch(new URL('version.txt', url).toString());
@@ -83,5 +69,5 @@ export function useSandpackBundlerURL(instance: string) {
     pingBundlerURL();
   }, [url, pingBundlerURL]);
 
-  return [url, changeToFallbackUrl] as const;
+  return url;
 }
diff --git a/apps/web/src/components/workspace/javascript/JavaScriptCodingWorkspaceSection.tsx b/apps/web/src/components/workspace/javascript/JavaScriptCodingWorkspaceSection.tsx
index f9f3655d7..8acf1492f 100644
--- a/apps/web/src/components/workspace/javascript/JavaScriptCodingWorkspaceSection.tsx
+++ b/apps/web/src/components/workspace/javascript/JavaScriptCodingWorkspaceSection.tsx
@@ -8,7 +8,6 @@ import type {
   QuestionJavaScript,
   QuestionMetadata,
 } from '~/components/interviews/questions/common/QuestionsTypes';
-import { SandpackTimeout } from '~/components/workspace/common/sandpack/SandpackTimeout';
 import JavaScriptCodingWorkspace from '~/components/workspace/javascript/JavaScriptCodingWorkspace';
 import { loadLocalJavaScriptQuestionCode } from '~/components/workspace/javascript/JavaScriptCodingWorkspaceCodeStorage';
 
@@ -39,8 +38,7 @@ export default function JavaScriptCodingWorkspaceSection({
   studyListKey,
 }: Props) {
   const { colorScheme } = useColorSchemePreferences();
-  const [bundlerURL, changeToFallbackUrl] =
-    useSandpackBundlerURL(sandpackO11yInstance);
+  const bundlerURL = useSandpackBundlerURL(sandpackO11yInstance);
 
   const { files, skeleton, workspace } = question;
   const loadedCode = loadLocalJavaScriptQuestionCode(
@@ -100,10 +98,6 @@ export default function JavaScriptCodingWorkspaceSection({
           workspace={workspace}
           onLanguageChange={onLanguageChange}
         />
-        <SandpackTimeout
-          instance={sandpackO11yInstance}
-          onTimeout={() => changeToFallbackUrl('timeout')}
-        />
         <SandpackObservability
           bundlerURL={bundlerURL}
           instance={sandpackO11yInstance}
diff --git a/apps/web/src/components/workspace/user-interface/UserInterfaceCodingWorkspaceSavesPage.tsx b/apps/web/src/components/workspace/user-interface/UserInterfaceCodingWorkspaceSavesPage.tsx
index 67188de4f..acf8c2059 100644
--- a/apps/web/src/components/workspace/user-interface/UserInterfaceCodingWorkspaceSavesPage.tsx
+++ b/apps/web/src/components/workspace/user-interface/UserInterfaceCodingWorkspaceSavesPage.tsx
@@ -15,12 +15,11 @@ import {
   questionUserInterfaceDescriptionPath,
   questionUserInterfaceSolutionPath,
 } from '~/components/interviews/questions/content/user-interface/QuestionUserInterfaceRoutes';
-import SandpackObservability from '~/components/workspace/common/sandpack/SandpackObservability';
-import { SandpackTimeout } from '~/components/workspace/common/sandpack/SandpackTimeout';
 import { useSandpackBundlerURL } from '~/components/workspace/common/sandpack/useSandpackBundlerURL';
 
 import { useI18nRouter } from '~/next-i18nostic/src';
 
+import SandpackObservability from '../common/sandpack/SandpackObservability';
 import UserInterfaceCodingWorkspace from './UserInterfaceCodingWorkspace';
 import { UserInterfaceCodingWorkspaceSavesContextProvider } from './UserInterfaceCodingWorkspaceSaveContext';
 
@@ -45,8 +44,7 @@ export default function UserInterfaceCodingWorkspaceSavesPage({
 }: Props) {
   const router = useI18nRouter();
   const { colorScheme } = useColorSchemePreferences();
-  const [bundlerURL, changeToFallbackUrl] =
-    useSandpackBundlerURL(sandpackO11yInstance);
+  const bundlerURL = useSandpackBundlerURL(sandpackO11yInstance);
 
   const { metadata, skeletonBundle } = question;
   const { files: defaultFiles, workspace } = skeletonBundle;
@@ -108,10 +106,6 @@ export default function UserInterfaceCodingWorkspaceSavesPage({
               );
             }}
           />
-          <SandpackTimeout
-            instance={sandpackO11yInstance}
-            onTimeout={() => changeToFallbackUrl('timeout')}
-          />
           <SandpackObservability
             bundlerURL={bundlerURL}
             instance={sandpackO11yInstance}
diff --git a/apps/web/src/components/workspace/user-interface/UserInterfaceCodingWorkspaceSection.tsx b/apps/web/src/components/workspace/user-interface/UserInterfaceCodingWorkspaceSection.tsx
index 45be56d2e..16ecf0281 100644
--- a/apps/web/src/components/workspace/user-interface/UserInterfaceCodingWorkspaceSection.tsx
+++ b/apps/web/src/components/workspace/user-interface/UserInterfaceCodingWorkspaceSection.tsx
@@ -9,7 +9,6 @@ import type {
   QuestionUserInterface,
 } from '~/components/interviews/questions/common/QuestionsTypes';
 import type { QuestionUserInterfaceMode } from '~/components/interviews/questions/common/QuestionUserInterfacePath';
-import { SandpackTimeout } from '~/components/workspace/common/sandpack/SandpackTimeout';
 import { useSandpackBundlerURL } from '~/components/workspace/common/sandpack/useSandpackBundlerURL';
 import UserInterfaceCodingWorkspace from '~/components/workspace/user-interface/UserInterfaceCodingWorkspace';
 import { loadLocalUserInterfaceQuestionCode } from '~/components/workspace/user-interface/UserInterfaceCodingWorkspaceCodeStorage';
@@ -45,8 +44,7 @@ export default function UserInterfaceCodingWorkspaceSection({
   studyListKey,
 }: Props) {
   const { colorScheme } = useColorSchemePreferences();
-  const [bundlerURL, changeToFallbackUrl] =
-    useSandpackBundlerURL(sandpackO11yInstance);
+  const bundlerURL = useSandpackBundlerURL(sandpackO11yInstance);
 
   const loadedFiles = loadLocalUserInterfaceQuestionCode(
     question,
@@ -107,10 +105,6 @@ export default function UserInterfaceCodingWorkspaceSection({
           studyListKey={studyListKey}
           onFrameworkChange={onFrameworkChange}
         />
-        <SandpackTimeout
-          instance={sandpackO11yInstance}
-          onTimeout={() => changeToFallbackUrl('timeout')}
-        />
         <SandpackObservability
           bundlerURL={bundlerURL}
           instance={sandpackO11yInstance}
diff --git a/apps/web/src/components/workspace/user-interface/UserInterfaceCodingWorkspaceSolutionPreviewTab.tsx b/apps/web/src/components/workspace/user-interface/UserInterfaceCodingWorkspaceSolutionPreviewTab.tsx
index fc6cfd2ac..0f0d80639 100644
--- a/apps/web/src/components/workspace/user-interface/UserInterfaceCodingWorkspaceSolutionPreviewTab.tsx
+++ b/apps/web/src/components/workspace/user-interface/UserInterfaceCodingWorkspaceSolutionPreviewTab.tsx
@@ -9,7 +9,6 @@ import { useIntl } from '~/components/intl';
 import Anchor from '~/components/ui/Anchor';
 import Banner from '~/components/ui/Banner';
 import SandpackObservability from '~/components/workspace/common/sandpack/SandpackObservability';
-import { SandpackTimeout } from '~/components/workspace/common/sandpack/SandpackTimeout';
 import { useSandpackBundlerURL } from '~/components/workspace/common/sandpack/useSandpackBundlerURL';
 
 import UserInterfaceCodingWorkspacePreview from './UserInterfaceCodingWorkspacePreview';
@@ -26,8 +25,7 @@ export default function UserInterfaceCodingWorkspaceSolutionPreviewTab({
 }: Props) {
   const intl = useIntl();
   const { colorScheme } = useColorSchemePreferences();
-  const [bundlerURL, changeToFallbackUrl] =
-    useSandpackBundlerURL(sandpackO11yInstance);
+  const bundlerURL = useSandpackBundlerURL(sandpackO11yInstance);
   const { dispatch, getTabById } =
     useUserInterfaceCodingWorkspaceTilesContext();
 
@@ -90,10 +88,6 @@ export default function UserInterfaceCodingWorkspaceSolutionPreviewTab({
           }}
           theme={colorScheme === 'dark' ? 'dark' : undefined}>
           <UserInterfaceCodingWorkspacePreview />
-          <SandpackTimeout
-            instance={sandpackO11yInstance}
-            onTimeout={() => changeToFallbackUrl('timeout')}
-          />
           <SandpackObservability
             bundlerURL={bundlerURL}
             instance={sandpackO11yInstance}