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

Question

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

mivanyna opened this issue 9 months ago · 17 comments

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'

Answer 1 · 2023-12-21T16:10:43.000Z

Hi @mivanyna

I am currently unable to reproduce the behaviour you are seeing. In order for us to investigate this further, can you please provide some more details?

In step 3, can you please explain exactly how you are starting the app? What commands do you run?
Are you changing anything else when switching to "builder": "@angular-devkit/build-angular:browser"?
Does the error stop when mentions of BugSnag are commented out?

If possible, would you also be willing to share the full BugSnag configuration in your app (the entire app.module file would be particularly useful), alongside your full angular.json and package.json files? You can redact any sensitive info as you please.

As this is a public thread, you are also welcome to share these details with us directly by contacting us at support@bugsnag.com and opening a support ticket, referencing this issue: #2057

Answer 2 · 2023-12-21T16:49:15.000Z

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.

Answer 3 · 2023-12-22T09:51:35.000Z

Hi @mclack, have added the link to the project https://stackblitz.com/edit/angular-ivy-7x7fkm?file=src%2Fapp%2Fapp.module.ts

Answer 4 · 2024-01-12T09:06:21.000Z

Hi, are there any updates?

Answer 5 · 2024-01-17T14:04:44.000Z

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)

Answer 6 · 2024-01-31T10:59:03.000Z

Hi @mclack do you need anything else from my side for this issue?

Answer 7 · 2024-02-23T16:54:00.000Z

Hi @mivanyna and @pumpernikiell

Please accept our apologies for the delay in response here.

We are investigating this now, and will post any updates or questions on this thread as soon as we have them.

Thank you for your patience.

Answer 8 · 2024-02-25T11:20:21.000Z

No rush! We can live w/o good error logging :)

Answer 9 · 2024-02-27T10:49:46.000Z

Hi @mivanyna and @pumpernikiell

Thanks for your continued patience while we've investigated this issue.

We were unable to reproduce the error on our end, both using a separate Angular 17 app, and the app provided by @mivanyna.

@mivanyna, is the code you've shared up to date, and are the dependencies exactly the same as you're currently using in your app? When we've tried to run the repro code, we got dependency conflicts between Angular 17 and several other dependencies. Could you please tell us more about how you've upgraded your app, and which version you used prior to Angular 17?

@pumpernikiell could you also let us know which version of Angular you have upgraded from? Would you also be willing to share an app which reproduces this error, similar to the one here?

Answer 10 · 2024-02-27T10:54:24.000Z

Hi @mclack , I'm opening the provided link and it's still reproducing:

There is an error logged in the console.

Answer 11 · 2024-02-29T10:37:59.000Z

Hi @mivanyna

Thank you for the clarification.

After looking into this a bit more, we've realised that this error does indeed appear when opening the app on StackBlitz. However, we initially downloaded the app and attempted to build/run this locally, and when doing this, we noticed different errors which were regarding dependency conflicts instead.

Due to the above, we believe that this issue could be due to the dependency conflicts we have observed, and it's possible that the debugging mechanisms on StackBlitz are potentially hiding these conflicts.

Can you confirm whether you have only seen this error when running the app within StackBlitz?
Am I right in thinking you upgraded your app to Angular 17 from a different version? If so, did you only begin to see this error after upgrading?
Can you run this locally and let us know whether you see different errors? If so, would you be able to resolve any dependency conflicts, and then attempt to run this on StackBlitz again?

Answer 12 · 2024-02-29T11:45:36.000Z

Hi @mclack,

This error appears only after the start of the app.
Yes, I have upgraded from angular 16 to angular 17.
Please read the steps in the issue and following my answers:
step 2: Set "builder": "@angular-devkit/build-angular:browser-esbuild", in angular.json
Just create a simple project and follow the steps, please.
Everything is specified in the issue here and in comments below.

Answer 13 · 2024-02-29T12:15:08.000Z

Hi @mclack,

This is what you need to do for the downloaded project:

Update angular and bugsnag to the latest version in package.json
Use yarn to install
styles.scss - remove imports of the styles - it should be empty
tscongif.json - change "target": "ES2022",
start the app using yarn start
open the http://localhost:4200/
check in the browser's console the error:

Please let me know if there are any questions

Answer 14 · 2024-03-19T11:09:17.000Z

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.

Answer 15 · 2024-03-29T16:15:11.000Z

it works, thanks

Answer 16 · 2024-04-05T08:00:48.000Z

Hi!
I've applied your solution @mclack - it fixes problem with the error handler, but right now any errors are not sent to the bugsnag

Answer 17 · 2024-04-11T14:36:07.000Z

Hi @pumpernikiell

Are you experiencing any other errors in your app? Can you also check whether any network requests are being made to BugSnag? If so, what are the status of these requests? E.g. 200 (Accepted), 408 (Request Timeout). Additionally, can you please check whether the requests are being made to https://notify.bugsnag.com/.

If you're not doing this already, could you also please try sending a handled event to BugSnag and let us know the outcome of this.

If you're not seeing any requests being made, could you please share some code snippets of how you have configured BugSnag in your app? As this is a public thread, please feel free to open a ticket with us directly by contacting support@bugsnag.com.