Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

wrap core component in error boundary

This commit is contained in:
Nate Kelley 2025-09-22 19:40:10 -06:00
parent 18a1c15412
commit daf8b3a674
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
5 changed files with 43 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
apps/web/src/components/ui/charts/BusterChartDynamic.tsx
View File

@ -1,5 +1,6 @@
import { ClientOnly } from '@tanstack/react-router';
import { lazy, Suspense } from 'react';
import { LazyErrorBoundary } from '@/components/features/global/LazyErrorBoundary';
import { PreparingYourRequestLoader } from './LoadingComponents/ChartLoadingComponents';
const BusterChartLazy = lazy(() =>
@ -7,9 +8,11 @@ const BusterChartLazy = lazy(() =>
);
export const BusterChartDynamic = (props: Parameters<typeof BusterChartLazy>[0]) => (
<Suspense fallback={<PreparingYourRequestLoader text="Loading chart..." />}>
<ClientOnly>
<BusterChartLazy {...props} />
</ClientOnly>
</Suspense>
<LazyErrorBoundary>
<Suspense fallback={<PreparingYourRequestLoader text="Loading chart..." />}>
<ClientOnly>
<BusterChartLazy {...props} />
</ClientOnly>
</Suspense>
</LazyErrorBoundary>
);

37
apps/web/src/components/ui/inputs/AppCodeEditor/AppCodeEditor.tsx
View File

@ -5,6 +5,7 @@ import type { EditorProps, OnMount } from '@monaco-editor/react';
import { ClientOnly } from '@tanstack/react-router';
import type React from 'react';
import { forwardRef, lazy, Suspense, useCallback, useMemo } from 'react';
import { LazyErrorBoundary } from '@/components/features/global/LazyErrorBoundary';
import { useMount } from '@/hooks/useMount';
import { cn } from '@/lib/utils';
import { isServer } from '@/lib/window';
@ -178,23 +179,25 @@ export const AppCodeEditor = forwardRef<AppCodeEditorHandle, AppCodeEditorProps>
)}
style={style}
>
<ClientOnly fallback={<LoadingCodeEditor />}>
<Suspense fallback={<LoadingCodeEditor />}>
<Editor
key={useDarkMode ? 'dark' : 'light'}
height={height}
language={language}
className={className}
defaultValue={defaultValue}
value={value}
theme={useDarkMode ? 'night-owl' : 'github-light'}
onMount={onMountCodeEditor}
onChange={onChangeCodeEditor}
options={memoizedMonacoEditorOptions}
loading={null}
/>
</Suspense>
</ClientOnly>
<LazyErrorBoundary>
<ClientOnly fallback={<LoadingCodeEditor />}>
<Suspense fallback={<LoadingCodeEditor />}>
<Editor
key={useDarkMode ? 'dark' : 'light'}
height={height}
language={language}
className={className}
defaultValue={defaultValue}
value={value}
theme={useDarkMode ? 'night-owl' : 'github-light'}
onMount={onMountCodeEditor}
onChange={onChangeCodeEditor}
options={memoizedMonacoEditorOptions}
loading={null}
/>
</Suspense>
</ClientOnly>
</LazyErrorBoundary>
</div>
);
}

13
apps/web/src/components/ui/inputs/AppCodeEditor/AppCodeEditorDynamic.tsx
View File

@ -1,5 +1,6 @@
import { ClientOnly } from '@tanstack/react-router';
import { lazy, Suspense } from 'react';
import { LazyErrorBoundary } from '@/components/features/global/LazyErrorBoundary';
import type { AppCodeEditorProps } from './AppCodeEditor';
import { LoadingCodeEditor } from './LoadingCodeEditor';
@ -13,10 +14,12 @@ const AppCodeEditor = lazy(() =>
export const AppCodeEditorDynamic = (props: AppCodeEditorProps) => {
return (
<ClientOnly fallback={<LoadingCodeEditor />}>
<Suspense fallback={<LoadingCodeEditor />}>
<AppCodeEditor {...props} />
</Suspense>
</ClientOnly>
<LazyErrorBoundary>
<ClientOnly fallback={<LoadingCodeEditor />}>
<Suspense fallback={<LoadingCodeEditor />}>
<AppCodeEditor {...props} />
</Suspense>
</ClientOnly>
</LazyErrorBoundary>
);
};

9
apps/web/src/components/ui/report/DynamicReportEditor.tsx
View File

@ -1,4 +1,5 @@
import { lazy, Suspense } from 'react';
import { LazyErrorBoundary } from '@/components/features/global/LazyErrorBoundary';
import { type UsePageReadyOptions, usePageReady } from '@/hooks/usePageReady';
import type { ReportEditorProps } from './ReportEditor';
import { ReportEditorSkeleton } from './ReportEditorSkeleton';
@ -31,9 +32,11 @@ export const DynamicReportEditor = ({ loadingOptions, ...props }: DynamicReportE
}
return (
<Suspense fallback={<ReportEditorSkeleton />}>
<DynamicReportEditorBase {...props} />
</Suspense>
<LazyErrorBoundary>
<Suspense fallback={<ReportEditorSkeleton />}>
<DynamicReportEditorBase {...props} />
</Suspense>
</LazyErrorBoundary>
);
};

2
apps/web/src/context/AppVersion/useAppVersion.tsx
View File

@ -24,7 +24,7 @@ export const useAppVersion = () => {
useWindowFocus(() => {
refetch().then(() => {
if (isChanged) {
// reloadWindow();
reloadWindow();
}
});
});