为什么获取错误在我的单页应用程序中没有堆栈跟踪？

Question

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

const fetchy = (...args) =>
  fetch(...args).then(response => {
    if (response.ok) {
      return response
    }

    throw new Error(response.statusText)
  })

export default fetchy

还有一个包装 fetchy 用于 GET 请求：

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

  return fetchy(endpoint, init)
}

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

export const fetchArticles = () => dispatch => {
  dispatch({ type: types.FETCH_ARTICLES })

  return get(endpoints.ARTICLES)
    .then(response => response.json())
    .then(data => normalize(data.items, [schemas.articles]))
    .then(normalized => dispatch(fetchArticlesSuccess(normalized)))
    // fetch errors caught here do not have error.stack
    .catch(error => dispatch(fetchArticlesFail(error)))
}

所以我捕获了获取本身的错误（网络错误）和从 fetchy 包装器返回的错误（api 错误）。问题是 fetchArticles 中捕获的来自 fetch 的网络错误不包含堆栈跟踪。所以 error.stack 不存在。这搞乱了我的错误报告。

这是一个有效的错误，error instanceof Error === true和error.message === 'Failed to fetch'。那么为什么这个错误没有堆栈跟踪呢？我该如何解决？似乎我可以向 fetchy 添加一个错误回调并在那里重新抛出任何错误，但这对我来说似乎很奇怪（但也许我错了）。

Answer 1

提取错误是异步创建的，与 JavaScript 的特定行没有直接关系。虽然我同意如果包含 fetch 调用行会很有帮助。我已经为此提交了一个错误 https://bugs.chromium.org/p/chromium/issues/detail?id=718760

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

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

这是一个例子运行 http://jsbin.com/qijabi/edit?js,console

Answer 2

最近我遇到了同样的错误。生产频道在短短 2 个月内记录了大约 500 次此错误，这真的很烦人。我们的是一个 rails 应用程序，其前端由 React 提供支持。

这是我们案例中发生的事情。当页面加载时，刷新按钮变为十字按钮，现在如果在此页面加载期间某些 api 请求正在进行并且用户单击此十字按钮，则 chrome 浏览器会抛出此错误。对于同样的情况，Firefox 在尝试获取 resource.This 时抛出 NetworkError 并不是我们应该担心的问题，因此我们决定使用 sentry.[=12= 的 ignoreErrors 属性让 sentry 忽略这个错误。 ]

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

注：
Failed to fetch 也是CORS 错误产生的，请注意这一点。我们还决定使用 sentry 的 beforeSend 回调忽略 statusCode 在 400 到 426 之间的错误。

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

最初我在这个页面上写了这个回复 - https://forum.sentry.io/t/typeerror-failed-to-fetch-reported-over-and-overe/8447/2

谢谢

为什么获取错误在我的单页应用程序中没有堆栈跟踪？

Why do fetch errors not have a stacktrace in my single page application?

javascript

reactjs

error-handling

stack-trace

fetch-api