Hey, wha happened? Let's redesign Redwood's Error Page

dthyresson · April 22, 2021, 3:32pm

No one ever writes errors, right? So, we’ll never get an error page …

Oops.

But, when you do, your app’s error page should be helpful, informative and not too scary.

In dev, you might get a dev friendly error with stack traces, but the framework’s error page is:

As with the Not Found Page there’s so much opportunity to redesign.

Let’s get creative and improve this experience for those times when your users ask hey … wha happened?

You can find the code for the Error Page here:

github.com

redwoodjs/redwood/blob/main/packages/create-redwood-app/template/web/src/pages/FatalErrorPage/FatalErrorPage.tsx

// This page will be rendered when an error makes it all the way to the top of the
// application without being handled by a Javascript catch statement or React error
// boundary.
//
// You can modify this page as you wish, but it is important to keep things simple to
// avoid the possibility that it will cause its own error. If it does, Redwood will
// still render a generic error page, but your users will prefer something a bit more
// thoughtful. =)

export default () => (
  <main>
    <style
      dangerouslySetInnerHTML={{
        __html: `
              html, body {
                margin: 0;
              }
              html * {
                box-sizing: border-box;
              }

This file has been truncated. show original

Some general considerations:

All markup and styles need to be within the component
Shouldn’t rely on TailwindCss
Supports Safari, Chrome, Firefox, etc.
Quick to load, so relatively lightweight
Friendly, engaging, exciting
Reflects mission and sentiment from Docs - Introduction : RedwoodJS Docs

Open to new animation, mascot/characters, helpful links to resources … be creative!

And – practically every RedwoodJS dev will get to see your work at some point. How cool is that?

Reply here if you are interested and will be posting either a repo to contribute to or some other way to showcase your work so people can see and maybe vote for the page that becomes part of v1!

dthyresson · April 22, 2021, 5:17pm

Oops!

A GitHub error example:

nickg · April 23, 2021, 8:54pm

I always liked Twitter fail whale from back in the Rails days:

mikebobadilla · April 23, 2021, 9:06pm

What if it was a drawing of someone accidentally cutting down a redwood tree?

rob · April 23, 2021, 9:40pm

Something to keep in mind… being cute, but not too cute… Cute Error Messages: How Cute is Too Cute? | Technical Communication at UAHuntsville

clairefro · April 23, 2021, 9:54pm

Maybe we should have a contest… a “something-went-wrongtest” where community votes on community submissions

ajcwebdev · April 23, 2021, 9:58pm

I vote we just change it to say “You broke it, so you figure it out!”

clairefro · April 23, 2021, 9:58pm

maybe in dev mode only

orta · December 17, 2021, 3:49pm

A rough draft for a dev error page:

The create-react-app one is an npm module, and people are likely very familiar with it. So take that as the “main” UI component, then start thinking about what Redwood sugar we have.

So for me that is:

Above we show what Page was rendering, and offering quick jumps to here/discord
Below we include the request/responses made during the setup of your page
We could include known info for the currentUser too, though I think hat might be less useful

KrisCoulson · December 17, 2021, 7:40pm

This is really good. I like the idea of being able to link to the forums/discord. I have also been sad just getting a redwood error in dev and having to open up the terminal or browse console to see what went wrong.

ajoslin103 · December 18, 2021, 12:27am

damn! that looks good !

orta · January 1, 2022, 1:58pm

Hey folks, I’ve been playing with this a bit and implemented a rough version of it inside my app

( I’ve included a copy of the files in this gist or this WIP PR )

I think providers like Apollo/Relay can also be error boundaries, but when they are they just attach additional context like request/response info to the error and continue to throw it up the render chain until it hits this root.

orta · January 15, 2022, 11:40pm

This now has a PR, Provide a Revised Runtime Error Page by orta · Pull Request #4167 · redwoodjs/redwood · GitHub