Catch all errors on React 15.3.1

Question

I need catch all javascript error that happen on client browser to send to Rollbar. I tried a lot of solutions like window.addEventListener and overwrite console.error method but none of the worked for me.

Ajax errors I already get, like the jqXHR on image, but it have less information on must time.

But the message above (in red) I cannot.

How to really get all browser erros messages with React?

score 0 · Answer 1 · edited May 23 '17 at 12:33

0

I don't think the error you're seeing has anything to do with React, it's thrown by your browser because your script is trying to make a cross domain request.

Have a look at this for more details:

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

edited May 23 '17 at 12:33

Community

1
1

answered Aug 22 '16 at 10:59

Giuseppe

288
2
12

I can get some more than "error" string as error detail?? – Tiago Gouvêa Aug 22 '16 at 11:45
If you look at this http://stackoverflow.com/questions/5018566/catching-xmlhttprequest-cross-domain-errors it looks like you have a onError event available but the console error will always occur, it's logged by your browser and it looks like you cannot touch it for security reasons. – Giuseppe Aug 22 '16 at 13:33

score 0 · Answer 2 · answered Aug 22 '16 at 11:03

I think it's not really possible to catch all browser errors in the one place, and it is not a problem of React.

For example, if you want to catch all API errors, the basic technique is to wrap all your API calls to simple function like:

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

And you should call that function instead of directly requests. Also, the additional achieves of that technique, that you'll be able to log all requests and change library in one place if you'll need it ;D

About other errors, for example errors in Rendering or logic errors, Sentry team wrote nice article about handling errors:

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

And also, Sentry is very nice tool to handle React errors: https://getsentry.com/for/react/

Catch all errors on React 15.3.1

2 Answers2