Angular esbuild builder not compatible with BugsnagErrorHandler

[JesseZomer]

Describe the bug

I'm trying to use Angular's new build system, however when starting the application in development mode I get the following error:

TypeError: Class constructor ErrorHandler cannot be invoked without 'new' at new BugsnagErrorHandler2 (index.js:28:28) at Object.useFactory (main.ts:117:24)

When I go to the node_modules/@bugsnag/plugin-angular/dist folder I see a esm5 and esm2015 folder. Apperently the esm5 folder gets used, but my understanding is that the esm2015 folder should be used.

Now I don't know if that's a bugsnag bug, or that the bug is somewhere else or even that there is a bug and not just some incorrect setting, however this is the default for new angular projects. See the example repo where the only thing I've done is add bugsnag, added the BugsnagErrorHandler and now I can't load my application.

Steps to reproduce

1. npm start
2. go to http://localhost:4200/
3. see console

Environment

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

Example Repo

https://github.com/JesseZomer/esbuild-bugsnag

[RafalSzczuka]

same issue here :(

[samuelkrupik]

You can change the import of the ErrorHandler like this

import { BugsnagErrorHandler } from '@bugsnag/plugin-angular/dist/esm2015';

[RafalSzczuka]

Unfortunately, it's not solving the issue:

[RobertoSmartBear]

Hi @RafalSzczuka 👋🏻 ,

Sorry for a delay in the response. Is your app configuration the same as the one that OP nickname here has shared in his initial message? If not can you share the differences, and BugSnag configuration?

Please remember that this thread is public, and if you have any data you don’t want to share publicly, you can always reach out to us at [email protected]

[RafalSzczuka]

Hello @RobertoSmartBear

My environment:
@angular/core: 17.1.2
@bugsnag/browser-performance: 2.5.0
@bugsnag/js: 7.23.0
@bugsnag/plugin-angular: 7.23.0

Node version: 20.11.0

I'm using esbuild in angular configuration.

I've done some workaround to make it work with esbuild - created custom error handler service that works with new angular version:

@Injectable()
export class CustomBugsnagErrorHandler implements ErrorHandler {
  public bugsnagClient!: Client;

  constructor() {
    const client = Bugsnag.start(BUGSNAG_BROWSER_CONFIG);
    BugsnagPerformance.start(BUGSNAG_PERFORMANCE_CONFIG);

    if (client) {
      this.bugsnagClient = client;
    }
  }

  public handleError(error: any): void {
    const handledState = {
      severity: 'error',
      severityReason: { type: 'unhandledException' },
      unhandled: true,
    };

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

    console.error(error);
    this.bugsnagClient._notify(event);
  }
}

And provided this one in my app configuration:

[hannah-smartbear]

Hi @RafalSzczuka ,

Using the example app shared by @JesseZomer but with the environment/versions you have specified, I have been unable to reproduce the error you are seeing. I also disabled the use of the Ahead Of Time Compiler, as it appears from the error message that you are using the Just in time compiler, but I am still unable to reproduce the error.

Are you able to provide a stripped down reproduction example app, like @JesseZomer shared in their initial message?

[RafalSzczuka]

Can you provide exact initial configuration? Maybe docs are outdated.
I've created brand new app, this is the package.json:

{
  "name": "bugsnag-reproduction",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^18.0.0",
    "@angular/common": "^18.0.0",
    "@angular/compiler": "^18.0.0",
    "@angular/core": "^18.0.0",
    "@angular/forms": "^18.0.0",
    "@angular/platform-browser": "^18.0.0",
    "@angular/platform-browser-dynamic": "^18.0.0",
    "@angular/router": "^18.0.0",
    "@bugsnag/browser-performance": "^2.7.0",
    "@bugsnag/js": "^7.25.0",
    "@bugsnag/plugin-angular": "^7.25.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^18.0.5",
    "@angular/cli": "^18.0.5",
    "@angular/compiler-cli": "^18.0.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.4.2"
  }
}

and this is my app config:

import { ApplicationConfig, ErrorHandler, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import Bugsnag from '@bugsnag/js'
import { BugsnagErrorHandler } from '@bugsnag/plugin-angular'

Bugsnag.start('YOUR_API_KEY')

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

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    {
      provide: ErrorHandler,
      useFactory: errorHandlerFactory
    }
  ]
};

And this is the result in the console:

[DevinloperNL]

I am not getting the errors in this thread, but I am also having trouble with the new angular esbuild builder with bugsnag. Production builds seem fine, but I cannot run the dev-server with ng serve using @angular-devkit/build-angular:dev-server

I am getting this error:

[hannah-smartbear]

Hi @RafalSzczuka

Thanks for providing that additional information. While I am able to reproduce the error you are seeing TypeError: Class constructor ErrorHandler cannot be invoked without 'new', I am still not able to reproduce the error message you are seeing here when using import { BugsnagErrorHandler } from '@bugsnag/plugin-angular/dist/esm2015';.

In terms of why the plugin is using the esm5 folder instead of the esm2015 folder by default, I have raised this with our engineers and I will post on this thread when there is an update.

@DevinloperNL, please could you send us some screenshots of how you are importing @bugsnag/browser? Please feel free to reach out to us at [email protected] if you would rather not share these screenshots publicly.

[toniewypada]

Hey @RafalSzczuka 👋🏻,

our development team investigated the issue with TypeError: Class constructor ErrorHandler cannot be invoked without ‘new' at new BugsnagErrorHandler2 and it looks like when you’re using new build system running ng serve the build system picks the entry from browser rather than es2015 in the package.json and therefore resolves to the es5 build.

We are working on a fix, and in the meantime we can suggest a workaround for you, which is disabling cache by adding the following snippet to your angular.json file:

"cli": {
    "cache": {
      "enabled": false
    }
  },

If you have further questions about this, please let us know!