Custom ErrorBoundary

Retired Boards Appdev Tools
1

Reposting this github thread here as requested

https://github.com/Shopify/shopify-app-template-remix/issues/465

Hi,

I read the docs here: https://shopify.dev/docs/api/shopify-app-remix#boundaries but its not clear if/how we can render our own error boundary page.

The docs say to do this:

export function ErrorBoundary() {
  return boundary.error(useRouteError());
}

Can we return our own markup? If so, how do we still call boundary.error?

export function ErrorBoundary() {
  const error = useRouteError();
  return <div className="error">{error}</div>;
}

Also, do we need to call boundary.error and boundary.headers in every ErrorBoundary? eg in each nested ErrorBoundary?

1 Like
2

Maybe this info might help:

ErrorBoundary in Remix: An ErrorBoundary in Remix is a React component that renders whenever there is an error in the route, either during rendering or data loading. It's a crucial part of error handling in React-based applications, including those built with Remix​​​​.

Customizing ErrorBoundary: The customization of an ErrorBoundary in Remix allows you to return your own markup while handling errors. For example, you can use the useRouteError hook to access the error and display it in your custom UI:

export function ErrorBoundary() {
  const error = useRouteError();
  return Error: {error.message}
;
}
This code snippet demonstrates how you can display the error message within your custom markup​​.

Boundary.error and boundary.headers: The documentation and discussions did not specifically address whether boundary.error and boundary.headers need to be called in every nested ErrorBoundary. However, the focus seems to be more on handling the errors appropriately within the boundary itself​​.

Client-Side Error Handling: A critical aspect of implementing ErrorBoundary in Remix is handling client-side-only errors. By default, a client-side error in a Remix application can override server-side rendered HTML, potentially leading to a broken page. Implementing a custom ErrorBoundary can prevent this by ensuring that the server-side rendered application remains functional even if client-side JavaScript fails​​.

Example of a Custom ErrorBoundary: Here's an example that illustrates a custom ErrorBoundary implementation in Remix:

// Custom `ErrorBoundary` for client-side errors.
export function ErrorBoundary({ error }) {
  return (
    
      # Error
      

{error.message}

      

The stack trace is:

{error.stack}


    

  );
}
This example provides a detailed error message and stack trace, enhancing the error information presented to the user​​.

Progressive Enhancement: Remix supports progressive enhancement, allowing applications to function even if JavaScript fails to execute on the client side. A well-implemented ErrorBoundary aligns with this philosophy by ensuring that server-side functionality is preserved in the face of client-side errors​​.

In conclusion, customizing ErrorBoundary in a Shopify app using Remix allows for more personalized and effective error handling. It's important to handle both rendering and data loading errors gracefully and ensure that client-side errors do not compromise the server-side functionality of the app.
3

I appreciate the post but this does not address the question. I am familiar with how to render an ErrorBoundary in Remix, but Shopify has some imposed constraint on root.jsx where you must call

boundary.error(useRouteError())

and the example does not render a component.

2 Likes
4

Yeah, this is just about all I can find:

Remix Error Handling: Remix automatically catches most errors in your code, whether on the server or in the browser, and renders the closest ErrorBoundary where the error occurred​​.

Root Error Boundary: In Remix, you can define a global ErrorBoundary by exporting it from app/root.tsx. This error boundary will catch any uncaught errors. It’s advised to still render components like Links, Meta, and Scripts since the whole document will mount and unmount when this error boundary is rendered​​.

export function ErrorBoundary() {
const error = useRouteError();
console.error(error);
return (

Nested Error Boundaries: Each route in Remix can be an error boundary, allowing for localized error handling. If a nested route exports an ErrorBoundary, it will catch errors below it, allowing the surrounding UI in parent routes to continue rendering normally​​.

Shopify Remix Package: The Shopify Remix package is designed to enable Remix apps to authenticate with Shopify and make API calls. It's important to note that this package may impose certain constraints or have specific requirements for how to handle errors, particularly in the context of Shopify's ecosystem​​.

Constraints in Shopify's Remix Framework: Although specific constraints regarding boundary.error(useRouteError()) in Shopify's Remix framework were not explicitly detailed in the sources, it is clear that Shopify's implementation may have certain unique requirements or behaviors. This could be related to how Shopify apps interact with the Shopify ecosystem, particularly concerning authentication and API calls​​​​.

Given this information, it appears that while you can customize the ErrorBoundary in Shopify's Remix framework, you might need to adhere to specific patterns or practices, especially in the root.jsx file. This might involve using boundary.error(useRouteError()) in a certain way to ensure compatibility with Shopify's infrastructure and error handling mechanisms.
1 Like
5

Hi did you ever find a solution to this?