How do I provide a custom error boundary for my entry app's entry point (/app) and child routes (app/foo, app/foo/baz)?

[muchisx]

shopify-app-template-remix/app/routes/app.tsx

Lines 32 to 35 in b796328

	// Shopify needs Remix to catch some thrown responses, so that their headers are included in the response.
	export function ErrorBoundary() {
	return boundary.error(useRouteError());
	}

This is very confusing for me and I haven't gotten around to understand can I also return a component in my routes that also don't mess up what you guys intend the error boundary to do, which is to use that boundary import from shopify.

I went here in the docs but I left even more confused. I did not grasp how to do it and there's no examples.

I'm asking because currently without error boundaries my app just brakes whenever I have an error server-side and I have to restart my local server every time.

If someone could explain me like I'm 5 haha, would be great, thanks !

[paulomarg]

Hey! I hear you, error boundaries are tricky right now - we're looking at ways to improve them, but for now we need to do that.

We need that error boundary to be in app.tsx because there are flows where we need to throw responses with headers, so we need to catch those throws at this level for the headers function to kick in.

boundary.error will do 2 things (code for context):

• If a Response was thrown, we'll return some HTML to render the page normally so the headers are included. This behaviour needs to stay, or the app won't authenticate properly.
• If an Error was thrown, we'll just rethrow it. As far as our code goes, we don't care what happens after this.

All that aside, if you just want to add some custom code when errors happen, you can do this:

export const ErrorBoundary = () => {
  const error = useRouteError();
  try {
    // Catch redirect Response thrown by @shopify/shopify-app-remix
    const shopifyError = boundary.error(error);
    return shopifyError;
  } catch {
    // Run your own code here
    return <p>Something went wrong ☹️</p>;
  }
};

We'll see if we can add some documentation on how to add your own boundaries, but it will basically be the above :)

Hope this helps!

[github-actions]

We are closing this issue because we did not hear back regarding additional details we needed to resolve this issue. If the issue persists and you are able to provide the missing clarification we need, you can respond here or create a new issue.

We appreciate your understanding as we try to manage our number of open issues.

[nboliver-ventureweb]

@paulomarg What is the recommended to process to throw a 404 response from a loader, as per the Remix docs? https://remix.run/docs/hi/main/guides/not-found#how-to-send-a-404

[nboliver-ventureweb]

From what I can tell so far, this works for returning a custom error UI when a 4xx response is thrown.

export function ErrorBoundary() {
  const error = useRouteError();
  if (isRouteErrorResponse(error)) {
    return (
      <div>
        <h1>
          {error.status} {error.statusText}
        </h1>
        <p>{error.data}</p>
      </div>
    );
  } else {
    try {
      // Catch redirect Response thrown by @shopify/shopify-app-remix
      const shopifyError = boundary.error(error);
      return shopifyError;
    } catch {
      // Run your own code here
      return <p>Something went wrong ☹️</p>;
    }
  }
}

However it seems like it might contradict what is mentioned above:

If a Response was thrown, we'll return some HTML to render the page normally so the headers are included. This behaviour needs to stay, or the app won't authenticate properly.

@paulomarg can you please clarify if my example above is acceptable for retaining the required ErrorBoundary functionality?