Custom 500 page

[scottdixon]

Caught up with @beppek last week, who was after a custom 500 page:

This is common in pretty much every other framework. Next, Gatsby, Remix, etc. Even on SSR errors (not just the static pages). It’s a must have.

Chatted with @frandiox:

I think there's no way to handle this from the browser if everything fails on the server -- right now we show a default error page. We should allow modifying this.`

[yangcheng]

We need this as well! it implemented already?

[frandiox]

Yes, you can add an /src/Error.jsx component to handle errors: https://shopify.dev/custom-storefronts/hydrogen/configuration#servererrorpage

[frandiox]

It's now possible to add a custom /src/Error.jsx or /src/Error.tsx component to handle errors. The path can be changed with the serverErrorPage property in hydrogen.config.js.

Example of an error handler:

// /src/Error.jsx

export default function Error({error}) {
  return (
    <div>
      <h1>An unknown error occured!</h1>
      <h2>{error.message}</h2>
      <h3>{error.stack}</h3>
    </div>
  );
}

[00Jane]

I would like to ask how to import the .server.ts file into the Error.ts file?