监控 Angular 4

1. 安装fundebug-javascript

  1. npm install fundebug-javascript --save

2. 接入插件

修改app.module.ts

  1. import { ErrorHandler } from '@angular/core';
  2. import * as fundebug from "fundebug-javascript";
  3. fundebug.apikey = 'API-KEY';
  5. // 定义FundebugErrorHandler
  6. export class FundebugErrorHandler implements ErrorHandler {
  7.    handleError(err:any) : void {
  8.      fundebug.notifyError(err);
  9.    }
  10. }
  12. // 使用FundebugErrorHandler
  13. @NgModule({
  14.    // 其他代码
  15.    providers: [ { provide: ErrorHandler, useClass: FundebugErrorHandler } ]
  16.  })

其中，获取apikey需要免费注册帐号并且创建项目，注意选择对应的项目类型。

注意：定义FundebugErrorHandler的代码必须要放在@Ngmodule之前，否则会出现白屏，接入失败。

3. 过滤 status 为 0 的 HTTP 上报

由于 Angular 自带框架提供的 HTTPClient 会导致 Fundebug 捕获的所有 HTTP 请求的 status 为 0，为了防止误报，建议在插件配置的时候把 status 为 0 的上报过滤。 配置方法如下：

  1. fundebug.init({
  2.     apikey: "YOUR-API-KEY",
  3.     filters: [
  4.         {
  5.             res: {
  6.                 status: /^0$/,
  7.             },
  8.         },
  9.     ],
  10. });

参考

SystemJS

如果您使用 SystemJS, 那么需要为fundebug-javascript配置相应的路径才能成功。

  1. System.config({
  2.     paths: {
  3.         // paths serve as alias
  4.         "npm:": "node_modules/",
  5.     },
  6.     // map tells the System loader where to look for things
  7.     map: {
  8.         /* ... 其他配置 ...*/
  10.         // other libraries
  11.         /* ... 其他配置 ...*/
  12.         "fundebug-javascript":
  13.             "npm:fundebug-javascript/release/fundebug.x.x.x.min.js",
  14.     },
  15. });

注意: fundebug.x.x.x.min.js中的x.x.x要改为插件的版本号，例如fundebug.0.3.1.min.js。