监控 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';
  4. // 定义FundebugErrorHandler
  5. export class FundebugErrorHandler implements ErrorHandler {
  6. handleError(err:any) : void {
  7. fundebug.notifyError(err);
  8. }
  9. }
  10. // 使用FundebugErrorHandler
  11. @NgModule({
  12. // 其他代码
  13. providers: [ { provide: ErrorHandler, useClass: FundebugErrorHandler } ]
  14. })

其中,获取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. /* ... 其他配置 ...*/
  9. // other libraries
  10. /* ... 其他配置 ...*/
  11. "fundebug-javascript":
  12. "npm:fundebug-javascript/release/fundebug.x.x.x.min.js",
  13. },
  14. });

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