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

[mivanyna]

Describe the bug

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

Steps to reproduce

1. Have in app.module setup like in documentation:

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

In the module providers:

{ provide: ErrorHandler, useFactory: errorHandlerFactory },

2. Set "builder": "@angular-devkit/build-angular:browser-esbuild", in angular.json
3. Start the app
4. 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'

[mclack]

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 [email protected] and opening a support ticket, referencing this issue: #2057

[mivanyna]

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]

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

[mivanyna]

Hi, are there any updates?

[pumpernikiell]

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)

[mivanyna]

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

[mclack]

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.

[mivanyna]

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

[mclack]

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?

[mivanyna]

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

There is an error logged in the console.

[mclack]

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?

[mivanyna]

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.

[mivanyna]

Hi @mclack,

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

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

Please let me know if there are any questions

[mclack]

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.

[mivanyna]

it works, thanks

[pumpernikiell]

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

[mclack]

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 [email protected].

[JJWesterkampAtEndeavour]

I'm experiencing the same issue.

FWIW: The issue appears to be caused by the following:

The resolved module for @bugsnag/plugin-angular is in my case @bugsnag/plugin-angular/dist/esm5/index.js, which has the following code in it:

import { ErrorHandler, Injectable } from '@angular/core';
import Bugsnag, { Client } from '@bugsnag/js';
// zones are optional, so we need to detect if they are being used
// see https://angular.io/guide/zone#noopzone
var isNgZoneEnabled = typeof Zone !== 'undefined' && !!Zone.current;
var BugsnagErrorHandler = /** @class */ (function (_super) {
    __extends(BugsnagErrorHandler, _super);
    function BugsnagErrorHandler(client) {
        var _this = _super.call(this) || this;
        if (client) {
            _this.bugsnagClient = client;
        }
        else {
            _this.bugsnagClient = Bugsnag._client;
        }
        return _this;
    }
    BugsnagErrorHandler.prototype.handleError = function (error) {
        var handledState = {
            severity: 'error',
            severityReason: { type: 'unhandledException' },
            unhandled: true
        };
        var event = this.bugsnagClient.Event.create(error, true, handledState, 'angular error handler', 1);
        if (error.ngDebugContext) {
            event.addMetadata('angular', {
                component: error.ngDebugContext.component,
                context: error.ngDebugContext.context
            });
        }
        this.bugsnagClient._notify(event);
        ErrorHandler.prototype.handleError.call(this, error);
    };
    BugsnagErrorHandler = __decorate([
        Injectable(),
        __metadata("design:paramtypes", [Client])
    ], BugsnagErrorHandler);
    return BugsnagErrorHandler;
}(ErrorHandler));
export { BugsnagErrorHandler };

This code literally imports ErrorHandler from @angular/core. At runtime, the module @angular/core/fesm2022/core.mjs is resolved for this import, which provides ErrorHandler as a Javascript class. The error is thrown at the line var _this = _super.call(this) || this; in the BugsnagErrorHandler constructor function. It calls _super without new which is illegal because _super is a class.

---

I presume the issue can temporarily be circumvented by setting the target to ES5 in the angular project's tsconfig, but that's a pretty unacceptable situation given that will produce more bloated and less performant code.

---

On the side of the @bugsnag/plugin-angular package, the problem can be fixed by following the latest package development standards, i.e. building a esm2022 as well as a fesm2022 distribution. The Angular compiler will itself down-level these formats as required by respective Angular projects.

[mclack]

Hi @JJWesterkampAtEndeavour

Thanks for highlighting that.

We are looking into the fesm distribution, and have added a task to our backlog to include this. As such, I'm going to reopen this issue, and while we don't currently have an ETA, we will make sure to share any updates when we have them.