feat(meta): add thrown error to the meta params (#7105)

Co-authored-by: Matt Brophy <[email protected]>

.changeset/add-error-to-meta.md

@@ -0,0 +1,11 @@
+---
+"@remix-run/react": patch
+---
+
+Add error to meta params so you can render error titles, etc.
+
+```tsx
+export function meta({ error }) {
+  return [{ title: error.message }]
+}
+```

docs/route/meta.md

@@ -110,6 +110,16 @@ export const meta: MetaFunction<typeof loader> = ({
 
 The route's URL params. See [Dynamic Segments in the Routing Guide][url-params].
 
+### `error`
+
+Thrown errors that trigger error boundaries will be passed to the `meta` function. This is useful for generating metadata for error pages.
+
+```tsx
+export const meta: MetaFunction = ({ error }) => {
+  return [{ title: error ? "oops!" : "Actual title" }];
+};
+```
+
 ## Accessing Data from Parent Route Loaders
 
 In addition to the current route's data, often you'll want to access data from a route higher up in the route hierarchy. You can look it up by its route ID in `matches`.

integration/meta-test.ts

@@ -149,6 +149,26 @@ test.describe("meta", () => {
             return <h1>Music</h1>;
           }
         `,
+
+        "app/routes/error.tsx": js`
+          import { Link, useRouteError } from '@remix-run/react'
+
+          export function loader() {
+            throw new Error('lol oops')
+          }
+
+          export const meta = (args) => {
+            return [{ title: args.error ? "Oops!" : "Home"}]
+          }
+
+          export default function Error() {
+            return <h1>Error</h1>
+          }
+
+          export function ErrorBoundary() {
+            return <h1>Error boundary</h1>
+          }
+        `,
       },
     });
     appFixture = await createAppFixture(fixture);
@@ -231,4 +251,23 @@ test.describe("meta", () => {
     await app.goto("/authors/1");
     expect(await app.getHtml('link[rel="canonical"]')).toBeTruthy();
   });
+
+  test("loader errors are passed to meta", async ({ page }) => {
+    let restoreErrors = hideErrors();
+
+    new PlaywrightFixture(appFixture, page);
+    let response = await fixture.requestDocument("/error");
+    expect(await response.text()).toMatch("<title>Oops!</title>");
+
+    restoreErrors();
+  });
 });
+
+function hideErrors() {
+  let oldConsoleError: any;
+  oldConsoleError = console.error;
+  console.error = () => {};
+  return () => {
+    console.error = oldConsoleError;
+  };
+}

packages/remix-react/components.tsx

@@ -482,12 +482,13 @@ export function Meta() {
   } = useDataRouterStateContext();
   let location = useLocation();
 
-  let _matches = errors
-    ? routerMatches.slice(
-        0,
-        routerMatches.findIndex((m) => errors![m.route.id]) + 1
-      )
-    : routerMatches;
+  let _matches: AgnosticDataRouteMatch[] = routerMatches;
+  let error: any = null;
+  if (errors) {
+    let errorIdx = routerMatches.findIndex((m) => errors![m.route.id]);
+    _matches = routerMatches.slice(0, errorIdx + 1);
+    error = errors[routerMatches[errorIdx].route.id];
+  }
 
   let meta: MetaDescriptor[] = [];
   let leafMeta: MetaDescriptor[] | null = null;
@@ -507,6 +508,7 @@ export function Meta() {
       params: _match.params,
       pathname: _match.pathname,
       handle: _match.route.handle,
+      error,
     };
     matches[i] = match;
 
@@ -518,6 +520,7 @@ export function Meta() {
               params,
               location,
               matches,
+              error,
             })
           : Array.isArray(routeModule.meta)
           ? [...routeModule.meta]

packages/remix-react/routeModules.ts

@@ -51,6 +51,7 @@ export interface MetaMatch<
   handle?: unknown;
   params: DataRouteMatch["params"];
   meta: MetaDescriptor[];
+  error?: unknown;
 }
 
 export type MetaMatches<
@@ -74,6 +75,7 @@ export interface MetaArgs<
   params: Params;
   location: Location;
   matches: MetaMatches<MatchLoaders>;
+  error?: unknown;
 }
 
 export interface MetaFunction<