Ionic and Rollbar, the Perfect Pair

  1. Install the Rollbar JS plugin
  2. Initialize it as our default error handler
  3. Map our source files
  4. Upload our source maps to rollbar

Step 1: Install the Rollbar JS Plugin

Rollbar has a very nice guide for integrating itself into your project. I recommend you follow it: https://docs.rollbar.com/docs/angular

npm install rollbar --save

Step 2: Initialize it as our default error handler

Now, add Rollbar to your Angular Module. In a production app you would almost certainly break this up into multiple files, but for brevity I’ll post it all here:

const rollbarConfig = {
accessToken: 'POST_CLIENT_ITEM_ACCESS_TOKEN',
captureUncaught: true,
captureUnhandledRejections: true,
};

export const RollbarService = new InjectionToken<Rollbar>('rollbar');

@Injectable()
export class RollbarErrorHandler implements ErrorHandler {
constructor(@Inject(RollbarService) private rollbar: Rollbar) {}

handleError(err:any) : void {
this.rollbar.error(err.originalError || err);
}
}

export function rollbarFactory() {
return new Rollbar(rollbarConfig);
}

@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
providers: [
{ provide: ErrorHandler, useClass: RollbarErrorHandler },
{ provide: RollbarService, useFactory: rollbarFactory }
]
})
export class AppModule { }
  • We’re setting up our Rollbar config. This is important, we’ll do more to it later. At the least, you’ll need your access token.
  • We’re defining a RollbarErrorHandler class as our default Angular error handler class, and delegating those errors to rollbar. Now when an uncaught error occurs, it’ll get logged to rollbar.
  • We’re defining a RollbarService class we could inject into our components to manually log to rollbar. We won’t do much with that here.

Step 3: Map our source files

Keep in mind, that we’re using the Rollbar JS sdk here. Usually this is used on a web site. If it was used on a website, your minified JS file would have a URL on the server.

file:///android_asset/www/js/main.js
const rollbarConfig = {
accessToken: EnvironmentConstants.rollbarToken,
captureUncaught: true,
captureUnhandledRejections: true,
transform: function(payload: any) {
if (payload && payload.body && payload.body.trace && payload.body.trace.frames) {
let frames = payload.body.trace.frames;
for (let i = 0; i < frames.length; i++) {
if (frames[i].filename.indexOf('main.js') > -1) {
payload.body.trace.frames[i].filename = 'file://main.js';
}
}
}
},
payload: {
environment: EnvironmentConstants.target,
client: {
javascript: {
code_version: EnvironmentConstants.version,
source_map_enabled: true,
guess_uncaught_frames: true,
},
},
},
};

Step 4: Upload our source maps to rollbar

Now… build your project and grab that main.js.map file. That’s what we’ll upload to Rollbar.

https://rollbar.com/{project}/{app}/settings/source_maps/

And that’s it!

The next time you get an error in Rollbar you’ll see something like this:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Chris Hand

Chris Hand

58 Followers

Helping teams take ownership of their product and empower themselves to do great things.