How to handle network errors so that they do not appear in the Chrome console?

Question

I have some code running in a worker that updates the resources currently being 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 check for error handling, I turn off the dev server and run this code again on the client side. In this case, I expect to see one error: Failed to cache resources: Failed to fetch. But I really see 7 error messages for this one bit of code:

This is confusing because I thought that the way I used promises would handle the remaining 6 so that they never appear on the console. What do I need differently so that the console never displays network errors that I process in my code?

Answer 1

@wOxOm :

Chrome "", " ".

, ( ), , , Chrome.

Answer 2

:

, ,

console.clear() ()

JsFiddle