Shipping great products goes hand in hand with a lot of things. One of them is to be aware when things go wrong.

Gladly today almost every backend architecture and framework has a pretty decent error logging system, but unfortunately that’s not the case when we take a look at the frontend. When somebody uses your web application and a JavaScript error occurs you won’t get notified.

With more and more business logic moving to the browser this becomes a huge issue. Fortunately we can set up error tracking for the frontend without much effort.

How to Setup JavaScript Error Tracking with Sentry

1. Sign up on getsentry.com and create a project. (Disclaimer: this is an affiliate link. Your sign up will get me some additional free events)

2. Add your domains to “Allowed Domains” in project settings.

3. Get your public URL for error tracking. You can find it in “Client Configuration” under “All Platforms”. The URL should look something like this

   https://ac459699bb384140a7e69a3d15890000@app.getsentry.com/3100
   

4. Add these lines to your html files and replace the config URL with the one you got in Step 3.

Good Job. You are all set :)

Test your setup by sending a message from your browsers console.

UPDATE To capture meaningful stack traces the documentation recommends wrapping your application code with a try-catch block. Thanks to Matt Robenolt for this tip.

When the script captures an error it sends the exception data to the Sentry backend.

Why should I log JavaScript Errors?

The error log will help you to find bugs you might not have been aware of. It’s way easier to track them down using the meta data which gets collected:

• URL
• User-Agent
• Stacktrace
• Browser
• OS
• First Seen
• Last Seen

This is really useful already but you can even add custom meta data like which customer was affected:

Example Screenshot

Conclusion

The time it takes to set up JavaScript error logging is nothing compared to the value you get out of it.

Further reading

• https://github.com/getsentry/sentry
• https://github.com/occ/TraceKit
• https://developer.mozilla.org/en/docs/DOM/window.onerror
• http://dev.opera.com/articles/view/better-error-handling-with-window-onerror/
• http://devblog.xing.com/frontend/how-to-log-javascript-errors/
• http://backstage.soundcloud.com/2011/11/front-end-javascript-bug-tracking/
• http://dev.opera.com/articles/view/client-side-error-logging/