fix(webapp): harden RouteErrorDisplay against null error.data

Remix route errors can have null/empty data; reading .message threw
inside the error boundary and blanked the page. Fall back safely.

Author: Ayush7614

.server-changes/fix-route-error-display-null-data.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: fix
+---
+
+Prevent dashboard error pages from crashing when a route error has no data payload

apps/webapp/app/components/ErrorDisplay.tsx

@@ -1,6 +1,6 @@
 import { HomeIcon } from "@heroicons/react/20/solid";
 import { isRouteErrorResponse, useRouteError } from "@remix-run/react";
-import { friendlyErrorDisplay } from "~/utils/httpErrors";
+import { friendlyErrorDisplay, getRouteErrorMessage } from "~/utils/httpErrors";
 import { permissionDeniedMessage } from "~/utils/permissionDenied";
 import { LinkButton } from "./primitives/Buttons";
 import { Header1 } from "./primitives/Headers";
@@ -39,9 +39,7 @@ export function RouteErrorDisplay(options?: ErrorDisplayOptions) {
       {isRouteErrorResponse(error) ? (
         <ErrorDisplay
           title={friendlyErrorDisplay(error.status, error.statusText).title}
-          message={
-            error.data.message ?? friendlyErrorDisplay(error.status, error.statusText).message
-          }
+          message={getRouteErrorMessage(error.status, error.statusText, error.data)}
           {...options}
         />
       ) : error instanceof Error ? (

apps/webapp/app/utils/httpErrors.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from "vitest";
+import { getRouteErrorMessage } from "./httpErrors";
+
+describe("getRouteErrorMessage", () => {
+  it("returns data.message when present", () => {
+    expect(getRouteErrorMessage(500, "Internal Server Error", { message: "boom" })).toBe("boom");
+  });
+
+  it("falls back when data is null", () => {
+    expect(getRouteErrorMessage(500, "Internal Server Error", null)).toBe(
+      "Something went wrong on our end. Please try again later."
+    );
+  });
+
+  it("falls back when data is undefined", () => {
+    expect(getRouteErrorMessage(404, "Not Found", undefined)).toBe(
+      "The page you're looking for doesn't exist."
+    );
+  });
+
+  it("uses a string data body", () => {
+    expect(getRouteErrorMessage(400, "Bad Request", "Invalid payload")).toBe("Invalid payload");
+  });
+
+  it("falls back when message is missing or empty", () => {
+    expect(getRouteErrorMessage(403, "Forbidden", {})).toBe(
+      "You don't have permission to access this resource."
+    );
+    expect(getRouteErrorMessage(403, "Forbidden", { message: "" })).toBe(
+      "You don't have permission to access this resource."
+    );
+  });
+});

apps/webapp/app/utils/httpErrors.ts

@@ -41,3 +41,24 @@ export function friendlyErrorDisplay(statusCode: number, statusText?: string) {
       };
   }
 }
+
+/**
+ * Safely extract a user-facing message from a Remix route error response.
+ * `error.data` can be null, a string, or an object — never assume `.message`.
+ */
+export function getRouteErrorMessage(status: number, statusText: string, data: unknown): string {
+  const fallback = friendlyErrorDisplay(status, statusText).message;
+
+  if (typeof data === "string" && data.length > 0) {
+    return data;
+  }
+
+  if (data && typeof data === "object" && "message" in data) {
+    const message = (data as { message: unknown }).message;
+    if (typeof message === "string" && message.length > 0) {
+      return message;
+    }
+  }
+
+  return fallback;
+}