feat: add error screen for network issues

rivet-gg · Jan 17, 2025 · 626d711 · 626d711
1 parent 07e50ec
commit 626d711
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/frontend/apps/hub/src/app.tsx b/frontend/apps/hub/src/app.tsx
@@ -9,8 +9,13 @@ import { PageLayout } from "@rivet-gg/components/layout";
 import * as Sentry from "@sentry/react";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
-import { RouterProvider, createRouter } from "@tanstack/react-router";
+import {
+	CatchBoundary,
+	RouterProvider,
+	createRouter,
+} from "@tanstack/react-router";
 import { Suspense } from "react";
+import { LayoutedErrorComponent } from "./components/error-component";
 import { ThirdPartyProviders } from "./components/third-party-providers";
 import { AuthProvider, useAuth } from "./domains/auth/contexts/auth";
 import { routeMasks } from "./lib/route-masks";
@@ -63,9 +68,14 @@ export function App({ cacheKey }: { cacheKey?: string }) {
 				<ThirdPartyProviders>
 					<Suspense fallback={<FullscreenLoading />}>
 						<TooltipProvider>
-							<AuthProvider>
-								<InnerApp />
-							</AuthProvider>
+							<CatchBoundary
+								getResetKey={() => ""}
+								errorComponent={LayoutedErrorComponent}
+							>
+								<AuthProvider>
+									<InnerApp />
+								</AuthProvider>
+							</CatchBoundary>
 						</TooltipProvider>
 					</Suspense>
 

diff --git a/frontend/apps/hub/src/components/error-component.tsx b/frontend/apps/hub/src/components/error-component.tsx
@@ -10,6 +10,7 @@ import {
 	Code,
 	Text,
 } from "@rivet-gg/components";
+import { PageLayout } from "@rivet-gg/components/layout";
 import { Icon, faBomb, faLock } from "@rivet-gg/icons";
 import * as Sentry from "@sentry/react";
 import {
@@ -18,6 +19,7 @@ import {
 } from "@tanstack/react-query";
 import { type ErrorComponentProps, useRouter } from "@tanstack/react-router";
 import { useEffect } from "react";
+import { NetworkIssueError } from "./network-issue-error";
 import { NotFoundComponent } from "./not-found-component";
 
 export const ErrorComponent = ({
@@ -72,6 +74,8 @@ export const ErrorComponent = ({
 		}
 	} else if (!error) {
 		return <NotFoundComponent />;
+	} else if ("statusCode" in error && "body" in error) {
+		return <NetworkIssueError />;
 	}
 
 	return (
@@ -106,3 +110,11 @@ export const ErrorComponent = ({
 		</Card>
 	);
 };
+
+export function LayoutedErrorComponent(props: ErrorComponentProps) {
+	return (
+		<PageLayout.Root>
+			<ErrorComponent {...props} />
+		</PageLayout.Root>
+	);
+}