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: don't switch bundler URL when timeout

This commit is contained in:
Yangshun 2025-08-01 11:32:33 +08:00
parent ad3a01b02e
commit b0087fd52b
7 changed files with 20 additions and 52 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,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}

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

@ -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;

18
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) {
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;
}

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

@ -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}

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

@ -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}

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

@ -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}

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

@ -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}