fix: AsyncBoundary

src/components/AsyncBoundary.tsx

@@ -0,0 +1,27 @@
+import { PropsWithChildren, Suspense, type ComponentProps } from 'react';
+import { ErrorBoundary, type FallbackProps } from 'react-error-boundary';
+
+type ErrorBoundaryProps = ComponentProps<typeof ErrorBoundary>;
+
+interface AsyncBoundaryProps extends Omit<ErrorBoundaryProps, 'fallbackRender'> {
+  pendingFallback: ComponentProps<typeof Suspense>['fallback'];
+  rejectedFallback: ErrorBoundaryProps['fallbackRender'];
+}
+
+const Substitute = ({ error }: FallbackProps) => {
+  return <>{error.message}</>;
+};
+
+const AsyncBoundary = ({
+  pendingFallback,
+  rejectedFallback,
+  children,
+}: PropsWithChildren<AsyncBoundaryProps>) => {
+  return (
+    <ErrorBoundary fallbackRender={rejectedFallback || Substitute}>
+      <Suspense fallback={pendingFallback}>{children}</Suspense>
+    </ErrorBoundary>
+  );
+};
+
+export default AsyncBoundary;

src/main.tsx

@@ -9,6 +9,8 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import { ReactQueryDevtools } from 'react-query/devtools';
 import { RecoilRoot } from 'recoil';
 import App from './App';
+import AsyncBoundary from 'components/AsyncBoundary';
+import { BadGateway } from 'pages';
 initialize('G-KG7KQ8K3GP');
 
 export const queryClient = new QueryClient({
@@ -27,11 +29,13 @@ axios.defaults.withCredentials = true;
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <RecoilRoot>
-        <App />
-        <ReactQueryDevtools />
-      </RecoilRoot>
-    </QueryClientProvider>
+    <AsyncBoundary pendingFallback={<></>} rejectedFallback={() => <BadGateway />}>
+      <QueryClientProvider client={queryClient}>
+        <RecoilRoot>
+          <App />
+          <ReactQueryDevtools />
+        </RecoilRoot>
+      </QueryClientProvider>
+    </AsyncBoundary>
   </React.StrictMode>
 );