Angular build failes with Ivy renderer due to error in bugsnag

[Lornot]

Angular CLI: 8.3.24
Node: 12.15.0
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, elements
... forms, platform-browser, platform-browser-dynamic
... platform-server, router

Package Version

@angular-devkit/architect 0.803.24
@angular-devkit/build-angular 0.803.24
@angular-devkit/build-optimizer 0.803.24
@angular-devkit/build-webpack 0.803.24
@angular-devkit/core 8.3.24
@angular-devkit/schematics 8.3.24
@angular/cdk 8.2.3
@angular/cli 8.3.24
@angular/material 8.2.3
@ngtools/webpack 8.3.24
@schematics/angular 8.3.24
@schematics/update 0.803.24
rxjs 6.5.4
typescript 3.5.2
webpack 4.39.2

ERROR in Attempted to get members of a non-class: "class BugsnagErrorHandler extends ErrorHandler {
    constructor(bugsnagClient) {
        super();
        this.bugsnagClient = bugsnagClient;
    }
    handleError(error) {
        const handledState = {
            severity: "error",
            severityReason: { type: "unhandledException" },
            unhandled: true,
        };
        const report = new this.bugsnagClient.BugsnagReport(error.name, error.message, ```
this.bugsnagClient.BugsnagReport.getStacktrace(error), handledState, error);
        if (error.ngDebugContext) {
            report.updateMetaData("angular", {
                component: error.ngDebugContext.component,
                context: error.ngDebugContext.context,
            });
        }
        this.bugsnagClient.notify(report);
        ErrorHandler.prototype.handleError.call(this, error);
    }
}"

[xljones]

Hi @Lornot, I've built a simple application to test Bugsnag using the dependency versions which you have quoted in your report. However, I am currently unable to reproduce the error report that you're getting. I am successfully getting error reports for both handled and unhandled events.

It seems that Ivy is an opt-in for this version of Angular, does this build work if you disable the Ivy renderer? I had enabled it in tsconfig.app.json by adding

  "angularCompilerOptions": {
    "enableIvy": true
  }

Are you enabling Ivy in the same way?

Do you get the same error on a newer version of Angular (9.x+) which supports Ivy out of the box? What are the steps leading up to this error being thrown?

Could you also please let me know which version of the Bugsnag notifier are you using?

$ npm view @bugsnag/js version
$ npm view @bugsnag/core version
$ npm view @bugsnag/plugin-angular version

I can only find one reference to the code above in our bugsnag-js library. However, it is subtly different to the error reported. Have you made any local modifications to the library, or are you using a forked version of the notifier?

[Lornot]

Hi @xander-jones . It works with "enableIvy": false, but Ivy is the most expected feature of the new angular so we want to enable it and want it work with all our dependencies.
npm view @bugsnag/js version - 6.5.2
npm view @bugsnag/core version - 6.5.0
npm view @bugsnag/plugin-angular version - 6.5.2
The code above is in @bugsnag/plugin-angular/dist/es5/index.js file.
It looks like it doesn't work with "target": "es5".
You may reproduce it by creating a new angular project with 'ng new' (8.3.25 angular cli), adding bugsnag packages to package.json, adding bugsnag to app.module.ts as described in bugsnag docs,
changing target in tsconfig.json to 'es5' and adding "enableIvy": true to 'angularCompilerOptions'.

[xljones]

Hi again @Lornot, I've managed to recreate the issue you were seeing. Thank you for your reproduction instructions. When building a fresh project directly with es5 as the TypeScript target, this results in:

$ ng serve
...
Compiling @bugsnag/plugin-angular : module as esm5
ERROR in Attempted to get members of a non-class: "class BugsnagErrorHandler extends ErrorHandler {
    constructor(bugsnagClient) {
        super();
        this.bugsnagClient = bugsnagClient;
    }
    handleError(error) {
        const handledState = {
            severity: "error",
            severityReason: { type: "unhandledException" },
            unhandled: true,
        };
        const report = new this.bugsnagClient.BugsnagReport(error.name, error.message, this.bugsnagClient.BugsnagReport.getStacktrace(error), handledState, error);
        if (error.ngDebugContext) {
            report.updateMetaData("angular", {
                component: error.ngDebugContext.component,
                context: error.ngDebugContext.context,
            });
        }
        this.bugsnagClient.notify(report);
        ErrorHandler.prototype.handleError.call(this, error);
    }
}"
i ｢wdm｣: Failed to compile.

The reason appears to be when we're selecting the plugin distribution to use, it's using @bugsnag\plugin-angular\dist\esm\index.js, when it should be using @bugsnag\plugin-angular\dist\es5\index.js. for your target selection. I have managed to temporarily work around this by renaming the esm directory esm_, and renaming es5 to esm. Alternatively, you can move the contents of the es5 directory into esm.

I will raise this internally for our teams to take a look into.

[abigailbramble]

We have now released a fix for this in v7.3.3.