Firefox/Projects/Network Error Pages

Summary

When a requested web page cannot be loaded, Firefox should display an error page that not only describes the problem, but which also presents the user with tools to resolve the issue. It also makes sense to extend this functionality to webserver 404 (File not found) responses as well.

Implementation is being tracked in Bug 482874

Introduction

When Firefox cannot display a requested web page because of a network error, it currently shows a network error page. This page describes the problem and gives advice on how to fix it, but it currently offers only one "tool" for resolving the problem: the "Try Again" button. This is of limited utility, and for a large class of errors, this is guaranteed not to work (eg. misspelled URLs). A better network error page would provide the user with useful tools towards guiding them to the content they wanted.

Additionally, web pages that result in 404 errors have a lot in common with network error pages, except that the error page is provided by the server. In many cases this is a default 404 error page for the server which is not very helpful. The other major browsers will substitute a browser-provided 404 error page in many cases (the typical rule seems to be not to override server-provided error pages over about 500 bytes in length, since those are likely to be customized). Firefox should provide similar functionality.

Team

cbartley  developer, sprint lead
boriss    UI
johnath   technical advisor
beltzner  Google Link Doctor liaison
ashughes  QA contact

Target Release

Firefox.next (Firefox 3.6?)

Competitive Analysis

All of the current browsers present network error pages for DNS errors. All of the major browsers offer information about why the error message is being presented linked from the error itself. Chrome and Safari offer a Google searchbox for the address bar input.

Chrome is the only browser to currently offer useful tools in a 404 page. It uses Google link doctor to find possible matches both for subdirectories and domains.

Internet Explorer and Chrome offer branded 404 pages, while Safari, Opera, and Firefox 3.5 display the default Apache warnings.

For inputs that do not connect to webpages, Internet Explorer sometimes directs the user to search - previously Microsoft Live Search, now "Bing."

Chart of network error pages in different browsers

Status

• A Places-based suggestions feature and 404 redirection were tested using an extension. It seemed to work well for cases where it made sense at all.
• Initial page design for DNS Not Found and 404 errors with Places-based suggestions, Search, and Try Again.
• Entity definitions for the initial page design have been added to "netError.dtd".
• Now have a C++ implementation of the Levenshtein edit distance algorithm (finding nearest string matches), which is accessible in Places Sqlite queries.
• 404 errors are intercepted and redirected to the new error page, but only the Places-based suggestions feature is functional.
• DNS Not Found errors use the new page design, but it’s not functional at all yet.
• Discussions with the Google Link Doctor team are ongoing.

Near Term Goals

Address just DNS Not Found errors and 404 Errors.

• Settle on a page design (mostly shared) for DNS Not Found errors and 404 Errors.
• Get the implementation in good working order.
  • Clean up the 404 interceptor/redirector code and find an appropriate location for it in the source tree.
  • Get Places-based suggestions working for DNS Not Found errors.
  • Add a real search box, using the user’s preferred search engine (but not Wikipedia?).
• Solicit feedback on functionality, implementation, and page design.
• Identify an implementation that we can land on trunk in the near term.

Longer Term Goals

• Add more tools to the new error page design.
  • Google Link Doctor
  • Herdict
  • Other tools TBD
• Move the other error pages to the new design and unify the implementation.

Possible Tools

• Retry button
• Suggested alternatives drawn from Places DB
• Suggested alternatives drawn from the Google Link Doctor service
• Suggested alternatives using simple rules of thumb (e.g. “ww.example.com” ? www.example.com)
• Search box, pre-populated with the failed URL or even anchor text, if available
• Herdict-based feedback (Herdict provides crowd-source site accessibility data)
• Other tools, for example the ErrorZilla extension provides Google Cache, Coral Cache, Wayback Machine, Ping, Trace, and Whois.

Caveats, Restrictions, Outstanding Questions

• Wholesale override of 404 pages would be unpopular, and there is no reliable way to tell the difference between a 404 error page provided by a default install of the web server and a custom 404 error page. The other major browsers seem to look at file size and if it's below a certain threshold, assume that it's a default page and overridable. Additionally a Firefox override might be useful even for custom error pages in some circumstances.
• The old error page, by design, runs without chrome privileges, and the new page must also be chromeless. This is to prevent an XSS attack from escalating into a privilege escalation attack.
• There are privacy issues around using Google Link Doctor that will need to be addressed if we are to use it automatically.
• The current 404 error page interception/redirection code just does a document.location.replace on EndDocumentLoad to redirect to the Firefox 404 error page. This has some limitations, and it may be necessary support this functionality at deeper level in the docshell. This should be possible in the Firefox.next timeframe.
• One click access to the original server-supplied 404 error page might be desirable.

UI Designs

UI designs have been broken up into two categories: official designs, and speculative designs. Official designs are displayed first, in reverse chronological order, so that the current design target is obvious. Speculative designs are below, also in reverse chronological order, since that’s the most likely order they will be discussed in. "Out-of-date" designs may get deleted as work progresses.

Design Questions

• Is it possible to link to a page with more information about the problem?
• Should indication that the error is "404" or "DNS Not Found" be provided in the first screen?
• How many alternatives should be shown, and how closely should those match user input?
• What distinction should be drawn from the user's perspective between 404 errors and "DNS Not Found" errors?
• Which tools should be provided?

The Official UI Design

• Unfortunately, there don't seem to be many useful tools we can provide here, beyond a suggestion and a search.
• It's been noted that having only one suggestion on this page as a bulleted item is visually jarring. Earlier mockups had this - my logic was that using this standard format means there's consistency between this and the 404 page above it, which could be brought to the other warnings. Also, this simple bullet list of "tools" can be easily expanded as new link tools may be added. However, I moved it back in this version and lined up the search box. Basically I thought that with only four elements it was too much to vary the indentation and spacing of them all. So if there were more than one "suggestion" it would go back to the 404 format above, but here there's only one (searching Google), so all is left aligned.
• Next step: links to a page with an explanation of the error and more details of what might have gone wrong

This is a design taking into account some recent decisions based on what could be done for the code freeze vs trunk:

• The middle block of text can't be altered except as a whole piece, and since there's not enough time to make a separate website explaining DNS error, removing it could leave a newer lost - it's kept in this mockup
• Google search can be added - it's given as a prominent option and the most visually distinctive of the options
• Try again is still present. I experimented making it a button much like it is now and like "Search" is after Google search, but that didn't really work into the style of a bullet list well

Sketches

• 

  A near match has been found (http://www.americas.com) along with the level above (http://news.bbc.co.uk), either via Places or Google

Sketches

• 

  A suggestion is found, via Google or Places, and search is provided

• 

  Two suggestions might be given if two are clear strong matches

References

• Bugs:
  • Bug 479922 - Network error pages should give me tools instead of asking me questions
• Mozilla-Central:
  • [nsDocShell::DisplayLoadError -- dispatches various error pages
  • netError.xhtml
  • aboutCertError.js
• About pages:
  • about:neterror
  • about:config -- urlclassifier.alternate_error_page default string = "blocked" -- for example -- tells nsDocShell::DisplayLoadError to use the "blocked" page instead of the default generic page.
• Triggers:
  • https://johnath.com/ - triggers a "Secure Connection Failed" error page.
  • http://example.example.com/ - triggers an "Address Not Found" error page.
  • triggers dnsNotFound error page
  • triggers connectionFailure error page
• List of possible error to address (old)
• Summary of error types (FF 1.5)
• Johnathan Zittrain - HerdictWeb talk in building K - had ideas about integrating it into Firefox's error pages. Instead of Firefox just telling you the site is unreachable, maybe it could tell you whether it has been gone for minutes or months, and whether it is broken for everyone or only for certain ISPs or countries.
• Boriss' 1st blog post
• Images:

• 

  Google Chrome's Friendly 404 Error Page