From 562191d82274c6d94f7c75e187ca3b1ffbfb5e8d Mon Sep 17 00:00:00 2001
From: Mikyo King <mikyo@arize.com>
Date: Thu, 30 Mar 2023 16:35:17 -0600
Subject: [PATCH] feat: add route level error handling

---
 app/package-lock.json          |  12 ++++
 app/package.json               |   3 +-
 app/src/Routes.tsx             |  15 ++++-
 app/src/pages/ErrorElement.tsx | 100 +++++++++++++++++++++++++++++++++
 app/src/pages/index.tsx        |   1 +
 5 files changed, 128 insertions(+), 3 deletions(-)
 create mode 100644 app/src/pages/ErrorElement.tsx

diff --git a/app/package-lock.json b/app/package-lock.json
index 48392e49e9..39e0d9166b 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -24,6 +24,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",
@@ -5397,6 +5398,17 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/react-error-boundary": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.3.tgz",
+      "integrity": "sha512-IzNKP/ViHWp2QRDgsDMirEcf0XLsLueN6Wgzm1TVwgbAH+paX8Z42VyKvZcFFRHgd+rPK2P4TLrOrHC/dommew==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
     "node_modules/react-hook-form": {
       "version": "7.43.8",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.43.8.tgz",
diff --git a/app/package.json b/app/package.json
index 451dc9699a..522762c1ac 100644
--- a/app/package.json
+++ b/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",
diff --git a/app/src/Routes.tsx b/app/src/Routes.tsx
index 66584974f8..8aef529d46 100644
--- a/app/src/Routes.tsx
+++ b/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
diff --git a/app/src/pages/ErrorElement.tsx b/app/src/pages/ErrorElement.tsx
new file mode 100644
index 0000000000..7bc0eb6b28
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/src/pages/index.tsx b/app/src/pages/index.tsx
index d66148518b..df6923954e 100644
--- a/app/src/pages/index.tsx
+++ b/app/src/pages/index.tsx
@@ -1,3 +1,4 @@
 export * from "./home";
 export * from "./embedding";
 export * from "./Layout";
+export * from "./ErrorElement";