feat: add route level error handling

app/package.json

@@ -21,6 +21,7 @@
     "polished": "^4.2.2",
     "react": "18.2",
     "react-dom": "18.2",
+    "react-error-boundary": "^4.0.3",
     "react-hook-form": "^7.43.8",
     "react-relay": "^14.1.0",
     "react-resizable-panels": "^0.0.36",
@@ -62,7 +63,7 @@
     "build:ts": "node ./esbuild.config.mjs",
     "build:relay": "relay-compiler",
     "watch": "./esbuild.config.mjs dev",
-    "dev": "npm run dev:server:mnist & npm run build:static && npm run watch",
+    "dev": "npm run dev:server:sentiment & npm run build:static && npm run watch",
     "dev:server:mnist": "python3 -m phoenix.server.main fixture fashion_mnist",
     "dev:server:mnist:single": "python3 -m phoenix.server.main fixture fashion_mnist --primary-only true",
     "dev:server:sentiment": "python3 -m phoenix.server.main fixture sentiment_classification_language_drift",

app/src/Routes.tsx

@@ -3,11 +3,22 @@ import { createRoutesFromElements, Route, RouterProvider } from "react-router";
 import { createBrowserRouter } from "react-router-dom";
 
 import { embeddingLoaderQuery$data } from "./pages/embedding/__generated__/embeddingLoaderQuery.graphql";
-import { Embedding, embeddingLoader, Home, Layout } from "./pages";
+import {
+  Embedding,
+  embeddingLoader,
+  ErrorElement,
+  Home,
+  Layout,
+} from "./pages";
 
 const router = createBrowserRouter(
   createRoutesFromElements(
-    <Route path="/" element={<Layout />} handle={{ crumb: () => "Home" }}>
+    <Route
+      path="/"
+      element={<Layout />}
+      handle={{ crumb: () => "Home" }}
+      errorElement={<ErrorElement />}
+    >
       <Route index element={<Home />} />
       <Route path="/embeddings">
         <Route

app/src/pages/ErrorElement.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import { useRouteError } from "react-router";
+import { css } from "@emotion/react";
+
+import { Button } from "@arizeai/components";
+
+import { ExternalLink } from "@phoenix/components";
+
+export function ErrorElement() {
+  const error = useRouteError();
+  return (
+    <main
+      css={css`
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      `}
+    >
+      <section
+        css={css`
+          width: 500px;
+          /* Add spacing on the bottom so it gets pushed up */
+          margin-bottom: 500px;
+          display: flex;
+          flex-direction: column;
+        `}
+      >
+        <h1>Something went wrong</h1>
+        <p>
+          We strive to do our very best but 🐛 bugs happen. It would mean a lot
+          to us if you could file a an issue. If you feel comfortable, please
+          include the error details below in your issue. We will get back to you
+          as soon as we can.
+        </p>
+        <p
+          css={css`
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-end;
+            gap: var(--px-spacing-med);
+          `}
+        >
+          <span
+            css={css`
+              display: inline-flex;
+              flex-direction: row;
+              align-items: baseline;
+              gap: 0.2em;
+            `}
+          >
+            💙 the
+            <ExternalLink href="mailto:phoenix-devs@arize.com">
+              phoenix team
+            </ExternalLink>
+          </span>
+        </p>
+        <div
+          css={css`
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-end;
+            align-items: center;
+            gap: var(--px-spacing-med);
+          `}
+        >
+          <ExternalLink href="https://github.com/Arize-ai/phoenix/issues/new?assignees=&labels=bug&template=bug_report.md&title=%5BBUG%5D">
+            file an issue with us
+          </ExternalLink>
+
+          <Button
+            variant="primary"
+            size="compact"
+            onClick={() => {
+              window.location.href = "/";
+            }}
+          >
+            Return Home
+          </Button>
+        </div>
+        <details>
+          <summary>error details</summary>
+          <pre
+            css={css`
+              white-space: pre-wrap;
+              overflow-wrap: break-word;
+              overflow: hidden;
+              overflow-y: auto;
+              max-height: 500px;
+            `}
+          >
+            {error instanceof Error ? error.message : null}
+          </pre>
+        </details>
+      </section>
+    </main>
+  );
+}

app/src/pages/index.tsx

@@ -1,3 +1,4 @@
 export * from "./home";
 export * from "./embedding";
 export * from "./Layout";
+export * from "./ErrorElement";