Find time to redesign RedwoodJS's 404 Not Found page

The 404 Not Found error is one of those things you never want your users seeing – but when and if they do, it should be informative and also friendly.

As legend has it, the origin of the error message has a very interesting story dating all the way back to the 1980s when a group of scientists at CERN (Switzerland) started working on what would become the World Wide Web.

In order to achieve this goal, the scientists worked to create a database infrastructure that offered open access to data in various formats.

The World Wide Web’s central database was located in the office on the fourth floor of a building — room 404 to be exact.

Many companies have given their 404 pages some character and style:

But currently, RedwoodJS’s is:

I like minimalism, but perhaps this is too “spartan”

image

Want to make this page better?

You can find the page code here:

https://github.com/redwoodjs/redwood/blob/main/packages/create-redwood-app/template/web/src/pages/NotFoundPage/NotFoundPage.tsx

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!

Also something that would be really useful in dev mode:

Listing all available routes on the 404 page. We certainly don’t want it in production, but would be a really nice experience to have in dev (just in case you have typos in your Routes.js)

Ooo I’m interested :open_mouth:
Here is my quick attempt, The file size is lower too by the looks of it.

https://neosh11.github.io/RedwoodJSErrorPages/

2 Likes

Hi @neosh11 and thanks for submitting this.

I started a repo here: GitHub - redwoodjs/redwood-challenges: Help RedwoodJS redesign some framework pages and have your work seen by millions! to take submissions and began writing up the contributing process.

It isn’t complete, but I needed someone to try it out … and could use your help and comments to see if it makes sense:

Fork this repo
Copy the example directory in submissions
Rename this example directory to contain your github username (or some other way to identify you)
Within this directory is where you can contribute screenshots and components for each page to review.
Use the README.md to tell us more about your redesign concept and thoughts.
Submit a PR with a short message and introduction
We will review, comment and merge in after a basic check (just in the event there are inappropriate submissions)
Once merged the RedwoodJS community can review and decide which pages get to be part of the framework for v1.0! (Date TBD)

The idea is to let people create their own directory, then submit screenshots and code per each page.

Could you give it a try and let me know if it’s too cumbersome, etc?

Thanks!

1 Like

Yeah it makes sense @dthyresson ! Tried it out and submitted a PR.
I haven’t yet made proper designs yet though :stuck_out_tongue:

I’ll do that when I get some time!

1 Like

Just saw this 404 page for an online lottery site. Thought it was pretty clever

Not thought about it too deeply, but I think there’s some interesting imagery around a little wooden sign in a dark forest of redwood trees

5 Likes

I :heart: this concept. Maybe it needs a trail leading up to the sign, which doesn’t continue past that point.

Do we know any illustrators would would like to run with this concept?!?

Or, you could go very dark and just be a stump.

Redwoods were over-logged in the 40-50s.

Or, you could go very dark and just be a stump.

:joy:
:-1:

Another interesting idea, take the windows 95 style maze screensaver and use that with a voxel-y forest (with redwood trees)

I think in dev mode anything goes (although even then I’d prioritize utility—a list of routes that DO exist—over humor). But production is a different story

I read an article at some point, that I can’t find now, that suggested a 404 page isn’t really the appropriate time and place to be cute: a user came across this page, probably through no fault of their own, and now you’re acting like it’s a joke? It’s not really appropriate for the situation for the user finds themselves in. They’re confused or a bit angry that their task can’t be completed through, most likely, no fault of their own. It’s very rare that someone is manually inputting a URL, so chances are they come across a 404 because of bad link in the app itself, or an expired link from somewhere else.

I purposely kept the 404 page very generic for these reasons.

For those who do want to customize (but also be generic), please see these docs:

Including how to style with TailwindCSS

For anyone interested in more thinking along these lines: When life gives you lemons, write better error messages | by Jenni Nadler | Sep, 2022 | Wix UX

4,000+ errors to review is daunting, and maybe only appropriate for a large team. But, if you keep reading past that section, they present their retrospective thoughts which are good.