Merge pull request #1017 from joshunrau/error-report

Author: joshunrau

apps/api/package.json

@@ -44,7 +44,7 @@
     "@opendatacapture/schemas": "workspace:*",
     "@opendatacapture/subject-utils": "workspace:*",
     "@prisma/client": "catalog:",
-    "axios": "^1.7.7",
+    "axios": "catalog:",
     "express": "^4.19.2",
     "lodash-es": "workspace:lodash-es__4.x@*",
     "mongodb": "^6.8.1",

apps/gateway/package.json

@@ -24,7 +24,7 @@
     "@opendatacapture/runtime-v1": "workspace:*",
     "@opendatacapture/schemas": "workspace:*",
     "@prisma/client": "catalog:",
-    "axios": "^1.7.7",
+    "axios": "catalog:",
     "compression": "^1.7.4",
     "express": "^4.19.2",
     "lodash-es": "workspace:lodash-es__4.x@*",

apps/playground/package.json

@@ -23,7 +23,7 @@
     "@opendatacapture/runtime-core": "workspace:*",
     "@opendatacapture/runtime-v1": "workspace:*",
     "@opendatacapture/schemas": "workspace:*",
-    "axios": "^1.7.7",
+    "axios": "catalog:",
     "esbuild-wasm": "catalog:",
     "framer-motion": "^11.5.4",
     "immer": "^10.1.1",

apps/web/package.json

@@ -35,7 +35,7 @@
     "@opendatacapture/subject-utils": "workspace:*",
     "@tanstack/react-query": "^5.55.4",
     "@tanstack/react-query-devtools": "^5.55.4",
-    "axios": "^1.7.7",
+    "axios": "catalog:",
     "clsx": "^2.1.1",
     "framer-motion": "^11.5.4",
     "html2canvas": "^1.4.1",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "opendatacapture",
   "type": "module",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "private": true,
   "packageManager": "[email protected]",
   "license": "Apache-2.0",

packages/react-core/package.json

@@ -14,6 +14,7 @@
     "storybook": "storybook dev -p 6006"
   },
   "peerDependencies": {
+    "axios": "catalog:",
     "react": "workspace:react__18.x@*",
     "react-dom": "workspace:react-dom__18.x@*",
     "tailwindcss": "3.x",
@@ -24,7 +25,9 @@
     "@douglasneuroinformatics/libui": "catalog:",
     "@opendatacapture/runtime-core": "workspace:*",
     "framer-motion": "^11.5.4",
+    "http-status-codes": "^2.3.0",
     "lucide-react": "^0.439.0",
+    "serialize-error": "^11.0.3",
     "ts-pattern": "workspace:ts-pattern__5.x@*"
   },
   "devDependencies": {

packages/react-core/src/components/ErrorPage/ErrorPage.tsx

@@ -1,33 +1,54 @@
 import { useEffect } from 'react';
 
+import { Button } from '@douglasneuroinformatics/libui/components';
+import { useDownload } from '@douglasneuroinformatics/libui/hooks';
+import { isAxiosError } from 'axios';
+import { getReasonPhrase } from 'http-status-codes';
+import { serializeError } from 'serialize-error';
+
 export type ErrorPageProps = {
-  error: {
-    message: string;
-  };
+  error: unknown;
 };
 
 export const ErrorPage = ({ error }: ErrorPageProps) => {
+  const download = useDownload();
+
   useEffect(() => {
     console.error(error);
   }, [error]);
 
+  let heading = 'Unknown Error';
+  if (isAxiosError(error) && error.status) {
+    heading = `${error.status} - ${getReasonPhrase(error.status)}`;
+  }
+
   return (
     <div className="flex min-h-screen flex-col items-center justify-center gap-1 p-3 text-center">
-      <h1 className="text-muted-foreground text-sm font-semibold uppercase tracking-wide">Unexpected Error</h1>
-      <h3 className="text-3xl font-extrabold tracking-tight sm:text-4xl md:text-5xl">Something Went Wrong</h3>
+      <h1 className="text-muted-foreground text-sm font-semibold uppercase tracking-wide">Something Went Wrong</h1>
+      <h3 className="text-3xl font-extrabold tracking-tight sm:text-4xl md:text-5xl">{heading}</h3>
       <p className="text-muted-foreground mt-2 max-w-prose text-sm sm:text-base">
-        We apologize for the inconvenience. Please contact us for further assistance.
+        We apologize for the inconvenience. Please download the error report using the button below and send it to your
+        platform administrator for further assistance.
       </p>
-      <div className="mt-6">
-        <button
-          className="text-sky-800 underline-offset-4 hover:text-sky-700 hover:underline dark:text-sky-200 dark:hover:text-sky-300"
+      <div className="mt-6 flex gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={() => {
+            void download('error.json', JSON.stringify(serializeError(error), null, 2));
+          }}
+        >
+          Error Report
+        </Button>
+        <Button
           type="button"
+          variant="primary"
           onClick={() => {
             window.location.assign(window.location.origin);
           }}
         >
-          Reload Page<span aria-hidden="true"> &rarr;</span>
-        </button>
+          Reload Page
+        </Button>
       </div>
     </div>
   );

pnpm-lock.yaml

@@ -18,6 +18,7 @@ catalog:
   '@testing-library/jest-dom': ^6.5.0
   '@testing-library/react': ^16.0.1
   '@testing-library/user-event': ^14.5.2
+  axios: '^1.7.7'
   esbuild: 0.23.x
   esbuild-wasm: 0.23.x
   happy-dom: ^15.7.4