968 create error page

[alexespejo]

Summary

Created a custom error page that displays when a user encounters an error or enters a bad route

Issues

In dark mode the link text color poorly contrasts the gray background

Test plan

This error page should appear when the user:

• Enters an invalid route (ex. /test/test)
• A runtime error is caught
  • To test for runtime errors a throw Error ('some message') on any of the pages to simulate an error being thrown
• When an update is made to prod while the user is using the app (in theory)

Issues

• Closes Create an Error Page #968

Future Follow-Up

• Redirect to home page after invalid route #1047

[KevinWu098]

Congrats on your first PR! Mostly looks good to me, with some nitpicks on wording and best practices.

Two main points other than the review comments:
One: If you're feeling up to it, I'd say a centered (but still mobile-friendly) error page would be better suited for making the error page look cleaner (see below)

No need to add graphics and whatnot, but centering does make the error page (IMO) feel nicer.

Two: Could you include screenshots of the error page (both light and dark) in your pull request? (it helps your reviewer visually examine the page, although we usually checkout the branch locally as well).

[MinhxNguyen7]

Also, can you add reproduction information in the description so that reviewer(s) don't have to figure out a way to induce an error? That should be under a section titled "Test Plan". See this PR as an example for writing a PR description
Also, please specify which issue it closes there? I know it's in the title, but putting it in the description closes it automatically when the PR merges

[alexespejo]

Edited message (dark and light)

[alexespejo]

Also, can you add reproduction information in the description so that reviewer(s) don't have to figure out a way to induce an error? That should be under a section titled "Test Plan". See this PR as an example for writing a PR description Also, please specify which issue it closes there? I know it's in the title, but putting it in the description closes it automatically when the PR merges

Is there a known way to reproduce runtime errors like a bad fetch request. In theory the page should appear for all errors but I wanted to see

[KevinWu098]

Also, can you add reproduction information in the description so that reviewer(s) don't have to figure out a way to induce an error? That should be under a section titled "Test Plan". See this PR as an example for writing a PR description Also, please specify which issue it closes there? I know it's in the title, but putting it in the description closes it automatically when the PR merges

Is there a known way to reproduce runtime errors like a bad fetch request. In theory the page should appear for all errors but I wanted to see

mm, might be a StackOverflow question -- one thing that jumps to mind is just writing in a throw Error into any given file!

[MinhxNguyen7]

Is there a known way to reproduce runtime errors like a bad fetch request. In theory the page should appear for all errors but I wanted to see

Ah I didn't realize you hadn't figured that.

[alexespejo]

Also, can you add reproduction information in the description so that reviewer(s) don't have to figure out a way to induce an error? That should be under a section titled "Test Plan". See this PR as an example for writing a PR description Also, please specify which issue it closes there? I know it's in the title, but putting it in the description closes it automatically when the PR merges

Is there a known way to reproduce runtime errors like a bad fetch request. In theory the page should appear for all errors but I wanted to see

mm, might be a StackOverflow question -- one thing that jumps to mind is just writing in a throw Error into any given file!

this works

[alexespejo]

New error page displaying the error message.

The error message can be hidden by default if anyone has a preference

Toggle on

Toggle off

[KevinWu098]

Looks awesome! Really solid improvement, and will hopefully help our bug reporting user flow.

Could you update your original PR message to

1. Include the latest images
2. Update the Issues section to link to the original issue Create an Error Page #968 (e.g. Closes #968)
   • the issues section isn't really used to state issues about your PR, but rather to just write the issues this PR is related to / closes

Just a couple more nits (I swear I'm not always this pedantic), but otherwise looks solid! Will also ping @MinhxNguyen7 again for another pair of eyes, since this page will be relatively prominent to users.

[KevinWu098]

LGTM, but I'll hold off on merging until Minh or Dalton gets a chance to look at this