How do I catch the blocked network requests

Question

I need to detect the blocked network requests and trigger conditionally specific logic.

Assuming the blocked requests are followed by error messages thrown into the console, I tried to intercept both console.error messages and catch window.onerror events, but at no avail.

For a script, triggering network request (which is getting blocked by CORS-policy and throw sample errors):

throw.js

(function () {
  fetch("https://checkip.amazonaws.com");
})();

I have a listener:

listen.js

(function () {
  const _consoleError = console.error;

  window.consoleErrors = [];
  window.errors = [];

  console.error = (str) => {
    window.consoleErrors.push(str);
    _consoleError(str);
  };

  window.onerror = (errorMsg) => {
    window.errors.push(errorMsg);
  };
})();

And despite I see the error in the console:

throw.js:2 GET https://checkip.amazonaws.com/ net::ERR_FAILED

Both arrays (window.errors and window.consoleErrors) are empty.

So, my question is: how do I get the error message ('GET https://checkip.amazonaws.com/ net::ERR_FAILED') caught and processed? The ideas to tackle the initial task in some alternative way are also welcome. s

What is your goal, your actual question? What does _"How do I catch the blocked network requests"_ mean? That sentence makes no sense. You sent the request. It's gone. You get a response. And after that response you know if it's a CORS error. You can't block the request nor the response. If you're trying to remove the error messages in the console AFAIK it's not possible. — Thomas Sablik, Jan 08 '21 at 11:33
@ThomasSablik : as being said, I want to execute the block of code upon catching the particular request blocked or failed. My goal is not to suppress console errors, but rather report the *incident* to the backend. — Q. Q. McAcka, Jan 08 '21 at 11:37
`fetch("https://checkip.amazonaws.com").catch(err => { console.log(err); });` — Thomas Sablik, Jan 08 '21 at 11:42
@ThomasSablik : I can't hook into the actual code, triggering network request, so the idea is to catch **arbitrary** request failure — Q. Q. McAcka, Jan 08 '21 at 11:45
You can't. If the promise doesn't have a catch it's an oncaught error and AFAIK you can't catch it later. Even `try { fetch("https://checkip.amazonaws.com") } catch (err) { console.log(err); }` doesn't work for me because it's too late (or the wrong type of catch). — Thomas Sablik, Jan 08 '21 at 11:47
@ThomasSablik So, the core of the question is how to prepare in advance the *catcher* for whatever is un-caught. — Q. Q. McAcka, Jan 08 '21 at 11:50
Does this answer your question? [How to catch uncaught exception in Promise](https://stackoverflow.com/questions/28001722/how-to-catch-uncaught-exception-in-promise) — Thomas Sablik, Jan 08 '21 at 11:56
@ThomasSablik : Unfortunately, it doesn't. While it succeeds to catch unhandled rejection of the `Promise` it fails to access the target error (`'..net::ERR_FAILED'-thing). — Q. Q. McAcka, Jan 08 '21 at 12:36
@Q.Q.McAcka That message is logged by DevTools itself, not via `console.error`. I have an idea and I'll post an answer. — D. Pardal, Jan 08 '21 at 16:20

score 0 · Accepted Answer · answered Jan 08 '21 at 16:41

WARNING: This is a very bad idea. Only modify built-in functions/prototypes if you have to.

The network error messages are a DevTools feature and they're not being logged via console.error(), so modifying that function won't work. However, you can modify the fetch() function:

const _fetch = window.fetch;
window.fetch = function fetch() {
  const promise = _fetch.apply(this, arguments);
  promise.catch(err => {
    // A network error occurred.

    // If you remove the next line, network errors won't cause uncaught exceptions
    throw err;
  });
  return promise;
};

How do I catch the blocked network requests

throw.js

listen.js

1 Answers1