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

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?

Answer 1

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.