null is not an object (evaluating 'this.bugsnagClient.Event')

Describe the bug

Bugsnag logs a bugnsag error

Environment

• Bugsnag version:7.9.2
• Browser framework version (if any):
  • Angular: 10.2.5
• Browser version (e.g. chrome, safari):

Breadcrumbs

Occuring error

TypeError null is not an object (evaluating 'this.bugsnagClient.Event')      
  node_modules/@bugsnag/plugin-angular/__ivy_ngcc__/dist/esm2015/index.js:30:41 handleError     
  node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:28109:49 next     
  node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:24923:37      
  node_modules/rxjs/_esm2015/internal/Subscriber.js:183:20 __tryOrUnsub     
  node_modules/rxjs/_esm2015/internal/Subscriber.js:122:34 next   
  node_modules/rxjs/_esm2015/internal/Subscriber.js:72:30 _next     
  node_modules/rxjs/_esm2015/internal/Subscriber.js:49:23 next  
  node_modules/rxjs/_esm2015/internal/Subject.js:39:29 next     
  node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:24913:19 emit     webpack:/node_modules/zone.js/dist/zone-evergreen.js:134:49 run     
  node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:27581:17 onHandleError     
  webpack:/node_modules/zone.js/dist/zone-evergreen.js:181:55 runTask     
  webpack:/node_modules/zone.js/dist/zone-evergreen.js:487:41 invokeTask

Example code snippet

app.module.ts

...
import { BugsnagErrorHandler } from '@bugsnag/plugin-angular';
...
export function errorHandlerFactory() {
  return new BugsnagErrorHandler();
}
...
@NgModule({
  declarations: [...],
  imports: [...]
  providers: [{provide: ErrorHandler, useFactory: errorHandlerFactory}, ...] 

First when the user has accepted the analytics cookies and data transfer, bugsnag will be initialized.

app.component.ts

bugsnagClient: any

observeBugsnagEnabled() {
  ...cookies.subscribe((cookies: CookieSetting) => {
     if (cookies.analytics) {
       this.startBugsnag();
     } else {
       this.bugsnagClient = undefined;
     }
  })
}

startBugsnag() {
  this.bugsnagClient = this.bugsnagClient || bugsnag.start({
    apiKey: environment.bugsnag_id,
    appVersion: environment.version,
    enabledBreadcrumbTypes: ['error', 'log', 'navigation', 'request', 'user'],
    autoTrackSessions: true,
    collectUserIp: false,
    generateAnonymousId: false,
    releaseStage: environment.name,
    enabledReleaseStages: ['production', 'staging']
  });
  this.setBugsnag();
}

setBugsnag() {
  if (this.bugsnagClient) {
    this.bugsnagClient.setUser(this.guest?.id || '0')
    this.bugsnagClient.addOnError(event => {
      if (event.originalError instanceof FirebaseError) {
        return false;
      }

      if (this._module?.type) {
        event.context = this._module.pretty_mode ? this._module.type + ' : ' + this._module.pretty_mode : this._module.type;
      } else {
        event.context = window.location.pathname;
      }

      event.addMetadata('user',
        {
          id: this.guest?.id || 0,
          name: this.guest?.name || '',
          locale: this.guest?.locale || ''
        }
      );

      const regex = new RegExp('zone.js|@angular|rxjs');
      event.errors[0].stacktrace.forEach(function (frame) {
        frame.inProject = !regex.test(frame.file);
      });
    });
  }
}

[pavloldev6]

@yousif-bugsnag Thanks for your clarification. If you look at the following instruction page, you will see that it’s not clear where the Bugsnag.start is supposed to be called. https://docs.bugsnag.com/platforms/javascript/angular/ It would be much better to have clearer instructions.

[xljones]

Let us know if you have any further questions on the usage of Bugsnag at [e-mail]