Injecting Rollbar in Angular 6

Question

I am trying to use Rollbar in Angular 6. Here is my code in the relevant code in the root module, app.module.ts:

const rollbarConfig = {
  accessToken: '<My Rollbar 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,
    FormsModule,
    HttpClientModule,
    NgbModule.forRoot(),
    CoreModule
  ],
  declarations: [AppComponent],
  providers: [
    { provide: ErrorHandler, useClass: RollbarErrorHandler },
    { provide: RollbarService, useFactory: rollbarFactory}
  ],
  bootstrap: [AppComponent]
})
export class AppModule {

}

Now inside a service that is in a submodule of CoreModule I need to access the Rollbar object. The problem is that the instructions just say to inject it as:

@Inject(RollbarService) private rollbar: Rollbar

But, that causes a couple of problems. First of all it doesn't work. I get an error:

compiler.js:215 Uncaught Error: Can't resolve all parameters for MyService: ([object Object], [object Object], ?).
    at syntaxError (compiler.js:215)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata (compiler.js:10807)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata (compiler.js:10700)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getInjectableTypeMetadata (compiler.js:10922)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getProviderMetadata (compiler.js:10931)
    at compiler.js:10869
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getProvidersMetadata (compiler.js:10829)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:10548)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleSummary (compiler.js:10378)
syntaxError @ compiler.js:215
push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata @ compiler.js:10807
push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata @ compiler.js:10700
push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getInjectableTypeMetadata @ compiler.js:10922
push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getProviderMetadata @ compiler.js:10931
(anonymous) @ compiler.js:10869
push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getProvidersMetadata @ compiler.js:10829
push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata @ compiler.js:10548
push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleSummary @ compiler.js:10378
(anonymous) @ compiler.js:10465
push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata @ compiler.js:10443
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules @ compiler.js:22567
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents @ compiler.js:22548
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync @ compiler.js:22508
push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync @ platform-browser-dynamic.js:143
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:4790
./src/main.ts @ main.ts:17
__webpack_require__ @ bootstrap:76
0 @ main.ts:18
__webpack_require__ @ bootstrap:76
checkDeferredModules @ bootstrap:43
webpackJsonpCallback @ bootstrap:30
(anonymous) @ main.js:1

Second of all I get tons of circular dependency warnings because I have to import RollbarService from the root module and the root module depends on CoreModule, so it's a loop.

WARNING in Circular dependency detected:
src/app/app.module.ts -> src/app/core/core.module.ts -> src/app/core/shell/header/header.component.ts -> src/app/core/authentication/myservice.service.ts -> src/app/app.module.ts

How can I access Rollbar in a way that works and does not use circular dependencies?

Did you try to move the Rollbar module stuff from `AppModule` to the "submodule of CoreModule" where you need it? If you export it from there, it would be available in `AppModule`. — ConnorsFan, Apr 12 '19 at 19:17
@ConnorsFan I think it needs to be in AppModule to setup the global error handler? — Adam, Apr 15 '19 at 16:21

Walt Jones · Answer 1 · 2019-04-16T19:42:32.650

Take a look at the Angular example at:

https://github.com/rollbar/rollbar.js/tree/master/examples/angular2

That example extracts Rollbar into its own file. https://github.com/rollbar/rollbar.js/blob/master/examples/angular2/src/app/rollbar.ts

import * as Rollbar from 'rollbar';
import {
  Injectable,
  Inject,
  InjectionToken,
  ErrorHandler
} from '@angular/core';

const rollbarConfig = {
  accessToken: 'POST_CLIENT_ITEM_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);
  }
}

This allows you to structure your imports better, and should fix the circular dependency and other errors.

In your app.module.ts:

import { RollbarService, rollbarFactory, RollbarErrorHandler } from './rollbar';

And:

  providers: [
    { provide: ErrorHandler, useClass: RollbarErrorHandler },
    { provide: RollbarService, useFactory: rollbarFactory }
  ]

In your other components:

import { RollbarService } from './rollbar';
import * as Rollbar from 'rollbar';

And:

  constructor(@Inject(RollbarService) private rollbar: Rollbar) {}

You should now be able to use Rollbar logging and other features:

this.rollbar.info('angular test');

Injecting Rollbar in Angular 6

1 Answers1