Brave-browser: [Desktop] "404 Sorry, that page is missing." banner shows up when the server returns 'Internal Server Error'

[domdfcoding]

Description

A minority of users are confused by the 404 graphic displayed in the Wayback Machine banner because it doesn't match up to the actual error code (410, 502, etc.). Replace the graphic with a generic one that works for all error codes.

Original issue described:

The (new?) "404 Sorry, that page is missing." banner, which shows up when the user navigates to a page that doesn't exist and the server returns HTTP Status Code 404 (Not Found), also shows up when the server returns code 500 (Internal Server Error).

I can see the logic in showing the user a prompt to see if the page is available in the Wayback Machine, but the image on the left of the banner that shows "404" is inconsistent with the actual status code returned by the server.

The banner also shows up for code 410 (Gone), 502 (Bad Gateway), 503 (Service Unavailable) and 504 (Gateway Timeout), which all make sense for showing the banner for, but the image in the banner is still inconsistent.

This inconsistency may be confusing to the user if the website displays the HTTP Status Code as part of their custom error page.

Designs

For all states, replace the '404' image with the new image. Update body text to Poppins and remove other icons from the body copy.

After the user clicks to check if a saved version is available, show this state if there's no saved version:

Edge case

The Wayback Machine shows a fallback full-page error if the webpage doesn't have its own error page

Dark theme

Dark theme is supported:

Figma: https://www.figma.com/file/rz5shvMAAzqjWkfCN8dmAE/Desktop-404-Wayback-Machine?node-id=1%3A1805

[NejcZdovc]

I guess we would need static image with number being a text. I like this idea as things would be lot less confusing if you go investigating what error code was returned.

[billyc]

This new feature pops up even when some sites load correctly.

See for example: https://matsim-vsp.github.io/covid-sim/v5

This is because many Github Pages sites use a common "trick" to redirect after a 404 page. For these sites, the Brave 404 error bar shows up even though the page loads correctly (from the user's perspective). This site behavior is possibly in error depending on your point of view, but it is common.

Github Pages does not support server-side redirects, so SPA apps don't work with browser history. Many sites use a custom 404 page which immediately redirects to the SPA home page in order to get around this.

Many pages online describe the hack, since Github Pages is a popular static site host nowadays:

• https://duckduckgo.com/?t=ffab&q=github+pages+spa+404+hack&ia=web

I am agnostic on whether this hack to get around Pages limitations is "correct", but Brave users are going to see a lot of error bars on sites that otherwise appear to be working.

[jsekamane]

I like the idea, but the design of the banner is confusing. I've seeing the banner show up maybe 50 times in the last week and only today did I realised what it was – and that it was part of the browser and not something the webpages had rendered. It looks like a header on a webpage and not as something that is part of the browser UI. This is because it follows a familiar look with a "logo" in top-left corner and a bar across width of page, as seen below:

I hope you'll consider updating the design, so it more closely resembles the browser UI. I suggest removing the image, removing the orange-purple colours, and placing the banner at the bottom of the page instead. A good example is the banner that shows up when you download a file, as seen below:

[rebron]

cc: @karenkliu @jonathansampson

[rebron]

@karenkliu Probably better if we make the image not say 404 to avoid confusion and make it a more archive-y/generic image. Trying to sub-brand this as the 404 service and including all the the error codes is confusing folks, especially web devs. Let's not do separate images per error code, e.g. a 502, 503 image.

[rebron]

cc: @simonhong

[radounet-fr]

similar result here with a page describing a RESTful API definition (that returns an HTTP 200 code):

[karenkliu]

Designs added!

[GeetaSarvadnya]

Verification passed on

Brave | 1.12.101 Chromium: 84.0.4147.89 (Official Build) dev (64-bit)
-- | --
Revision | 19abfe7bcba9318a0b2a6bc6634a67fc834aa592-refs/branch-heads/4147@{#852}
OS | Windows 10 OS Version 1903 (Build 18362.959)

• Verified the test plan from https://github.com/brave/brave-core/pull/5840

Light mode:

Dark mode:

Private tab:

Tor tab:

Guest window:

---

Verification passed on

Brave | 1.12.102 Chromium: 84.0.4147.89 (Official Build) dev (64-bit)
-- | --
Revision | 19abfe7bcba9318a0b2a6bc6634a67fc834aa592-refs/branch-heads/4147@{#852}
OS | Ubuntu 18.04 LTS

• Verified the test plan from https://github.com/brave/brave-core/pull/5840

Light mode:

Dark mode:

Private tab:

Tor tab:

Guest window:

---

Verification passed on

Brave | 1.12.108 Chromium: 84.0.4147.105 (Official Build) (64-bit)
-- | --
Revision | a6b12dfad6663f13a7e16e9a42a6a4975374096b-refs/branch-heads/4147@{#943}
OS | macOS Version 10.14.6 (Build 18G3020)

• Verified the test plan from https://github.com/brave/brave-core/pull/5840

Light mode:

Dark mode:

Private window:

Tor window:

Guest window: