如何捕获被阻止的网络请求答案

【问题标题】：How do I catch the blocked network requests如何捕获被阻止的网络请求
【发布时间】：2021-04-14 02:38:21
【问题描述】：

我需要检测被阻塞的网络请求并触发有条件的特定逻辑。

假设被阻止的请求后面跟着错误消息被抛出到控制台，我试图拦截 console.error 消息并捕获 window.onerror 事件，但无济于事。

对于脚本，触发网络请求（被 CORS 策略阻止并引发示例错误）：

throw.js

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

我有一个听众：

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);
  };
})();

尽管我在控制台中看到了错误：

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

两个数组（window.errors 和 window.consoleErrors）都是空的。

所以，我的问题是：如何捕获并处理错误消息 ('GET https://checkip.amazonaws.com/ net::ERR_FAILED')？以某种替代方式解决初始任务的想法也受到欢迎。 s

【问题讨论】：

你的目标是什么，你的实际问题是什么？ “我如何捕获被阻止的网络请求” 是什么意思？那句话毫无意义。您发送了请求。它消失了。你得到回应。在那个响应之后，你知道它是否是一个 CORS 错误。您不能阻止请求或响应。如果您尝试删除控制台 AFAIK 中的错误消息，这是不可能的。
@ThomasSablik ：正如所说，我想在捕获特定请求被阻止或失败时执行代码块。我的目标不是抑制控制台错误，而是将事件报告给后端。
fetch("https://checkip.amazonaws.com").catch(err => { console.log(err); });
@ThomasSablik : 我无法挂钩实际代码，触发网络请求，所以想法是捕获任意请求失败
你不能。如果承诺没有捕获它是一个捕获错误并且AFAIK你以后不能捕获它。甚至try { fetch("https://checkip.amazonaws.com") } catch (err) { console.log(err); } 对我也不起作用，因为为时已晚（或错误的捕获类型）。

标签： javascript

【解决方案1】：

警告：这是一个非常个坏主意。仅在有的情况下修改内置函数/原型。

网络错误消息是 DevTools 的一项功能，不会通过console.error() 记录它们，因此修改该功能将不起作用。但是，您可以修改fetch() 函数：

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;
};

【讨论】：