[website] Add a 404 page #40884
[website] Add a 404 page #40884
Conversation
danilo-leal
added
design
Netlify deploy previewhttps://deploy-preview-40884--material-ui.netlify.app/ Bundle size report |
|
Great to see this! My plan to improve this some time ago got rejected on the basis that "we don't have any missing pages" 😅. Even if true, that doesn't mean that an external site can't have an incorrect URL, or someone guesses and mistypes a URL. (I've seen the quoted person do it during a monthly meeting 😉). Perhaps we could make it a bit more fun/quirky, even if it won't be seen very often? Just to take some of the frustration out of hitting a 404? Could we perhaps return some links related to the path that might get the user back on track, or show a search box? (That might be scope creep – this already an improvement.) The border of the "browser window" is hard to see in dark mode. And if I'm being really pedantic, the separation of the window controls is a bit wide compared to the real thing. And search looks a bit broken: 
|
There was a problem hiding this comment.
Nice 👍 , I changed the primary tag from website to docs as I believe it will most benefit docs users. It saves time to land on a 404 and to be able to use the website navigation right away, e.g. Algolia search.
From what I could test, based on the Next.js docs, simply creating a 404.tsx page is enough to route all of the 404 requests to it. It seems to be working well?! I'd appreciate any insights here if there's more wiring I need to do.
This is true for Next.js's server (local development). The reason this works in our case is because it outputs a 404.html file that is picked up by Netlify: https://docs.netlify.com/routing/redirects/redirect-options/#custom-404-page-handling.
And search looks a bit broken:
Oh, lol, nice. #40957
|
@oliviertassinari — sweet; thanks for jumping to fix the icons within the search! There's an old issue about that (#33731); can we close it by merging this PR after your changes? |
@danilo-leal Ah, ok, yes, it's the same bug. I'm removing this commit from this PR. It deserves its own. |
This reverts commit c694740.
|
@oliviertassinari, quick nudge here to see if you have any other comments? :) |
Signed-off-by: Olivier Tassinari <olivier.tassinari@gmail.com>
|
It looks great 👍 |
|
In the future, we could have custom 404 per docs area, e.g.
But wow, it feels like you need a business of the scale of >200 people for the opportunity cost of this to start to make sense 😄, e.g. https://stripe.com/sefsef vs. https://stripe.com/docs/sefsef is clearly a step up in the UX. |
Closes #31349
Okay, this is a longstanding and quite simple PR. It adds a slightly better-designed 404 page than our standard one. Having something a little bit thoughtful for this scenario adds a lot to communicating our care for attention to detail and polish!
From what I could test, based on the Next.js docs, simply creating a
404.tsxpage is enough to route all of the 404 requests to it. It seems to be working well?! I'd appreciate any insights here if there's more wiring I need to do.Preview: https://deploy-preview-40884--material-ui.netlify.app/material-ui/api/accordion-detailss/