From fc076173ff65852ed7f1745b29272b8de1a919c5 Mon Sep 17 00:00:00 2001
From: Frank Noirot <frank@zoo.dev>
Date: Tue, 11 Mar 2025 13:46:07 -0400
Subject: [PATCH] Make any error show on ErrorPage, not just route error
 responses (#5623)

* Make any error show on ErrorPage, not just route error responses

Closes #5620 by making any error show on the page so the user can copy
it for use in an issue. Previously, the logic was too narrow and only
showed the error on the page if `isRouterErrorResponse` was true.

* @nadr0's feedback

thanks for giving my crap work a review

* Update src/components/ErrorPage.tsx

Co-authored-by: Jonathan Tran <jonnytran@gmail.com>

* @nadr0 feedback, handle overflowing error case

---------

Co-authored-by: Jonathan Tran <jonnytran@gmail.com>
Co-authored-by: Kevin Nadro <nadr0@users.noreply.github.com>
---
 src/components/ErrorPage.tsx | 35 ++++++++++++++++++++++++++++-------
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/components/ErrorPage.tsx b/src/components/ErrorPage.tsx
index a95643de2..0705074be 100644
--- a/src/components/ErrorPage.tsx
+++ b/src/components/ErrorPage.tsx
@@ -8,9 +8,32 @@ import {
   faTrash,
 } from '@fortawesome/free-solid-svg-icons'
 
+/** Type narrowing function of unknown error to a string */
+function errorMessage(error: unknown): string {
+  if (isRouteErrorResponse(error)) {
+    return `${error.status} ${error.statusText}`
+  } else if (error != undefined && error instanceof Error) {
+    return error.message
+  } else if (error && typeof error === 'object') {
+    return JSON.stringify(error)
+  } else if (typeof error === 'string') {
+    return error
+  } else {
+    return 'Unknown error'
+  }
+}
+
+/** Generate a GitHub issue URL from the error */
+function generateToUrl(error: unknown) {
+  const title: string = 'An unexpected error occurred'
+  const body = errorMessage(error)
+  const result = `https://github.com/KittyCAD/modeling-app/issues/new?title=${title}&body=${body}`
+  return result
+}
+
 export const ErrorPage = () => {
   let error = useRouteError()
-
+  // We log the error to the console no matter what
   console.error('error', error)
 
   return (
@@ -19,11 +42,9 @@ export const ErrorPage = () => {
         <h1 className="text-4xl mb-8 font-bold" data-testid="unexpected-error">
           An unexpected error occurred
         </h1>
-        {isRouteErrorResponse(error) && (
-          <p className="mb-8">
-            {error.status}: {error.data}
-          </p>
-        )}
+        <p className="mb-8 w-full overflow-aut">
+          <>{errorMessage(error)}</>
+        </p>
         <div className="flex justify-between gap-2 mt-6">
           {isDesktop() && (
             <ActionButton
@@ -54,7 +75,7 @@ export const ErrorPage = () => {
           <ActionButton
             Element="externalLink"
             iconStart={{ icon: faBug }}
-            to="https://github.com/KittyCAD/modeling-app/issues/new"
+            to={generateToUrl(error)}
           >
             Report Bug
           </ActionButton>