How does global error handling work in service workers?

Question

I found https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/onerror which says:

The onerror property of the ServiceWorkerContainer interface is an event handler fired whenever an error event occurs in the associated service workers.

However I'm not able to get this working in Chrome (v51). In the scope of the main application, I ran the following code from the console:

navigator.serviceWorker.onerror = function(e) { console.log('some identifiable string' + e); };

Then within the scope of the active service worker I triggered an arbitrary error:

f(); // f is undefined

The result was the usual "Uncaught ReferenceError: f is not defined(…)" error message but it was not logged through my global onerror handler.

The MDN page says that this API has been supported in Chrome since v40, but navigator.serviceWorker.onerror is initially undefined which leads me to believe that it's unimplemented. Is anyone familiar with this?

Answer 1

Perhaps you tried to set the onerror handler on the navigator.serviceWorker container like this:

// no effect outside service worker script
navigator.serviceWorker.onerror = function() {...};

The error handler must be set from within a service worker script with self.onerror (self is a special variable/attribute here that refers to ServiceWorkerGlobalScope). The onerror callback is only provided an error message.

// inside service worker script
self.onerror = function(message) {
  console.log(message);
};

Alternatively, you could listen to the service worker's error event, which includes an ErrorEvent containing the location of the error:

// inside service worker script
self.addEventListener('error', function(e) {
  console.log(e.filename, e.lineno, e.colno, e.message);
});

Here's a demo. Be sure to delete the service workers from DevTools > Resources > Service Workers (on left panel) as it will fill with these failed service worker registrations:

I've verified the following browsers support onerror within an instance of service worker:

• Chrome 51 (stable) and 53 (canary)
• Firefox 47
• Opera 38 (stable) and 39 (developer)

---

UPDATE:

So when MDN describes the ServiceWorkerContainer interface, that is referring to self (ServiceWorkerGlobalScope) and not navigator.serviceWorker?

I think that's only true for the onerror attribute (and maybe for the other events there as well), and I'm guessing the spec hasn't been updated to reflect the agreed upon implementation...

The Service Workers working group had decided to move onerror from the ServiceWorkerContainer into the service worker instance, as discussed in GitHub (slightlyoff/ServiceWorker #198):

kinu commented on Apr 2, 2014

sgtm2. For error reporting (onerror stuff) we could probably do similar? E.g. moving .onerror handler from container to SW object, so that doc can explicitly know which SW the error is coming from (though it may need to attach handlers to multiple SWs).

And then there was a follow-up comment in a related issue (slightlyoff/ServiceWorker #104) that indicates lack of usefulness for onerror on the container:

jakearchibald commented on Apr 3, 2014

Thinking about the use-cases (following from #198)…

navigator.serviceWorker.onerror or navigator.serviceWorker.pending.onerror (whichever it becomes) are not useful for logging errors back to the server, as errors can happen outside of the life of any page. onerror inside the worker itself is best for that.

.pending.onerror is useful if you're updating the UI in response to an update. So maybe it's better as a statechange, although you'd need somewhere to put the error message.

That leaves errors that happen before the SW instance is created. AppCache has an error event that covers network-related update failures, and also parse failures. However, once again we'd lose any errors that happened outside the life of a page.