An error in `MetaFunction` or `LinkFunction` is not caught by `ErrorBoundary`

What version of Remix are you using?

1.4.1

Steps to Reproduce

Create a MetaFunction with an error inside:

export let meta: MetaFunction = () => {
  throw new Error("boom")
}

Or create a LinkFunction:

export let links: LinkFunction = () => {
  throw new Error("boom")
}

This can happen if, for example, you access a property of data that doesn’t exists.

Expected Behavior

It should show the ErrorBoundary from the route or parent route.

Actual Behavior

It shows a Unexpected Server Error white screen with black text and the error message below.

[emilbryggare]

This is a problem for me as well, I just wanted to add that for me the real error happened in the LoaderFunction and the MetaFunction threw an error when trying to access that data.

1. Error in LoaderFunction
2. Error in MetaFunction when accessing that data, e.g. trying to access X of undefined.
3. ErrorBoundary in Route hierarchy is not activated
4. Resulting in the white screen with Unexpected Server Error.

Do we want errors in the MetaFunction to actually trigger the ErrorBoundary? The application can probably render ok most of the time and fall back to a parent MetaFunction.

This is what I did in my application to handle this for now.

export const meta: MetaFunction = ({ data }) => {
  try {
    return getSocialMetas(data);
  } catch (error) {
    console.error(error);
    return {};
  }
};

This will fall back to the parent MetaFunction if an error in just the MetaFunction, and if the error is actually in a LoaderFunction that ErrorBoundary is activated.

[jacknevitt]

I have just encountered this, and I find it quite odd that data is the thrown error instead of the expected type. I got around this by checking data instanceof Error before using properties on data. Would be nice not to do this for every meta function.