Catching common Javascript errors with Raygun

Ah Javascript… Some love it (including yours truly) and some refuse to touch it. With its completely dynamic and free nature, it is prone to odd errors and exceptions that you might not see in other languages. Those same errors are also the ones that break your site and cause your customers to head off to your competitors websites instead.

With tools like Raygun though you can catch Javascript errors the second they happen, fix them and even tell the affected customer that it’s sorted. Imagine the smile on their face when they get your email!

Reference Error

You know when you get carried away and refactor your code and there’s always that one variable hidden away somewhere that you didn’t know needed moving? Then you refresh your page and boom, a Javascript error is thrown as a non-existent variable or function is being called?

Time to crank open the inspector tools and figure out what was being called and why it can’t be found anymore. Then comes the fun job of locating where the missing code has gone in your hand crafted Javascript.

Syntax Error

Semicolons and curly brackets, line breaks and white space. Actually, it’s generally the first two that cause those issues. And imagine a world without line breaks…

We’ve all done it – rushing through some code and forgetting to close an if statement properly, hit refresh and the browser goes all sad. Javascript, being an interpreted language, means we get no build time protection of problems like this. We do have some awesome tools these days though that make it way easier to catch errors before it’s too late. Or at least before you press refresh.

Cannot read property of undefined

You press load, your AJAX request fires into life, the response comes back and… you get a ‘cannot read property of undefined‘ error – man. Time to hunt through both your code and the response to see what doesn’t quite match what you were expecting. Remember that Javascript is case sensitive, so name and Name are different things, and one of them probably isn’t real.

In the wild

This is all well and good though when you’re running the site locally on your machine – you watch the tools and tidy up any errors you spot. But what happens once your site is live and your code is running on an unimaginable number of different browsers and operating systems? Users always find the edge cases, even when you think you’ve covered them all.

Raygun steps in here! The Raygun4js provider catches all the errors above and heaps more, then provides you with stack traces so you can locate exactly where things didn’t go to plan. And if that’s not enough, enabling user tracking will allow you to know which of your users experienced issues, meaning you can get in touch with them once your fix has gone out. Proactive customer support is where it’s at!