How do I handle network errors so they don't appear in chrome developer console?

Question

I have some code running in a service worker which refreshes the resources currently cached:

const RESOURCE_CACHE = 'resources-v1';
caches.open(RESOURCE_CACHE).then(function addUrlsToCache(cache) {
    return cache.addAll([
        '/resources/style.css',
        '/resources/fonts/led',
        '/resources/script.js',
        '/img/roundel-tube.png',
        '/img/roundel-dlr.png',
        '/img/roundel-overground.png',
    ]);
}).catch(function (error) {
    console.error("Failed to cache resources:", error.message);
})

To test the error handling, I disable the dev server and run this client side code again. In this case, I expect to see a single error message: Failed to cache resources: Failed to fetch. But I actually see 7 error messages for this one bit of code:

This is confusing to me, because I thought they way I'd used promises here would have handled the other 6 so they never bubble up to the console. What do I need to differently so that the console never shows network errors which I'm handling in my code?

Probably a bug in Chrome, see https://crbug.com/693982, https://crbug.com/677599 — wOxxOm, Mar 05 '17 at 14:02
Also, I would suspect that, although it shows in Chrome, it doesn't indicate your code stops working at that point-- the error is automatically raised _from chrome's dev tools+ for missed resources, but _your_ code is running as expected. — Alexander Nied, Mar 05 '17 at 14:06
Yes, functionally my code works as expected. It's just really hard to debug things when the console is full bogus error messages which I'm trying to handle. — lucas, Mar 05 '17 at 14:10
@wOxxOm What's described in http://crbug.com/677599 seems to be exactly what I'm facing. I've added a star in case that helps. — lucas, Mar 05 '17 at 14:41

score 3 · Accepted Answer · answered Mar 05 '17 at 14:56

3

Following the links from a bug @wOxOm posted, I came across a helpful comment:

In Chrome you can click the Filter icon then "Hide network messages".

Whilst it's a bit heavier handed than I'd have liked (as it applies to all network traffic on the current page), it seems to be the best way to achieve what I'm looking for in the current version of Chrome.

answered Mar 05 '17 at 14:56

lucas

1,910
2
21
25

5

But how do you **catch** it? – Pacerier Oct 30 '17 at 13:57

score 1 · Answer 2 · edited May 23 '17 at 12:17

1

If your main concern is:

It's just really hard to debug things when the console is full bogus error messages which I'm trying to handle

Then you may use console.clear() (reference)

Working Demo in JsFiddle

edited May 23 '17 at 12:17

Community

1
1

answered Mar 05 '17 at 14:25

Himanshu

490
1
8
17

I'd not heard of `console.clear`, thanks for the link. But in this case it's not suitable because: 1) It'll suppress any genuine errors generated earlier on by unrelated bits of code. 2) The 7 errors are being logged asynchronously, so it'll only clear the ones which by chance happen before this function is called. 3) It can't be done programmatically – lucas Mar 05 '17 at 14:37
Then as stated by @wOxxOm it's a chrome bug which has already been logged. – Himanshu Mar 05 '17 at 14:42

How do I handle network errors so they don't appear in chrome developer console?

2 Answers2