refactor: add error components at page level

app/routes/(auth)/download-recovery-key.tsx

@@ -3,6 +3,7 @@ import { DownloadRecoveryKeyPage } from "~/client/modules/auth/routes/download-r
 
 export const Route = createFileRoute("/(auth)/download-recovery-key")({
 	component: DownloadRecoveryKeyPage,
+	errorComponent: () => <div>Failed to load recovery key</div>,
 	head: () => ({
 		meta: [
 			{ title: "Zerobyte - Download Recovery Key" },

app/routes/(auth)/login.error.tsx

@@ -4,6 +4,7 @@ import { LoginPage } from "~/client/modules/auth/routes/login";
 
 export const Route = createFileRoute("/(auth)/login/error")({
 	component: RouteComponent,
+	errorComponent: () => <div>Failed to load login error</div>,
 	validateSearch: type({ error: "string?" }),
 	head: () => ({
 		meta: [

app/routes/(auth)/login.tsx

@@ -4,6 +4,7 @@ import { LoginPage } from "~/client/modules/auth/routes/login";
 
 export const Route = createFileRoute("/(auth)/login")({
 	component: RouteComponent,
+	errorComponent: () => <div>Failed to load login</div>,
 	validateSearch: type({ error: "string?" }),
 	head: () => ({
 		meta: [

app/routes/(auth)/onboarding.tsx

@@ -3,6 +3,7 @@ import { OnboardingPage } from "~/client/modules/auth/routes/onboarding";
 
 export const Route = createFileRoute("/(auth)/onboarding")({
 	component: OnboardingPage,
+	errorComponent: () => <div>Failed to load onboarding</div>,
 	head: () => ({
 		meta: [
 			{ title: "Zerobyte - Onboarding" },

app/routes/(auth)/route.tsx

@@ -3,6 +3,7 @@ import { authMiddleware } from "~/middleware/auth";
 
 export const Route = createFileRoute("/(auth)")({
 	component: () => <Outlet />,
+	errorComponent: () => <div>Failed to load auth</div>,
 	server: {
 		middleware: [authMiddleware],
 	},

app/routes/(dashboard)/admin/index.tsx

@@ -8,6 +8,7 @@ import { getAdminUsersOptions, getRegistrationStatusOptions } from "~/client/api
 export const Route = createFileRoute("/(dashboard)/admin/")({
 	validateSearch: type({ tab: "string?" }),
 	component: RouteComponent,
+	errorComponent: () => <div>Failed to load admin</div>,
 	loader: async ({ context }) => {
 		const authContext = await fetchUser();
 

app/routes/(dashboard)/backups/$backupId/$snapshotId.restore.tsx

@@ -6,6 +6,7 @@ import { getVolumeMountPath } from "~/client/lib/volume-path";
 
 export const Route = createFileRoute("/(dashboard)/backups/$backupId/$snapshotId/restore")({
 	component: RouteComponent,
+	errorComponent: () => <div>Failed to load restore</div>,
 	loader: async ({ params, context }) => {
 		const schedule = await getBackupSchedule({ path: { shortId: params.backupId } });
 

app/routes/(dashboard)/backups/$backupId/index.tsx

@@ -13,6 +13,7 @@ import { prefetchOrSkip } from "~/utils/prefetch";
 
 export const Route = createFileRoute("/(dashboard)/backups/$backupId/")({
 	component: RouteComponent,
+	errorComponent: () => <div>Failed to load backup</div>,
 	validateSearch: type({ snapshot: "string?" }),
 	loader: async ({ params, context }) => {
 		const { backupId } = params;

app/routes/(dashboard)/backups/create.tsx

@@ -3,6 +3,7 @@ import { listRepositoriesOptions, listVolumesOptions } from "~/client/api-client
 import { CreateBackupPage } from "~/client/modules/backups/routes/create-backup";
 
 export const Route = createFileRoute("/(dashboard)/backups/create")({
+	errorComponent: () => <div>Failed to load backup creation</div>,
 	loader: async ({ context }) => {
 		await Promise.all([
 			context.queryClient.ensureQueryData({ ...listVolumesOptions() }),

app/routes/(dashboard)/backups/index.tsx

@@ -4,6 +4,7 @@ import { BackupsPage } from "~/client/modules/backups/routes/backups";
 
 export const Route = createFileRoute("/(dashboard)/backups/")({
 	component: RouteComponent,
+	errorComponent: () => <div>Failed to load backups</div>,
 	loader: async ({ context }) => {
 		await context.queryClient.ensureQueryData({
 			...listBackupSchedulesOptions(),

app/routes/(dashboard)/notifications/$notificationId.tsx

@@ -4,6 +4,7 @@ import { NotificationDetailsPage } from "~/client/modules/notifications/routes/n
 
 export const Route = createFileRoute("/(dashboard)/notifications/$notificationId")({
 	component: RouteComponent,
+	errorComponent: () => <div>Failed to load notification</div>,
 	loader: async ({ params, context }) => {
 		const res = await context.queryClient.ensureQueryData({
 			...getNotificationDestinationOptions({ path: { id: params.notificationId } }),

app/routes/(dashboard)/notifications/create.tsx

@@ -3,11 +3,9 @@ import { CreateNotificationPage } from "~/client/modules/notifications/routes/cr
 
 export const Route = createFileRoute("/(dashboard)/notifications/create")({
 	component: RouteComponent,
+	errorComponent: () => <div>Failed to load notification creation</div>,
 	staticData: {
-		breadcrumb: () => [
-			{ label: "Notifications", href: "/notifications" },
-			{ label: "Create" },
-		],
+		breadcrumb: () => [{ label: "Notifications", href: "/notifications" }, { label: "Create" }],
 	},
 	head: () => ({
 		meta: [

app/routes/(dashboard)/notifications/index.tsx

@@ -4,6 +4,7 @@ import { NotificationsPage } from "~/client/modules/notifications/routes/notific
 
 export const Route = createFileRoute("/(dashboard)/notifications/")({
 	component: RouteComponent,
+	errorComponent: () => <div>Failed to load notifications</div>,
 	loader: async ({ context }) => {
 		await context.queryClient.ensureQueryData({ ...listNotificationDestinationsOptions() });
 	},

app/routes/(dashboard)/repositories/create.tsx

@@ -3,11 +3,9 @@ import { CreateRepositoryPage } from "~/client/modules/repositories/routes/creat
 
 export const Route = createFileRoute("/(dashboard)/repositories/create")({
 	component: RouteComponent,
+	errorComponent: () => <div>Failed to load repository creation</div>,
 	staticData: {
-		breadcrumb: () => [
-			{ label: "Repositories", href: "/repositories" },
-			{ label: "Create" },
-		],
+		breadcrumb: () => [{ label: "Repositories", href: "/repositories" }, { label: "Create" }],
 	},
 	head: () => ({
 		meta: [

app/routes/(dashboard)/settings/index.tsx

@@ -10,6 +10,7 @@ import { getOrganizationContext } from "~/server/lib/functions/organization-cont
 export const Route = createFileRoute("/(dashboard)/settings/")({
 	component: RouteComponent,
 	validateSearch: type({ tab: "string?" }),
+	errorComponent: () => <div>Failed to load settings</div>,
 	loader: async ({ context }) => {
 		const authContext = await fetchUser();
 		const orgContext = await getOrganizationContext();

app/routes/(dashboard)/settings/sso/new.tsx

@@ -4,6 +4,7 @@ import { getOrganizationContext } from "~/server/lib/functions/organization-cont
 
 export const Route = createFileRoute("/(dashboard)/settings/sso/new")({
 	component: RouteComponent,
+	errorComponent: () => <div>Failed to load SSO registration</div>,
 	loader: async () => {
 		const orgContext = await getOrganizationContext();
 		const role = orgContext.activeMember?.role;

app/routes/(dashboard)/volumes/create.tsx

@@ -3,6 +3,7 @@ import { CreateVolumePage } from "~/client/modules/volumes/routes/create-volume"
 
 export const Route = createFileRoute("/(dashboard)/volumes/create")({
 	component: RouteComponent,
+	errorComponent: () => <div>Failed to load volume creation</div>,
 	staticData: {
 		breadcrumb: () => [{ label: "Volumes", href: "/volumes" }, { label: "Create" }],
 	},

app/routes/index.tsx

@@ -10,6 +10,7 @@ export const Route = createFileRoute("/")({
 			},
 		],
 	}),
+	errorComponent: () => <div>Failed to load page</div>,
 	beforeLoad: () => {
 		throw redirect({ to: "/volumes" });
 	},