refactor: improve error handling components

- Rename ErrorPage to FullPageError for clarity
- Extract ErrorDisplay component for reusable error UI
- Add unified ErrorHandler component for consistent error handling
- Integrate ErrorHandler with FullPageError

Author: morgan-wowk

src/routes/ErrorPage.tsx src/components/shared/ErrorPage.tsxsrc/routes/ErrorPage.tsx renamed to src/components/shared/ErrorPage.tsx

@@ -1,21 +1,43 @@
+import Bugsnag from "@bugsnag/js";
 import { type ErrorComponentProps, useRouter } from "@tanstack/react-router";
+import { useEffect } 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";
+import { getBugsnagConfig } from "@/services/errorManagement/bugsnag";
 
-export default function ErrorPage({ error }: ErrorComponentProps) {
+export const ErrorPage = ({ error, reset }: ErrorComponentProps) => {
   const router = useRouter();
 
+  useEffect(() => {
+    const config = getBugsnagConfig();
+
+    if (config.enabled && error instanceof Error) {
+      Bugsnag.notify(error, (event) => {
+        event.addMetadata("error_handler", {
+          pathname: window.location.pathname,
+        });
+      });
+    }
+  }, [error]);
+
   const handleRefresh = () => {
+    // Reset error boundary if available (some callers provide this function)
+    reset?.();
     window.location.reload();
   };
 
   const handleGoHome = () => {
+    // Reset error boundary if available (some callers provide this function)
+    reset?.();
     router.navigate({ to: "/" });
   };
 
+  const errorMessage =
+    error instanceof Error ? error.message : "An unexpected error occurred";
+
   return (
     <div className="min-h-screen flex items-center justify-center bg-background p-4">
       <div className="max-w-xs w-full">
@@ -31,7 +53,7 @@ export default function ErrorPage({ error }: ErrorComponentProps) {
 
           <InfoBox title="Error Details" variant="error">
             <Paragraph font="mono" size="xs">
-              {error?.message || "An unexpected error occurred"}
+              {errorMessage}
             </Paragraph>
           </InfoBox>
 
@@ -52,4 +74,4 @@ export default function ErrorPage({ error }: ErrorComponentProps) {
       </div>
     </div>
   );
-}
+};

src/routes/router.ts

@@ -6,13 +6,13 @@ import {
   Outlet,
 } from "@tanstack/react-router";
 
+import { ErrorPage } from "@/components/shared/ErrorPage";
 import { AuthorizationResultScreen as GitHubAuthorizationResultScreen } from "@/components/shared/GitHubAuth/AuthorizationResultScreen";
 import { AuthorizationResultScreen as HuggingFaceAuthorizationResultScreen } from "@/components/shared/HuggingFaceAuth/AuthorizationResultScreen";
 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 NotFoundPage from "./NotFoundPage";
 import PipelineRun from "./PipelineRun";