How to handle errors in minified JavaScript (for Rails applications)

By Jesse | Posted Sep 15, 2016 | 4 min. (851 words)

Handling errors in the minified JavaScript portion of your Rails application can be frustrating. The exception and stack trace information that comes from the system is based on what may seems like an incomprehensible mess which doesn’t look like your original source code at all.

This article is a step-by-step guide to tracking your minified JavaScript asset errors inside a Rails application. We’ll also take a look at a few tools that can make your life easier when creating source maps.

Why we need to create source maps

In order to properly attribute errors to the original source code, you can create source maps of these JavaScript assets so that Raygun can properly attribute the stack trace and exception information to the correct locations in your original source code. This speeds up your issue resolution without fully exposing potentially vulnerable source code to the outside world.

What are minification and asset combining?

Minification is the process of removing all unnecessary characters in order to reduce the total file size of your JavaScript asset(s) without changing how the code actually functions. Minification speeds up the load time of your JavaScript assets, which can be incredibly useful in mobile applications and sites where bandwidth is limited or fast performance is paramount.

Combining assets speeds up and streamlines JavaScript asset loading by taking individual JavaScript asset files and placing them into a single file. This way, only one call is made on page load for the file as opposed to several calls to get all the individual files. The fewer back and forth requests a site has to make to load JavaScript files the better for site load times.

But why do I need source maps?

When exceptions occur in minified/combined JavaScript assets the stack trace information is based on the line and column position of the code in the minified file. Unfortunately this does not match up with the original source code and finding the true origin of the error can take an incredibly long time, especially in code bases with large amounts of JavaScript assets being compiled together.

Source maps provide you with the ability to decode how the files were combined and minified so that the exception stack trace information can be properly mapped back to the original source code. This gives you the same ease of debugging while still allowing you to use these faster loading JavaScript assets.

What things will I need to set this up?

Here is a list of things you should have ready to set up to implement source maps with your application:

The ability to install the UglifyJS2 NPM package on your local machine or production environment.
The ability to create a new Raygun application for the JavaScript portion of your application.

Setting up source maps with Rails 4/5

Note: while Sprockets 4 is rumored to support source maps fully, version 3 (currently used by Rails 4/5) does not.

There are several different options when it comes to creating source maps to use with Rails. Some of these options involve completely shutting off the minification and combining in Sprockets while some go as far as completely removing Sprockets in favor of third party asset handlers like Grunt and Gulp. For the purposes of this post we are just going to turn off the minification and combining of Sprockets for non-standard assets (dev created versus things like jQuery) and then use UglifyJS2 to handle the minification of the remaining JavaScript assets.

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
//= require bootstrap/dropdown
//= require_tree .

How to use Raygun for JavaScript tracking

So we have our minified/combined files and our source map. One of the major benefits of usign Raygun in this way is that you don’t have to setup/create your own error tracking for both your Rails and JS app. Then you can view both apps in one location. You’ll need your Ruby on Rails application connected to Raygun before you start. (You can take a free 14 day trial here – it doesn’t take a moment to get set up.)

The next step to handling errors in minified JavaScript for Rails applications is to set up a new application in Raygun for JavaScript tracking.

Once you are logged into Raygun, click on the ‘+’** **symbol in the upper left corner of your browser window:

Click on ‘Create Crash Reporting application:’

Enter in a name for your application and then click the ‘Next’ button:

Click on ‘JavaScript’ in the list of languages:

Following the directions given on the next screen to set up the Raygun JavaScript code snippets in the app/views/layouts/application.html.erb file:

<!DOCTYPE html>
<html>
  <head>
    <title>Your App</title>
    <%= csrf_meta_tags %>
    <script type="text/javascript">
      !function(a,b,c,d,e,f,g,h){a.RaygunObject=e,a[e]=a[e]||function(){
      (a[e].o=a[e].o||[]).push(arguments)},f=b.createElement(c),g=b.getElementsByTagName(c)[0],
      f.async=1,f.src=d,g.parentNode.insertBefore(f,g),h=a.onerror,a.onerror=function(b,c,d,f,g){
      h&&h(b,c,d,f,g),g||(g=new Error(b)),a[e].q=a[e].q||[],a[e].q.push({
      e:g})}}(window,document,"script","//cdn.raygun.io/raygun4js/raygun.min.js","rg4js");
    </script>
  </head>
  <body>
    <div class="container">
      <% flash.each do |key, value| %>
        <div class="alert alert-<%= key %>">
          <%= value %>
        </div>
      <% end %>
    </div>
    <script type="text/javascript">
      rg4js('apiKey', YOUR_API_KEY_GOES_HERE );
      rg4js('enableCrashReporting', true);
    </script>
  </body>
</html>