为什么获取错误在我的单页应用程序中没有stacktrace？ [英] Why do fetch errors not have a stacktrace in my single page application?

问题描述

我有两个简单的包装器，用于处理我的单页应用程序中的请求。一个包装获取，如果响应不正确，则会引发错误（不在200-300范围内）：

I have two simple wrappers that handle requests in my single page application. One wraps fetch and throws an error if a response is not ok (not in the 200-300 range):

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

    throw new Error(response.statusText)
  })

export default fetchy

然后将其中一个包裹起来并用于GET请求：

And one wraps fetchy and is used for GET requests:

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

  return fetchy(endpoint, init)
}

现在我在类似这样的操作中使用它们（这是 redux-thunk 动作创建者）：

Now I'm using them in an action like so (this is a redux-thunk action creator) :

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 不存在。

So I'm catching both errors in fetch itself (network errors), and errors returned from the fetchy wrapper (api errors). The problem is that network errors from fetch, caught in fetchArticles, do not contain a stack trace. So error.stack does not exist. Which is messing up my error reporting.

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

It is a valid error, and error instanceof Error === true and error.message === 'Failed to fetch'. So why does this error not have a stack trace? How can I fix it? It seems like maybe I could add an error callback to fetchy and re-throw any errors there, but that seems weird to me (but maybe I'm wrong).

推荐答案

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

The fetch error is created asynchronously & not directly related to a particular line of JavaScript. Although I agree it would be helpful if the line of the fetch call was included. I've filed a bug for this https://bugs.chromium.org/p/chromium/issues/detail?id=718760

作为一种解决方法，您可能会捕获fetch错误，如果存在错误，则抛出新错误堆栈中没有数字：

As a workaround, you could catch the fetch error, and throw a new error if there are no numbers in the stack:

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

这篇关于为什么获取错误在我的单页应用程序中没有stacktrace？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！