Navigation: navigateerror event

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The navigateerror event of the Navigation interface is fired when a navigation fails.

For example, if the network is down, any fetch() method invoked to handle a navigation will fail, and the error will be routed to navigateerror.

Syntax

Use the event name in methods like addEventListener(), or set an event handler property.

js
addEventListener("navigateerror", (event) => {});

onnavigateerror = (event) => {};

Event type

Examples

You might deal with a successful navigation by hiding a previously displayed progress indicator, like this:

js
navigation.addEventListener("navigatesuccess", (event) => {
  loadingIndicator.hidden = true;
});

Or you might show an error message on failure:

js
navigation.addEventListener("navigateerror", (event) => {
  loadingIndicator.hidden = true; // also hide indicator
  showMessage(`Failed to load page: ${event.message}`);
});

Specifications

Specification
HTML
# event-navigateerror

Browser compatibility

desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
navigateerror event
Experimental

See also