bugsnag / bugsnag-angular Goto Github PK

Hi, I experience error when using angular cli build process. Don't really know how the build process works but there is a problem with ahead of time compilation.

Expected behavior

App works when built with angular cli ng build --prod. ng build --prod turns on --aot flag (ahead of time compilation) by default.

Observed behavior

Does not work with angular cli ng build --prod => throws Uncaught Error: No ErrorHandler. Is platform module (BrowserModule) included?.
Everything works fine with development version ng build and ng serve and production ng build --prod --aot=false.

Version

    "@angular/animations": "^5.1.2",
    "@angular/cli": "^1.6.2",
    "@angular/common": "^5.1.2",
    "@angular/compiler": "^5.1.2",
    "@angular/compiler-cli": "^5.1.2",
    "@angular/core": "^5.1.2",
    "@angular/forms": "^5.1.2",
    "@angular/http": "^5.1.2",
    "@angular/platform-browser": "^5.1.2",
    "@angular/platform-browser-dynamic": "^5.1.2",
    "@angular/platform-server": "^5.1.2",
    "@angular/router": "^5.1.2",
    "bugsnag-angular": "^1.0.1",
    "bugsnag-js": "^4.0.3",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.3",
    "hammerjs": "^2.0.8",
    "intl": "^1.2.5",
    "rxjs": "^5.5.6",
    "typescript": "2.4.2",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.18"

I'm having issues building my Angular 4.2 app with bugsnag-angular 2.x + bugsnag-js 4.6.x.
Looks like this is only occurring with the -prod or -aot flag.

ng build -prod
ERROR in Error: Metadata version mismatch for module PATH_TO_APP/node_modules/bugsnag-angular/dist/index.d.ts, found version 4, expected 3
    at StaticSymbolResolver.getModuleMetadata (PATH_TO_APP/node_modules/@angular/compiler/bundles/compiler.umd.js:25616:34)
    at StaticSymbolResolver._createSymbolsOf (PATH_TO_APP/node_modules/@angular/compiler/bundles/compiler.umd.js:25404:46)
    at StaticSymbolResolver.getSymbolsOf (PATH_TO_APP/node_modules/@angular/compiler/bundles/compiler.umd.js:25385:14)
    at PATH_TO_APP/node_modules/@angular/compiler/bundles/compiler.umd.js:24241:30
    at Array.forEach (<anonymous>)
    at extractProgramSymbols (PATH_TO_APP/node_modules/@angular/compiler/bundles/compiler.umd.js:24240:79)
    at AotCompiler.analyzeModulesAsync (PATH_TO_APP/node_modules/@angular/compiler/bundles/compiler.umd.js:23796:47)
    at CodeGenerator.codegen (PATH_TO_APP/node_modules/@angular/compiler-cli/src/codegen.js:32:14)
    at Function.NgTools_InternalApi_NG_2.codeGen (PATH_TO_APP/node_modules/@angular/compiler-cli/src/ngtools_api.js:73:30)
    at _donePromise.Promise.resolve.then (PATH_TO_APP/node_modules/@angular/cli/node_modules/@ngtools/webpack/src/plugin.js:391:44)
    at <anonymous>

Here's my code:

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// Import bugsnag-js and bugsnag-angular
import BugsnagErrorHandler from 'bugsnag-angular'
import bugsnag from 'bugsnag-js'

// configure Bugsnag ASAP, before any other imports
const bugsnagClient = bugsnag('API_KEY')

// create a factory which will return the bugsnag error handler
export function errorHandlerFactory() {
  return new BugsnagErrorHandler(bugsnagClient)
}

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I've wrapped this up in a sample app for easier debugging, any pointers would be amazing!

Expected behavior

I'm running an AOT-compiled server-side rendered Angular app with Bugsnag. I understand from this issue that SSR is not supported, but even if I provide the default Angular ErrorHandler in a server context, I still get the following error:

Observed behavior

> ts-node server.ts

/node_modules/bugsnag-angular/dist/index.js:11
import { ErrorHandler, Injectable } from "@angular/core";
       ^

SyntaxError: Unexpected token {
    at new Script (vm.js:74:7)
    at createScript (vm.js:246:10)
    at Object.runInThisContext (vm.js:298:10)
    at Module._compile (internal/modules/cjs/loader.js:646:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:689:10)
    at Module.load (internal/modules/cjs/loader.js:589:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:528:12)
    at Function.Module._load (internal/modules/cjs/loader.js:520:3)
    at Module.require (internal/modules/cjs/loader.js:626:17)
    at require (internal/modules/cjs/helpers.js:20:18)

It appears the distributed Bugsnag code relies on the import being compiled out by the angular compiler or something? Whatever the case, ts-node immediately crashes because the import / export isn't supported by Node. The SSR bundles are supposed to be imported using CommonJS requires which means I can't compile out the imports myself either.

// Leave this as require() since this file is built dynamically
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist-server/main');

Steps to reproduce

1. Follow Bugsnag Angular integration steps
2. Run a standard SSR app (e.g. this one)
3. Server application crashes

Version

• @angular/core 6.x, @angular/express-engine 6.x

Additional information

I considered conditionally importing bugsnag based on the isPlatformBrowser helper using import(), but Angular dependency injection doesn't support factories that return promises.

Expected behavior

No freeze of the application.

Observed behavior

When an error occurs in an angular component, the metadata gets collected about the component. This leads to the component being stringified. In some circumstances and with complex components, this process leads to circular references, which don't cause an error, but take a really long time to be finished, during which the application is frozen.

In its current state, bugsnag is not usable for us due to this issue.

Steps to reproduce

It's hard to give an example application in this case, basically any application complex and/or large enough will cause the issue.

Version

bugsnag-js: 4.6.3
bugsnag-angular: 2.0.1

Additional information

It would be great to have an option to disable the collection of angular metadata altogether.

Can't comment on Issues?

Some users have been unable to comment on Github issues when an adblocker extension is enabled.
We recommend temporarily disabling the extension, or if that fails, contacting [email protected].

Hi,
I tried to use this lib but when I throw an error in some bigger component meaning with more dependencies which have their own deps then I get

[bugsnag] TypeError: Converting circular structure to JSON
    at Object.stringify (<anonymous>)
    at stringify (bugsnag.js:796)
    at _$payload_20 (bugsnag.js:1756)
...

in other words, a report is not sent afterward because it is not even able to stringify it...

It would be nice to have all the info about a component but it is very dangerous as it can break a code and not send a report to bugsnag

the problematic part is:
https://github.com/bugsnag/bugsnag-angular/blob/master/src/index.ts#L24
and context as well

Hello,

I need to implement bugsnag inside angular 1.x. I had added this code of legacy-angular-support of bugsnag but not succeeded.

Is there anything I need to add.

Please help me to solve this issue.

Thank you so much in advance.

Version

Latest version

Observed behavior

Running the app in --prod gives an error: Uncaught Error: No ErrorHandler. Is platform module (BrowserModule) included?

Steps to reproduce

Run/build the example in production by doing:
ng serve --prod

Version

Angular CLI: 1.6.3
Node: 8.3.0
OS: darwin x64
Angular: 5.1.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.3
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.3
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.5.3
webpack: 3.10.0
"bugsnag-angular": "^1.0.2",
"bugsnag-js": "^4.0.3",```

Expected behavior

In our Angular project we have a shared.module.ts that is used in multiple modules(example: backend portal & website). When implementing the bugsnag error handler, errors from the application are gathered by bugsnag and send to the server.

Observed behavior

Webpack gives a ok status. Errors are send to bugsnag but website keeps hanging with white screen with the following error:

Uncaught Error: 
Can't resolve all parameters for BugsnagErrorHandler: (?).
    at syntaxError (vendor.bundle.js:51774)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getDependenciesMetadata (vendor.bundle.js:65111)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getTypeMetadata (vendor.bundle.js:64979)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getInjectableMetadata (vendor.bundle.js:64965)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getProviderMetadata (vendor.bundle.js:65255)
    at vendor.bundle.js:65184
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getProvidersMetadata (vendor.bundle.js:65145)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (vendor.bundle.js:64800)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleSummary (vendor.bundle.js:64653)

This error is also send to bugsnag so the bugsnag errorhandler is working but generating it's own errors. This error also occurs if only the default errorhandler is implemented without an useClass:

providers: [
ErrorHandler]

Steps to reproduce

• Angular application
• Installation through NPM in docker
• Following instructions from documentation:

import bugsnag from 'bugsnag-js';
import createPlugin from 'bugsnag-angular';
import {NgModule, ErrorHandler, Injectable} from "@angular/core";

// Configure Bugsnag before any other imports
const bugsnagClient = bugsnag('api_key');
const BugsnagErrorHandler = bugsnagClient.use(createPlugin());

providers: [
        {provide:ErrorHandler, useClass:BugsnagErrorHandler},
        ]

Version

• Angular 4.1.0
• bugsnag-angular 1.0.2
• bugsnag-js 4.1.0

I posted this in the bugsnag-js project, but this seems to be related to angular.
The reason i posted it in bugsnag-js before, is due to the bugsnag.js logs just before freezing (see below)

bugsnag/bugsnag-js#337

Comment from other issue:

It seems that an exception in the ngOnInit function in angular, is bad for business, but before I included bugsnag.js and bugsnag-angular, it would just break routing, and you'd have to reload the page. But after including bugsnag, it completely freezes the browser tab, and you'd have to resort to the chrome task manager to close the tab, and I havent found a way to close the tab in safari.,

Expected behavior

I added a text exception:
throw Error('test exception');
in my anuglar application component ngInit method, and expect the application to fail, and then send the error to bugsnag via the angular exception handler.

Observed behavior

Instead my browser freezes, and the last thing i see in the console is:

  | decirc | @ | bugsnag.js:1955
-- | -- | -- | --
  | decirc | @ | bugsnag.js:1955
  | decirc | @ | bugsnag.js:1955
  | decirc | @ | bugsnag.js:1955
  | decirc | @ | bugsnag.js:1955
  | decirc | @ | bugsnag.js:1955
  | decirc | @ | bugsnag.js:1955
  | decirc | @ | bugsnag.js:1955
  | decirc | @ | bugsnag.js:1955
  | decirc | @ | bugsnag.js:1955
  | decirc | @ | bugsnag.js:1955
  | decirc | @ | bugsnag.js:1955
  | decirc | @ | bugsnag.js:1955
  | decirc | @ | bugsnag.js:1955
  | decirc | @ | bugsnag.js:1955
  | decirc | @ | bugsnag.js:1955
  | decirc | @ | bugsnag.js:1955
  | decirc | @ | bugsnag.js:1955
  | decirc | @ | bugsnag.js:1955
  | decirc | @ | bugsnag.js:1955
  | decirc | @ | bugsnag.js:1955
  | decirc | @ | bugsnag.js:1955
  | decirc | @ | bugsnag.js:1955
  | stringify | @ | bugsnag.js:1920
  | _$payload_25 | @ | bugsnag.js:1965
  | sendReport | @ | bugsnag.js:2048
  | notify | @ | bugsnag.js:1208
  | BugsnagErrorHandler.handleError | @ | index.js:33
  | (anonymous) | @ | core.js:5914
  | ZoneDelegate.invoke | @ | zone.js:388
  | Zone.run | @ | zone.js:138

Steps to reproduce

I followed the guide on how to integrate bugsnag in angular, and it works fine when i throw an exception in the mentioned component constructor, but when I do it in the ngInit method, it freezes the app completely, this happens in both safari and chrome.

The bugsnag notify method example, from the docs, also works fine.

Version

"bugsnag-angular": "^2.0.0",
"bugsnag-js": "^4.4.0",