fix: 403 breaking ux (#3081)

jog1t · jog1t · commit 6665121c9244 · 2025-10-07T21:07:01.000Z
diff --git a/frontend/package.json b/frontend/package.json
@@ -58,7 +58,7 @@
 		"@radix-ui/react-toggle-group": "^1.1.11",
 		"@radix-ui/react-tooltip": "^1.2.8",
 		"@radix-ui/react-visually-hidden": "^1.2.3",
-		"@rivet-gg/cloud": "https://pkg.pr.new/rivet-dev/cloud/@rivet-gg/cloud@7090780",
+		"@rivet-gg/cloud": "https://pkg.pr.new/rivet-dev/cloud/@rivet-gg/cloud@bf2ebb2",
 		"@rivet-gg/icons": "workspace:*",
 		"@rivetkit/engine-api-full": "workspace:*",
 		"@sentry/react": "^8.55.0",
diff --git a/frontend/src/app/data-providers/engine-data-provider.tsx b/frontend/src/app/data-providers/engine-data-provider.tsx
@@ -78,6 +78,11 @@ export const createGlobalContext = (opts: {
 					return lastPage.pagination.cursor;
 				},
 				select: (data) => data.pages.flatMap((page) => page.namespaces),
+				retry: shouldRetryAllExpect403,
+				throwOnError: noThrow,
+				meta: {
+					mightRequireAuth,
+				},
 			});
 		},
 		createNamespaceMutationOptions(opts: {
diff --git a/frontend/src/app/inspector-root.tsx b/frontend/src/app/inspector-root.tsx
@@ -1,5 +1,5 @@
 import {
-	Route,
+	CatchBoundary,
 	useNavigate,
 	useRouteContext,
 	useSearch,
@@ -50,7 +50,14 @@ export function InspectorRoot() {
 			<InspectorCredentialsProvider value={ctxValue}>
 				<RouteLayout>
 					<Actors actorId={search.actorId} />
-					{!search.n ? <BuildPrefiller /> : null}
+					<CatchBoundary
+						getResetKey={() =>
+							search.n?.join(",") ?? "no-build-name"
+						}
+						errorComponent={() => null}
+					>
+						{!search.n ? <BuildPrefiller /> : null}
+					</CatchBoundary>
 				</RouteLayout>
 			</InspectorCredentialsProvider>
 		);
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -41,7 +41,10 @@ import {
 	ScrollArea,
 	Skeleton,
 } from "@/components";
-import { useInspectorDataProvider } from "@/components/actors";
+import {
+	useDataProviderCheck,
+	useInspectorDataProvider,
+} from "@/components/actors";
 import type { HeaderLinkProps } from "@/components/header/header-link";
 import { ensureTrailingSlash } from "@/lib/utils";
 import { ActorBuildsList } from "./actor-builds-list";
@@ -388,6 +391,7 @@ const Subnav = () => {
 				}
 			: { to: "/", fuzzy: true },
 	);
+	const hasDataProvider = useDataProviderCheck();
 
 	if (nsMatch === false) {
 		return null;
@@ -405,12 +409,14 @@ const Subnav = () => {
 					Connect
 				</HeaderLink>
 			) : null}
-			<div className="w-full">
-				<span className="block text-muted-foreground text-xs px-2 py-1 transition-colors mb-0.5">
-					Instances
-				</span>
-				<ActorBuildsList />
-			</div>
+			{hasDataProvider ? (
+				<div className="w-full">
+					<span className="block text-muted-foreground text-xs px-2 py-1 transition-colors mb-0.5">
+						Instances
+					</span>
+					<ActorBuildsList />
+				</div>
+			) : null}
 		</div>
 	);
 };
@@ -535,6 +541,8 @@ function CloudSidebarContent() {
 		fuzzy: true,
 	});
 
+	const hasDataProvider = useDataProviderCheck();
+
 	if (matchNamespace) {
 		return (
 			<div className="flex gap-1.5 flex-col">
@@ -546,12 +554,14 @@ function CloudSidebarContent() {
 				>
 					Connect
 				</HeaderLink>
-				<div className="w-full pt-1.5">
-					<span className="block text-muted-foreground text-xs px-1 py-1 transition-colors mb-0.5">
-						Instances
-					</span>
-					<ActorBuildsList />
-				</div>
+				{hasDataProvider ? (
+					<div className="w-full pt-1.5">
+						<span className="block text-muted-foreground text-xs px-1 py-1 transition-colors mb-0.5">
+							Instances
+						</span>
+						<ActorBuildsList />
+					</div>
+				) : null}
 			</div>
 		);
 	}
diff --git a/frontend/src/components/actors/data-provider.tsx b/frontend/src/components/actors/data-provider.tsx
@@ -1,6 +1,8 @@
 import {
 	type RegisteredRouter,
 	type RouteIds,
+	useMatches,
+	useMatchRoute,
 	useRouteContext,
 } from "@tanstack/react-router";
 import { match } from "ts-pattern";
@@ -34,6 +36,26 @@ export const useDataProvider = () =>
 		})
 		.exhaustive();
 
+export const useDataProviderCheck = () => {
+	const matchRoute = useMatchRoute();
+
+	return matchRoute({
+		to: match(__APP_TYPE__)
+			.with("cloud", () => {
+				return "/orgs/$organization/projects/$project/ns/$namespace" as const;
+			})
+			.with("engine", () => {
+				return "/ns/$namespace" as const;
+			})
+			.with("inspector", () => {
+				return "/" as const;
+			})
+			.otherwise(() => {
+				throw new Error("Not in a valid context");
+			}),
+	});
+};
+
 export const useEngineDataProvider = () => {
 	return useRouteContext({
 		from: "/_context/_engine",
diff --git a/frontend/src/components/hooks/use-dialog.tsx b/frontend/src/components/hooks/use-dialog.tsx
@@ -46,9 +46,24 @@ export const createDialogHook = <
 
 		return (
 			<IsInModalContext.Provider value={true}>
-				<Dialog {...dialogProps}>
+				<Dialog
+					{...dialogProps}
+					onOpenChange={
+						props.dismissible
+							? () => {}
+							: props.dialogProps?.onOpenChange
+					}
+				>
 					<DialogContent
 						{...dialogContentProps}
+						hideClose={
+							props.dismissible === false ||
+							dialogContentProps?.hideClose
+						}
+						disableOutsidePointerEvents={
+							props.dismissible === false ||
+							dialogContentProps?.disableOutsidePointerEvents
+						}
 						onOpenAutoFocus={(e) => {
 							if (opts.autoFocus === false) {
 								return e.preventDefault();
diff --git a/frontend/src/components/modal-renderer.tsx b/frontend/src/components/modal-renderer.tsx
@@ -34,7 +34,7 @@ export function ModalRenderer() {
 
 function getDialogComponent(dialogKey: string) {
 	const dialogs = useDialog;
-	const dialog = dialogs[dialogKey];
+	const dialog = dialogs[dialogKey as keyof typeof dialogs];
 
 	if (!dialog || typeof dialog !== "function") {
 		return null;
diff --git a/frontend/src/queries/global.ts b/frontend/src/queries/global.ts
@@ -15,7 +15,7 @@ const queryCache = new QueryCache({
 			"statusCode" in error &&
 			error.statusCode === 403
 		) {
-			modal.open("ProvideEngineCredentials");
+			modal.open("ProvideEngineCredentials", { dismissible: false });
 			return;
 		}
 	},
diff --git a/frontend/src/routes/_context.tsx b/frontend/src/routes/_context.tsx
@@ -43,7 +43,7 @@ export const Route = createFileRoute("/_context")({
 		return match(__APP_TYPE__)
 			.with("engine", () => ({
 				dataProvider: createGlobalEngineContext({
-					engineToken:
+					engineToken: () =>
 						ls.engineCredentials.get(getConfig().apiUrl) || "",
 				}),
 				__type: "engine" as const,
diff --git a/frontend/src/routes/_context/_cloud/orgs.$organization/projects.$project/ns.$namespace/index.tsx b/frontend/src/routes/_context/_cloud/orgs.$organization/projects.$project/ns.$namespace/index.tsx
@@ -45,7 +45,12 @@ export function RouteComponent() {
 		<>
 			<CatchBoundary getResetKey={() => actorId ?? "no-actor-id"}>
 				<Actors actorId={actorId} />
-				{!n ? <BuildPrefiller /> : null}
+				<CatchBoundary
+					getResetKey={() => n?.join(",") ?? "no-build-name"}
+					errorComponent={() => null}
+				>
+					{!n ? <BuildPrefiller /> : null}
+				</CatchBoundary>
 			</CatchBoundary>
 		</>
 	);
diff --git a/frontend/src/routes/_context/_engine/ns.$namespace/index.tsx b/frontend/src/routes/_context/_engine/ns.$namespace/index.tsx
@@ -1,4 +1,8 @@
-import { createFileRoute, useSearch } from "@tanstack/react-router";
+import {
+	CatchBoundary,
+	createFileRoute,
+	useSearch,
+} from "@tanstack/react-router";
 import { Actors } from "@/app/actors";
 import { BuildPrefiller } from "@/app/build-prefiller";
 
@@ -12,7 +16,13 @@ export function RouteComponent() {
 	return (
 		<>
 			<Actors actorId={actorId} />
-			{!n ? <BuildPrefiller /> : null}
+
+			<CatchBoundary
+				getResetKey={() => n?.join(",") ?? "no-build-name"}
+				errorComponent={() => null}
+			>
+				{!n ? <BuildPrefiller /> : null}
+			</CatchBoundary>
 		</>
 	);
 }
diff --git a/frontend/src/routes/_context/index.tsx b/frontend/src/routes/_context/index.tsx
@@ -1,4 +1,4 @@
-import { createFileRoute, redirect } from "@tanstack/react-router";
+import { createFileRoute, isRedirect, redirect } from "@tanstack/react-router";
 import { match } from "ts-pattern";
 import CreateNamespacesFrameContent from "@/app/dialogs/create-namespace-frame";
 import { InspectorRoot } from "@/app/inspector-root";
@@ -27,17 +27,27 @@ export const Route = createFileRoute("/_context/")({
 				});
 			})
 			.with({ __type: "engine" }, async (ctx) => {
-				const result = await ctx.queryClient.fetchInfiniteQuery(
-					ctx.dataProvider.namespacesQueryOptions(),
-				);
-				const firstNamespace = result.pages[0]?.namespaces[0];
-				if (!firstNamespace) {
+				try {
+					const result = await ctx.queryClient.fetchInfiniteQuery(
+						ctx.dataProvider.namespacesQueryOptions(),
+					);
+
+					const firstNamespace = result.pages[0]?.namespaces[0];
+					if (!firstNamespace) {
+						return;
+					}
+					throw redirect({
+						to: "/ns/$namespace",
+						params: { namespace: firstNamespace.name },
+					});
+				} catch (e) {
+					if (isRedirect(e)) {
+						throw e;
+					}
+
+					// Ignore errors here, they will be handled in the UI
 					return;
 				}
-				throw redirect({
-					to: "/ns/$namespace",
-					params: { namespace: firstNamespace.name },
-				});
 			})
 			.with({ __type: "inspector" }, async (ctx) => {
 				if (!search.t || !search.u) {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ const queryCache = new QueryCache({`
`15`	`15`	`"statusCode" in error &&`
`16`	`16`	`error.statusCode === 403`
`17`	`17`	`) {`
`18`		`- modal.open("ProvideEngineCredentials");`
	`18`	`+ modal.open("ProvideEngineCredentials", { dismissible: false });`
`19`	`19`	`return;`
`20`	`20`	`}`
`21`	`21`	`},`