mirror
/
front-end-interview-handbook
mirror of https://github.com/yangshun/front-end-interview-handbook.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[web] workspace/sandpack: also switch bundler URL when timeout

This commit is contained in:
Yangshun 2025-07-22 14:17:17 +08:00
parent 13ab5faf1a
commit 29e3419214
8 changed files with 82 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/web/src/components/projects/challenges/solutions/ProjectsChallengeSolutionSection.tsx
View File

@ -8,6 +8,7 @@ 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';
@ -20,7 +21,8 @@ const sandpackO11yInstance = 'projects.challenge_solution';
export default function ProjectsChallengeSolutionSection({ solution }: Props) {
const { colorScheme } = useColorSchemePreferences();
const bundlerURL = useSandpackBundlerURL(sandpackO11yInstance);
const [bundlerURL, changeToFallbackUrl] =
useSandpackBundlerURL(sandpackO11yInstance);
const { files, workspace } = solution;
return (
@ -49,6 +51,10 @@ export default function ProjectsChallengeSolutionSection({ solution }: Props) {
activeTabScrollIntoView={true}
defaultFiles={files}
/>
<SandpackTimeout
instance={sandpackO11yInstance}
onTimeout={changeToFallbackUrl}
/>
<SandpackObservability
bundlerURL={bundlerURL}
instance={sandpackO11yInstance}

12
apps/web/src/components/workspace/common/sandpack/SandpackObservability.tsx
View File

@ -73,20 +73,8 @@ 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;

29
apps/web/src/components/workspace/common/sandpack/SandpackTimeout.ts Normal file
View File

@ -0,0 +1,29 @@
import { useSandpack } from '@codesandbox/sandpack-react';
import { useEffect, useRef } from 'react';
import logEvent from '~/logging/logEvent';
type Props = Readonly<{
instance: string;
onTimeout: (instance: string) => void;
}>;
export function SandpackTimeout({ instance, onTimeout }: Props) {
const timeoutSentRef = useRef(false);
const { sandpack } = useSandpack();
const { status: sandpackStatus } = sandpack;
useEffect(() => {
if (sandpackStatus === 'timeout' && !timeoutSentRef.current) {
onTimeout(instance);
logEvent('sandpack.timeout', {
instance,
namespace: 'workspace',
});
timeoutSentRef.current = true;
}
}, [instance, sandpackStatus, onTimeout]);
return null;
}

19
apps/web/src/components/workspace/common/sandpack/useSandpackBundlerURL.ts
View File

@ -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): string {
export function useSandpackBundlerURL(instance: string) {
const [url, setUrl] = useGreatStorageLocal(
'workspace:bundler-url', // Change the key if you want to reset the URL in local storage
defaultBundlerURL,
@ -17,6 +17,20 @@ export function useSandpackBundlerURL(instance: string): string {
},
);
const changeToFallbackUrl = useCallback(
(reason: string) => {
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());
@ -33,6 +47,7 @@ export function useSandpackBundlerURL(instance: string): string {
instance,
namespace: 'workspace',
online: navigator.onLine,
reason: 'blocked',
stack: error instanceof Error ? error.stack : null,
url,
});
@ -68,5 +83,5 @@ export function useSandpackBundlerURL(instance: string): string {
pingBundlerURL();
}, [url, pingBundlerURL]);
return url;
return [url, changeToFallbackUrl] as const;
}

8
apps/web/src/components/workspace/javascript/JavaScriptCodingWorkspaceSection.tsx
View File

@ -8,6 +8,7 @@ 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';
@ -38,7 +39,8 @@ export default function JavaScriptCodingWorkspaceSection({
studyListKey,
}: Props) {
const { colorScheme } = useColorSchemePreferences();
const bundlerURL = useSandpackBundlerURL(sandpackO11yInstance);
const [bundlerURL, changeToFallbackUrl] =
useSandpackBundlerURL(sandpackO11yInstance);
const { files, skeleton, workspace } = question;
const loadedCode = loadLocalJavaScriptQuestionCode(
@ -98,6 +100,10 @@ export default function JavaScriptCodingWorkspaceSection({
workspace={workspace}
onLanguageChange={onLanguageChange}
/>
<SandpackTimeout
instance={sandpackO11yInstance}
onTimeout={changeToFallbackUrl}
/>
<SandpackObservability
bundlerURL={bundlerURL}
instance={sandpackO11yInstance}

10
apps/web/src/components/workspace/user-interface/UserInterfaceCodingWorkspaceSavesPage.tsx
View File

@ -15,11 +15,12 @@ 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';
@ -44,7 +45,8 @@ export default function UserInterfaceCodingWorkspaceSavesPage({
}: Props) {
const router = useI18nRouter();
const { colorScheme } = useColorSchemePreferences();
const bundlerURL = useSandpackBundlerURL(sandpackO11yInstance);
const [bundlerURL, changeToFallbackUrl] =
useSandpackBundlerURL(sandpackO11yInstance);
const { metadata, skeletonBundle } = question;
const { files: defaultFiles, workspace } = skeletonBundle;
@ -106,6 +108,10 @@ export default function UserInterfaceCodingWorkspaceSavesPage({
);
}}
/>
<SandpackTimeout
instance={sandpackO11yInstance}
onTimeout={changeToFallbackUrl}
/>
<SandpackObservability
bundlerURL={bundlerURL}
instance={sandpackO11yInstance}

8
apps/web/src/components/workspace/user-interface/UserInterfaceCodingWorkspaceSection.tsx
View File

@ -9,6 +9,7 @@ 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';
@ -44,7 +45,8 @@ export default function UserInterfaceCodingWorkspaceSection({
studyListKey,
}: Props) {
const { colorScheme } = useColorSchemePreferences();
const bundlerURL = useSandpackBundlerURL(sandpackO11yInstance);
const [bundlerURL, changeToFallbackUrl] =
useSandpackBundlerURL(sandpackO11yInstance);
const loadedFiles = loadLocalUserInterfaceQuestionCode(
question,
@ -105,6 +107,10 @@ export default function UserInterfaceCodingWorkspaceSection({
studyListKey={studyListKey}
onFrameworkChange={onFrameworkChange}
/>
<SandpackTimeout
instance={sandpackO11yInstance}
onTimeout={changeToFallbackUrl}
/>
<SandpackObservability
bundlerURL={bundlerURL}
instance={sandpackO11yInstance}

8
apps/web/src/components/workspace/user-interface/UserInterfaceCodingWorkspaceSolutionPreviewTab.tsx
View File

@ -9,6 +9,7 @@ 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';
@ -25,7 +26,8 @@ export default function UserInterfaceCodingWorkspaceSolutionPreviewTab({
}: Props) {
const intl = useIntl();
const { colorScheme } = useColorSchemePreferences();
const bundlerURL = useSandpackBundlerURL(sandpackO11yInstance);
const [bundlerURL, changeToFallbackUrl] =
useSandpackBundlerURL(sandpackO11yInstance);
const { dispatch, getTabById } =
useUserInterfaceCodingWorkspaceTilesContext();
@ -88,6 +90,10 @@ export default function UserInterfaceCodingWorkspaceSolutionPreviewTab({
}}
theme={colorScheme === 'dark' ? 'dark' : undefined}>
<UserInterfaceCodingWorkspacePreview />
<SandpackTimeout
instance={sandpackO11yInstance}
onTimeout={changeToFallbackUrl}
/>
<SandpackObservability
bundlerURL={bundlerURL}
instance={sandpackO11yInstance}