nextfaze / angular-rollbar

Rollbar logging service for Angular 2+

Angular (2+) Rollbar Integration

This package provides an Angular 2+ service for logging to Rollbar.

Installation

npm install angular-rollbar

Dependencies

This module relies on the official rollbar-browser npm package. In addition, it has Angular >= 2 as a peer dependency.

Usage

Bootstrap the module

import { RollbarModule, RollbarService } from 'angular-rollbar'

NgModule({
    imports: [
        RollbarModule.forRoot({
            accessToken: 'YOUR ROLLBAR CLIENT TOKEN'
        })
    ],
    providers: [
        { provide: ErrorHandler, useClass: RollbarService }
    ]
})
export class MyAngularApp {}

Use the service

Let the Angular DI do all the magic for you.

import { Component } from '@angular/core'
import { RollbarService } from 'angular-rollbar';

@Component(...)
export class MyComponent {

    constructor (rollbar: RollbarService) {
        rollbar.info('Logging to Rollbar!');
    }
}

Development

We are using Angular CLI to make things a little bearable.

npm install
npm test

Disclaimer

This project is not affiliated in anyway with Rollbar Inc. We do like their service though.

angular-rollbar's Issues

Usage fails with "Rollbar.init is not a function"

I think I followed the instructions with my Angular CLI project, but am getting these errors in the console:

zone.js:645 Error: Uncaught (in promise): TypeError: Rollbar.init is not a function
TypeError: Rollbar.init is not a function
    at new RollbarService (rollbar.service.js:23)
    at _createClass (core.es5.js:9601)
    at _createProviderInstance$1 (core.es5.js:9573)
    at initNgModule (core.es5.js:9527)
    at new NgModuleRef_ (core.es5.js:10635)
    at createNgModuleRef (core.es5.js:10619)
    at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.es5.js:12903)
    at NgModuleFactory_.webpackJsonp.../../../core/@angular/core.es5.js.NgModuleFactory_.create (core.es5.js:13898)
    at core.es5.js:4556
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at new RollbarService (rollbar.service.js:23)
    at _createClass (core.es5.js:9601)
    at _createProviderInstance$1 (core.es5.js:9573)
    at initNgModule (core.es5.js:9527)
    at new NgModuleRef_ (core.es5.js:10635)
    at createNgModuleRef (core.es5.js:10619)
    at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.es5.js:12903)
    at NgModuleFactory_.webpackJsonp.../../../core/@angular/core.es5.js.NgModuleFactory_.create (core.es5.js:13898)
    at core.es5.js:4556
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at resolvePromise (zone.js:770)
    at zone.js:821
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:191)
    at drainMicroTaskQueue (zone.js:584)
    at <anonymous>
api.onUnhandledError @ zone.js:645
handleUnhandledRejection @ zone.js:667
_loop_1 @ zone.js:658
api.microtaskDrainDone @ zone.js:662
drainMicroTaskQueue @ zone.js:592
Error: Uncaught (in promise): TypeError: Rollbar.init is not a function
TypeError: Rollbar.init is not a function
    at new RollbarService (rollbar.service.js:23)
    at _createClass (core.es5.js:9601)
    at _createProviderInstance$1 (core.es5.js:9573)
    at initNgModule (core.es5.js:9527)
    at new NgModuleRef_ (core.es5.js:10635)
    at createNgModuleRef (core.es5.js:10619)
    at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.es5.js:12903)
    at NgModuleFactory_.webpackJsonp.../../../core/@angular/core.es5.js.NgModuleFactory_.create (core.es5.js:13898)
    at core.es5.js:4556
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at new RollbarService (rollbar.service.js:23)
    at _createClass (core.es5.js:9601)
    at _createProviderInstance$1 (core.es5.js:9573)
    at initNgModule (core.es5.js:9527)
    at new NgModuleRef_ (core.es5.js:10635)
    at createNgModuleRef (core.es5.js:10619)
    at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.es5.js:12903)
    at NgModuleFactory_.webpackJsonp.../../../core/@angular/core.es5.js.NgModuleFactory_.create (core.es5.js:13898)
    at core.es5.js:4556
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at resolvePromise (zone.js:770)
    at zone.js:821
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:191)
    at drainMicroTaskQueue (zone.js:584)
    at <anonymous>
api.onUnhandledError @ zone.js:645
handleUnhandledRejection @ zone.js:667
_loop_1 @ zone.js:658
api.microtaskDrainDone @ zone.js:662
drainMicroTaskQueue @ zone.js:592

I did

1. run npm install angular-rollbar --save
2. add import { RollbarModule, RollbarService } from 'angular-rollbar'; to the app.module
3. add RollbarModule.forRoot({ accessToken: 'xxx' }) to the imports in the app.module
4. add { provide: ErrorHandler, useClass: RollbarService } to the providers in the app.module
5. add import { RollbarService } from 'angular-rollbar'; to the app.component
6. add private rollbar: RollbarService to the constructor of the app.component
7. call rollbar.info('Logging to Rollbar!'); inside the constructor of the app.component

Did I miss anything?

(Sorry if I missed something simple, Angular noob)

payload - environment

Hi, thanks for your excellent plugin and your effort. Do you have plans to add the environment info?

payload: {
environment: ????
}

Thanks!!

Protect against angular spamming change detection errors

https://www.reddit.com/r/Angular2/comments/ay93z1/a_misspelling_in_the_html_is_causing_an_infinite/
angular/angular#17010

Angular can spam errors when a template is malformed.

I've exceeded my rollbar limit a couple of times due to this issue, there should be a flag in this service that debounces/stops the error when the angular error cache floods. They haven't provided a clear way to deal with this, and rollbar would probably appreciate if this framework provided a way to stop a flood of errors.

This code looks like it could be useful for fixing things up:
https://www.reddit.com/r/Angular2/comments/ay93z1/a_misspelling_in_the_html_is_causing_an_infinite/ei2chu9?utm_source=share&utm_medium=web2x

Make rollbar as public or protected

To extends the RollbarService and implement own ErrorHandler, it will be nice if rollbar property will be protected to access when extends class.
I want to use rollbar to send my errors, but I still want to log my error in console, and if I extends RollbarService to implements my own handleError I cant access to rollbar property because is private.

export class ErrorHandlerCustom extends RollbarService {
        handleError(err: any) {
        this.rollbar.error(err.originalError || err); // This fails because is private
        console.log(err)
    }

Need unit tests

The module itself is fairly simple but still needs tests. At the moment coveralls is lying, currently coverage is 0.

update to angular 8

[email protected] requires a peer of @angular/common@>=2.0.0 but none is installed. You must install peer dependencies yourself.

Import not working

import { RollbarModule } from 'angular-rollbar';
import { RollbarService } from  'angular-rollbar';

You need to use :

import { RollbarModule } from 'angular-rollbar/lib';
import { RollbarService } from  'angular-rollbar/lib';

Hook into Angular's global error handling

https://angular.io/docs/ts/latest/api/core/index/ErrorHandler-class.html

Support scopes

Rollbar's JS library supports scopes:

https://rollbar.com/docs/notifier/rollbar.js/#rollbarscope

Should integrate this into the service

Verbose setting seems to be ignored

With the following config error messages arrive in Rollbar but do not show in the console.

RollbarModule.forRoot({
    accessToken: 'TOKEN',
        verbose: true,
        captureUncaught: true,
        payload: {
            environment: 'dev'
        }
})

Is there a trick or dependency that I'm missing?

Thanks for your help and all the best,
MrMorice

Rollbar2

Rollbar 2 was released
https://github.com/rollbar/rollbar.js/blob/master/CHANGELOG.md
2.0.4 latest version

Blog post: https://rollbar.com/blog/rollbar-javascript-error-monitoring-update/