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

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?

image

You can find the code for the Error Page here:

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!

1 Like

Oops!

A GitHub error example:

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

1 Like

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

1 Like

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

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

1 Like

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

2 Likes

maybe in dev mode only :laughing:

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
9 Likes

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.

damn! that looks good !

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.

4 Likes

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