add thrown error to the meta params

closes #3903

.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

@@ -145,6 +145,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 Index() {
+            return <h1>Home</h1>
+          }
+
+          export function ErrorBoundary() {
+            return <h1>Home boundary</h1>
+          }
+        `,
       },
     });
     appFixture = await createAppFixture(fixture);
@@ -227,4 +247,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

@@ -516,6 +516,7 @@ export function Meta() {
   let meta: MetaDescriptor[] = [];
   let leafMeta: MetaDescriptor[] | null = null;
   let matches: MetaMatches = [];
+  let error = errors ? Object.values(errors)[0] : null;
   for (let i = 0; i < _matches.length; i++) {
     let _match = _matches[i];
     let routeId = _match.route.id;
@@ -531,6 +532,7 @@ export function Meta() {
       params: _match.params,
       pathname: _match.pathname,
       handle: _match.route.handle,
+      error,
     };
     matches[i] = match;
 
@@ -542,6 +544,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<