Rollbar, all the regular console.log calls are being shown as originating from rollbar.min.js:2251:82. However, I would like to still be able to see where the log came from, for instance from heading.ts:25, this can be helpful in some instances.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RollbarService, rollbarFactory, RollbarErrorHandler } from './rollbar';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [
    { provide: ErrorHandler, useClass: RollbarErrorHandler },
    { provide: RollbarService, useFactory: rollbarFactory }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

rollbar.ts

import * as Rollbar from 'rollbar'; 

import {
  Injectable,
  Inject,
  InjectionToken,
  ErrorHandler
} from '@angular/core';

const rollbarConfig = {
  accessToken: 'CLIENT_ITEM_TOKEN',
  captureUncaught: true,
  captureUnhandledRejections: true,
  autoInstrument: {
        log: false
   },
};

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);
}

How to only enable error logging if in production environment? Using angular ErrorHandler class in a local environment seems to solve my problem. How can I do this?

Example:

if (!environment.production) {
    return new ErrorHandler()
}