Updated Designs for 404 and Error pages #2337
Conversation
There was a problem hiding this comment.
why is this called three_quarter_half ? (I'm guessing it just came from figma? But curious if you know...)
There was a problem hiding this comment.
That's the filename in the brand assets https://brand.mit.edu/logos-marks/tim-beaver - half a body and turned three quarters!
| <Button variant="primary" href={HOME}> | ||
| Home | ||
| </Button> |
There was a problem hiding this comment.
Suggestion: Here and elsewhere, maybe we should do <Button Component="a" ... >. I don't think it matters much, but probably not a bad idea to full reload on errors so as to clear state. What do you think?
I had kind of a strange encounter with the Home button: I made the homepage throw an error (after some interaction), then I got the error page, but "Home" didn't do anything, since I was already on the home page... Switching to "a" would force a reload.
What I actually did was... I added
const [_err, throwError] = React.useState<Error | null>(null)
useEffect(() => {
if (window) {
// @ts-expect-error woof
window.throwHomepageError = (err: unknown) => {
throwError(() => {
throw err
})
}
}
})to the homepage, then:
- Navigate to homepage, all looks good.
- in browser console
throwHomepageError(new Error('error'). - now I see error page
- but clicking "Home" doesn't do anything.
Again...that's pretty artificial. A fullpage reload only helps in this case because the error was thrown during render but AFTER some user interaction. If the error throws on first render, then even a full reload won't help.
There was a problem hiding this comment.
Yes, agree - better to reload. The error is caught, but may interfere with client navigation.
What are the relevant tickets?
Closes https://github.com/mitodl/hq/issues/7725
Description (What does it do?)
Updates the error page template to reflect the designs in Figma.
Screenshots (if appropriate):
How can this be tested?
The 404 page can be tested by navigating to any non-existent path, e.g. http://open.odl.local:8062/no-find
For the forbidden error page, navigate to a restricted route without the necessary permission (check/remove in the admin), e.g. http://open.odl.local:8062/learningpaths without
"is_learning_path_editor".The general "Something when wrong" error can be tested by throwing an error anywhere, though it must be during the client render, ie. in a useEffect() or an event handler. There is a global error catch for errors during server render, though Next.js suppresses error detail to prevent leakage to the client, so these are handled differently. For this reason this is ideally tested in production mode as error messages are forwarded during development so there is some inconsistent behavior.