Add custom error page (#1181)

## Description

<!-- Please provide a brief description of the changes made in this pull request. Include any relevant context or reasoning for the changes. -->

Adds a page for **uncaught errors**, allowing users to refresh or go home. This replaces the default we've had since the start of the app.

## Related Issue and Pull requests

<!-- Link to any related issues using the format #<issue-number> -->

## Type of Change

<!-- Please delete options that are not relevant -->

- [x] Improvement

## Checklist

<!-- Please ensure the following are completed before submitting the PR -->

- [ ] I have tested this does not break current pipelines / runs functionality
- [ ] I have tested the changes on staging

## Screenshots (if applicable)

<!-- Include any screenshots that might help explain the changes or provide visual context -->

![image.png](https://app.graphite.dev/user-attachments/assets/c5fdf00d-33e9-4d39-a841-ce588fa048c1.png)

## Test Instructions

<!-- Detail steps and prerequisites for testing the changes in this PR -->

You can force an uncaught error (e.g. a missing provider)

## Additional Comments

<!-- Add any additional context or information that reviewers might need to know regarding this PR -->

Author: camielvs

src/components/ui/layout.tsx

@@ -32,6 +32,7 @@ const blockStackVariants = cva("flex flex-col w-full", {
       "2": "gap-2",
       "3": "gap-3",
       "4": "gap-4",
+      "8": "gap-8",
     },
   },
 });

src/components/ui/typography.tsx

@@ -36,6 +36,8 @@ const textVariants = cva("", {
       sm: "text-sm",
       md: "text-md",
       lg: "text-lg",
+      xl: "text-xl",
+      "2xl": "text-2xl",
     },
     weight: {
       regular: "font-regular",

src/routes/ErrorPage.tsx

@@ -0,0 +1,61 @@
+import { useRouter } from "@tanstack/react-router";
+import { type ErrorComponentProps } from "@tanstack/react-router";
+import { useCallback } from "react";
+
+import { InfoBox } from "@/components/shared/InfoBox";
+import { Button } from "@/components/ui/button";
+import { BlockStack } from "@/components/ui/layout";
+import { Paragraph, Text } from "@/components/ui/typography";
+
+export default function ErrorPage({ error, reset }: ErrorComponentProps) {
+  const router = useRouter();
+
+  const handleRefresh = useCallback(() => {
+    if (reset) {
+      reset();
+    } else {
+      window.location.reload();
+    }
+  }, [reset]);
+
+  const handleGoHome = useCallback(() => {
+    router.navigate({ to: "/" });
+  }, [router]);
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background p-4">
+      <div className="max-w-xs w-full">
+        <BlockStack gap="8" align="center">
+          <BlockStack gap="2" align="center">
+            <Text size="2xl" weight="bold">
+              Something went wrong
+            </Text>
+            <Paragraph tone="subdued" size="sm">
+              An unexpected error occurred.
+            </Paragraph>
+          </BlockStack>
+
+          <InfoBox title="Error Details" variant="error">
+            <Paragraph font="mono" size="xs">
+              {error?.message || "An unexpected error occurred"}
+            </Paragraph>
+          </InfoBox>
+
+          <BlockStack gap="3">
+            <Button onClick={handleRefresh} className="w-full">
+              Try Again
+            </Button>
+
+            <Button
+              onClick={handleGoHome}
+              variant="secondary"
+              className="w-full"
+            >
+              Go Home
+            </Button>
+          </BlockStack>
+        </BlockStack>
+      </div>
+    </div>
+  );
+}

src/routes/router.ts

@@ -11,6 +11,7 @@ import { BASE_URL, IS_GITHUB_PAGES } from "@/utils/constants";
 
 import RootLayout from "../components/layout/RootLayout";
 import Editor from "./Editor";
+import ErrorPage from "./ErrorPage";
 import Home from "./Home";
 import PipelineRun from "./PipelineRun";
 import { QuickStartPage } from "./QuickStart";
@@ -35,6 +36,7 @@ export const APP_ROUTES = {
 
 const rootRoute = createRootRoute({
   component: Outlet,
+  errorComponent: ErrorPage,
 });
 
 const mainLayout = createRoute({