Error handling for React.js apps

Daniel WylieJavascript, Provider Updates, Web Development3 Comments

React and Raygun

React is the cool kid on the block at the moment, everyone seems to be raving about it and how awesome it makes building Javascript apps, and rightly so.

Some articles worth a read (and watch):

Unimorphic Isoversal JavaScript What?

Elegant React with ES6 and a bit of ES7

Learning React.js: Getting Started and Concepts

What about React.js error handling and exception tracking though? You’ll be pleased to know that Raygun and React get on well – so well in fact that you don’t even need to do anything special to get started!

Simply include Raygun4JS in your site’s header and initialise it as you would any other Javascript application

And start firing those errors through!

If you’re doing some fancy ES6 transformation, remember to upload your source maps too and Raygun will produce super useful stack traces for you. Sign up for a free 14 day trial here.

Next level software intelligence across your entire stack.

3 Comments on “Error handling for React.js apps”

  1. Derek Perkins

    My React stack traces are pretty useless because it only shows the React/Redux code, it isn’t deep enough to actually show me my actual code that threw the error. This is what I see.

    Stacktrace:

    at t.componentDidUpdate line 40, column 8318 (https://global.cdn.mydomain.com/EyZQQQJFvW/app.js:40)
    at r.notifyAll line 27, column 19746 (https://global.cdn.mydomain.com/EyZQQQJFvW/app.js:27)
    at r.close line 30, column 29407 (https://global.cdn.mydomain.com/EyZQQQJFvW/app.js:30)
    at r.closeAll line 31, column 28403 (https://global.cdn.mydomain.com/EyZQQQJFvW/app.js:31)
    at r.perform line 31, column 27849 (https://global.cdn.mydomain.com/EyZQQQJFvW/app.js:31)
    at o.perform line 31, column 27766 (https://global.cdn.mydomain.com/EyZQQQJFvW/app.js:31)
    at o.perform line 31, column 2379 (https://global.cdn.mydomain.com/EyZQQQJFvW/app.js:31)
    at Object.R [as flushBatchedUpdates] line 31, column 2548 (https://global.cdn.mydomain.com/EyZQQQJFvW/app.js:31)
    at r.closeAll line 31, column 28403 (https://global.cdn.mydomain.com/EyZQQQJFvW/app.js:31)
    at r.perform line 31, column 27849 (https://global.cdn.mydomain.com/EyZQQQJFvW/app.js:31)

  2. Callum Gavin

    Hi Derek,

    Thanks for alerting us to this, we’re working on reproing this behavior and will let you know when we’ve discovered the cause and the potential fix.

Leave a Reply

Your email address will not be published. Required fields are marked *