bugsnag-js: Angular 17 app can't run with bugsnag/plugin-angular and esbuild

Describe the bug

Angular app fails on start with error Class constructor ErrorHandler cannot be invoked without 'new'

Steps to reproduce

Have in app.module setup like in documentation:

export function errorHandlerFactory() {
  return new BugsnagErrorHandler()
}

In the module providers:

{ provide: ErrorHandler, useFactory: errorHandlerFactory },

Set "builder": "@angular-devkit/build-angular:browser-esbuild", in angular.json
Start the app
An error logged in the console Class constructor ErrorHandler cannot be invoked without 'new'

Btw, it works great with the "builder": "@angular-devkit/build-angular:browser",

Environment

Bugsnag version: 7.22.2
bugsnag/plugin-angular: 7.22.2,
Browser framework version (if any):
- Angular: 17.0.7
Browser version (e.g. chrome, safari):
Device (e.g. iphonex):

Example Repo

Create a minimal repository that can reproduce the issue
Link to it here: https://stackblitz.com/edit/angular-ivy-7x7fkm?file=src%2Fapp%2Fapp.module.ts

Example code snippet

# (Insert code sample to reproduce the problem)

Error messages:

Class constructor ErrorHandler cannot be invoked without 'new'

About this issue

Original URL
State: closed
Created 6 months ago
Comments: 17 (6 by maintainers)

Most upvoted comments

Hi @mivanyna

Thank you for your patience here.

We have been able to reproduce the error you were seeing, and have made the necessary changes on the StackBlitz project you provided in order to fix all the errors appearing in the console.

The issue seems like it was down to using the old NgModule rather than standalone components. As suggested by the error message, this meant that the new keyword is required before invoking ErrorHandler. In your app.module.ts, you should edit the NgModule so that providers looks like: providers:[{ provide: new ErrorHandler, useFactory: errorHandlerFactory }]

You are likely to run into some more errors after this. If so, this should be fixed by adding @bugsnag/js inside allowedCommonJsDependencies within your angular.json. This will look something like:

"architect": {
...
          "options": {
            "allowedCommonJsDependencies": [
              "@bugsnag/js"
            ],
...

Please try the recommendations above and let us know whether that solves the problem.

mclack on Mar 19, 2024

Hi, I have the same issue after upgrading to the angular 17 error is thrown: TypeError: Class constructor ErrorHandler cannot be invoked without 'new' at new BugsnagErrorHandler2 (index.js:28:28) at new CustomErrorHandler (CustomErrorHandler.ts:7:5) at Object.customErrorHandlerFactory [as useFactory] (app.module.ts:30:10) at Object.factory (core.mjs:6288:38) at core.mjs:6189:43 at runInInjectorProfilerContext (core.mjs:867:9) at R3Injector.hydrate (core.mjs:6188:17) at R3Injector.get (core.mjs:6058:33) at injectInjectorOnly (core.mjs:911:40) at ɵɵinject (core.mjs:917:42)

pumpernikiell on Jan 17, 2024

Hi @mclack, I run yarn start which is ng serve --hmr --port 3000 --open=true. I don’t change anything else when I switch to "builder": "@angular-devkit/build-angular:browser" Yes, the error stops when comment out { provide: ErrorHandler, useFactory: errorHandlerFactory },

Maybe something to mention is in my angular.json is "aot": true,

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
...
}

Can’t share the project.

I’ve found a workaround:

{ provide: ErrorHandler, useClass: AppErrorHandler}

...

export class AppErrorHandler implements ErrorHandler {
   handleError(error: any) {
    Bugsnag.notify(error)
    console.error(error)
  }
}

Please let me know if you need something else from me.

mivanyna on Dec 21, 2023