Opbeat is joining forces with Elastic – Learn more about Elastic APM

Announcing client-side JS error logging

Today we are making client-side JavaScript error logging available to everyone. We’ve been working on support for client-side JavaScript for the last few months. Many thanks to our beta testers!

Some of the error logging features of Opbeat that we are most proud of are grouping, auto-assignments and annotated stack traces. Client-side JavaScript presented some difficulties (that we solved) in these areas..

Stack trace from a coffees script application showing the original source code Stack trace from a coffees script application showing the original source code, annotated with code authors from Git.

Source maps support

The JavaScript code that is delivered to browsers is often many steps removed from the actual source code you wrote. Transpilation from languages like TypeScript, Dart or CoffeeScript, compilation of ES2015 with Babel, or minification with tools like UglifyJS all mean that the code that the browser (and our opbeat-js module) sees has little resemblance with the code you wrote.

Luckily, there is an established solution for dealing with this problem: source maps. Tools like Webpack and Gulp can produce a source map with the minified code. Using that source map, we can reconstruct the original code and show you an unminified version of the stack trace, automatically. Just make sure your asset pipeline outputs source maps, and deploy the source maps together with your other assets, then we’ll take it from there.

For more details on source maps, check our docs.

To get started, simply log in to your account, create a new app and select the new JavaScript option.

Normalizing stack traces

Browsers aren’t exactly known for their strict adherence to standards, which is also true for how they format stack traces. To make sure that the same errors from different browsers are grouped together, we invested a lot of time into normalizing stack traces across browsers.

By the way, you can learn more about this topic in Kenneth Auchenberg’s talk on how he built our client-side JS and AngularJS integrations

About the author
Benjamin Wohlwend is a member of Opbeat's engineering team. When his bicycle is not being stolen he is also a keen cyclist. If you have any suggestions, feature requests or have seen his bicycle, you can reach him at benjamin@opbeat.com.
You can follow him on Twitter or GitHub.