Javascript 为什么fetch错误在我的单页应用程序中没有stacktrace？

我有两个简单的包装器来处理单页应用程序中的请求。如果响应不正常（不在200-300范围内），则包装并抛出错误：

其中一个包装fetchy并用于GET请求：

const get = endpoint => {
  const headers = new Headers({ Authorization: `Bearer ${TOKEN}` })
  const init = { method: 'GET', headers }

  return fetchy(endpoint, init)
}

现在我正在这样的动作中使用它们（这是一个动作创建者）：

因此，我捕获了fetch本身的错误（网络错误）和从

fetchy

包装器返回的错误（api错误）。问题是fetchArticles中捕获的fetch网络错误不包含堆栈跟踪。因此

错误。堆栈
不存在。这把我的错误报告搞砸了

这是一个有效错误，并且
错误实例of error===true
和
error.message==='无法获取'
。那么为什么这个错误没有堆栈跟踪呢？我怎样才能修好它？似乎我可以在fetchy中添加一个错误回调，并在那里重新抛出任何错误，但这对我来说似乎很奇怪（但可能我错了）。
fetch错误是异步创建的&与特定的JavaScript行没有直接关系。尽管我同意，如果包含fetch调用的行，这将很有帮助。我已经为此设置了一个bug

作为一种解决方法，您可以捕获获取错误，并在堆栈中没有数字时抛出新错误：

function fetchy(...args) {
  return fetch(...args).catch(err => {
    if (!err.stack.match(/\d/)) throw TypeError(err.message);
    throw err;
  }).then(response => {
    if (response.ok) return response;
    throw Error(response.statusText);
  });
}

下面是一个例子，运行
时，获取错误是异步创建的&与特定的JavaScript行没有直接关系。尽管我同意，如果包含fetch调用的行，这将很有帮助。我已经为此设置了一个bug

作为一种解决方法，您可以捕获获取错误，并在堆栈中没有数字时抛出新错误：

function fetchy(...args) {
  return fetch(...args).catch(err => {
    if (!err.stack.match(/\d/)) throw TypeError(err.message);
    throw err;
  }).then(response => {
    if (response.ok) return response;
    throw Error(response.statusText);
  });
}

下面是一个运行的示例



最近我遇到了同样的错误。生产频道在短短的两个月内记录了大约500次这个错误，这真的让人恼火。我们的是rails应用程序，前端由react提供动力

下面是我们的情况。当页面加载时，“刷新”按钮变为“交叉”按钮，现在，如果在此页面加载期间正在进行某些api请求，并且用户单击此交叉按钮，则chrome浏览器会抛出此错误。对于相同的情况，Firefox在尝试获取资源时抛出NetworkError。这并不是我们应该担心的问题，因此我们决定使用sentry的ignoreErrors属性使sentry忽略此错误

Sentry.init({
  dsn: "sentry_dsn",
  ignoreErrors: [
    'TypeError: Failed to fetch',
    'TypeError: NetworkError when attempting to fetch resource.'
  ],
});



注意：

获取失败也是由CORS错误生成的，请注意这一点。
我们还决定使用sentry的beforeSend回调忽略状态代码在400到426之间的错误

Sentry.init({
  dsn: "sentry_dsn",
  ignoreErrors: [
    'TypeError: Failed to fetch',
    'TypeError: NetworkError when attempting to fetch resource.'
  ],
});

我花了几天时间试图找到这个错误。希望这对别人有帮助

最初，我在这一页上写下了这个回复-

谢谢



最近我遇到了同样的错误。生产频道在短短的两个月内记录了大约500次这个错误，这真的让人恼火。我们的是rails应用程序，前端由react提供动力

下面是我们的情况。当页面加载时，“刷新”按钮变为“交叉”按钮，现在，如果在此页面加载期间正在进行某些api请求，并且用户单击此交叉按钮，则chrome浏览器会抛出此错误。对于相同的情况，Firefox在尝试获取资源时抛出NetworkError。这并不是我们应该担心的问题，因此我们决定使用sentry的ignoreErrors属性使sentry忽略此错误

Sentry.init({
  dsn: "sentry_dsn",
  ignoreErrors: [
    'TypeError: Failed to fetch',
    'TypeError: NetworkError when attempting to fetch resource.'
  ],
});



注意：

获取失败也是由CORS错误生成的，请注意这一点。
我们还决定使用sentry的beforeSend回调忽略状态代码在400到426之间的错误

Sentry.init({
  dsn: "sentry_dsn",
  ignoreErrors: [
    'TypeError: Failed to fetch',
    'TypeError: NetworkError when attempting to fetch resource.'
  ],
});

我花了几天时间试图找到这个错误。希望这对别人有帮助

最初，我在这一页上写下了这个回复-

谢谢你
显然是错误。堆栈是非标准的：。但是，由于错误是在支持error.stack的浏览器（Chrome 57）中抛出的，因此fetch没有stacktrace似乎很奇怪。它不使用相同的错误构造函数吗？因此Error.stack显然是非标准的：。但是，由于错误是在支持error.stack的浏览器（Chrome 57）中抛出的，因此fetch没有stacktrace似乎很奇怪。它不使用相同的错误构造函数吗？感谢您提交错误报告。还有一个很好的解决方法，我有一个类似的修复，但是在链的末尾使用了
.catch
，这不如您的修复有效。谢谢是的，结尾的catch也可以，但是让它尽可能靠近fetch意味着它会给你一个更接近你要找的行号。谢谢你提交bug报告。还有一个很好的解决方法，我有一个类似的修复，但是在链的末尾使用了
.catch
，这不如您的修复有效。谢谢是的，结尾的catch也可以，但是让它尽可能靠近fetch意味着它会给你一个更接近你要找的行号。