Implementing Rollbar in ember applications

Rollbar does real-time error monitoring for developers, It catches all types of errors and also show the root cause for error.
In this article I am going to explain implementing Rollbar in ember application with ember-rollbar-client and configuration. Before using ember-rollbar-client we used 'ember-rollbar-cli` but It was not catching errors for Android and IOS builds.

To use ember-rollbar-client add it in package.json

After installing this package you need to add rollbar configuration in config/environment.js

  'emberRollbarClient': {
    accessToken: 'rollbar-write-client-token'
  };

You can get 'rollbar-write-client-token' from rollbar for that you need to create a project in Rollbar. Then you will get the 'rollbar-write-client-token' and we need to paste it in above configuration.

To catch errors You can inject rollbar service in controller, component and route

import Ember from 'ember';
const { Component, inject } = Ember;

export default Component.extend({
  rollbar: inject.service()
});

We can use following line to catch errors with user and environment details. i.e. In data you can log optional data to rollbar along with error.

this.get('rollbar').error(message, data = {id: userId, username: userName, environment: environment});

Currently it will catches errors for development environment also to exclude development environment you can disable rollbar when environment is development and test by using 'enabled' variable set false when environment is development or test.

enabled: environment !== 'test' && environment !== 'development'

But now it does show root cause for error properly rather it will show vendor.js with line , To show root cause properly with your project file and line you need to enable source maps and upload source map to rollbar with latest code.For that we need to add source_map_enabled: true and code_version . Code version is latest git commit version number like 06507be341dec32038e349428c475cd663d6028a to get code_version we can use require('child_process').execSync('git rev-parse HEAD').toString().trim() and we need to give minified_url to https://api.rollbar.com/api/1/sourcemap/download to download source map.

In environment.js

module.exports = function(environment) {
  var ENV = {
    'emberRollbarClient': {
      enabled: environment !== 'test' && environment !== 'development',
      accessToken: 'cc46e2e6402f4106a8ba71fe9752d69a',
      payload: {
        client: {
          javascript: {
            source_map_enabled: true, //this is now true by default
            code_version: require('child_process').execSync('git rev-parse HEAD').toString().trim(),
            environment: environment
          }
        }
      }
    }
  }
}

To download source maps in rollbar with minified_url we can do

- curl https://api.rollbar.com/api/1/sourcemap/download -F access_token=$ROLLBAR_KEY -F version=$APP_VERSION -F minified_url=https://example.com/assets/app_name.js

All setup now rollbar will catch all the errors and show the root cause with file and and line number.

Thanks, I hope this helps.