捕获React 15.3.1上的所有错误

Question

我需要捕获客户端浏览器上发生的所有javascript错误以发送到Rollbar。我尝试了许多解决方案，例如window.addEventListener和覆盖console.error方法，但没有一个对我有效。

我已经得到的Ajax错误，就像图像上的jqXHR一样，但它在必须时间方面的信息较少。

但上面的消息（红色）我不能。

如何使用React真正获取所有浏览器错误消息？

Answer 1

我认为您所看到的错误与React无关，因为您的脚本正在尝试发出跨域请求，因此您的浏览器会抛出该错误。

有关详细信息，请查看此内容：

How does Access-Control-Allow-Origin header work?

Answer 2

我认为不可能在一个地方捕获所有浏览器错误，这不是React的问题。

例如，如果要捕获所有API错误，基本技术是将所有API调用包装为简单的函数，如：

/**
* @returns Promise
*/
export default function httpRequest(type, path, params, headers) {
    return someHttpLibrary.request(type, path, params, headers)
        catch((error) => {
            logTheStuff(error);
        });
}

你应该调用该函数而不是直接请求。此外，该技术的额外成就，如果您需要，您将能够在一个地方记录所有请求并更改库; D

关于其他错误，例如渲染错误或逻辑错误，Sentry团队撰写了关于处理错误的好文章：

https://blog.getsentry.com/2016/01/04/client-javascript-reporting-window-onerror.html

而且，Sentry是处理React错误的非常好的工具：https://getsentry.com/for/react/