ld-embed v1.0.3

ld-embed.js

一个web异常监控埋点包

介绍

旨在为多项目提前发现异常点，保证了项目的稳定和质量

可以收集系统捕获异常和手动上报数据。

其中异常包括 unCaught 自动捕获js异常、httpError 接口异常、sourceError 静态资源加载异常、unhandledRejection 未处理promise异常、handledRejection 已处理promise异常、caught 手动上报异常、warn 手动上报警告信息、info 手动上报日志信息。

Installation and Usage

安装库 npm install ld-embed

ES6

import LdEmbed from 'ld-embed';

new LdEmbed({ ... })

script

可以作为独立脚本加载，也可以通过AMD加载器加载

静态引入

// 埋点引入
<script src="/static/js/LdEmbed.min.js"></script>
<script type="text/javascript">
  new LdEmbed({ ... })
</script>

API

埋点属性提供了apikey 、环境禁用设置、异常上传模式、自定义字段收集等配置信息

new LdEmbed({
  silentPromise: true,
  apikey: "API-KEY"
  reportMode: 'onErrorOffline',
  onError: (errorInfo: ErrorInfo) => {
    // 处理单个异常上传
  },
  onErrorBatch: (errorInfoBatch: ErrorInfoBatch) => {
    const errorInfos = errorInfoBatch.list
    // 处理多个异常上传
  },
})

ErrorInfo

onError onErrorOffline 回调函数第一个参数的属性

ErrorInfoBatch

onErrorBatch 回调函数第一个参数的属性

框架错误

Vue

如果你使用的是Vue，那么在new前需要把类挂载在window的Vue上。包里检测到有全局Vue将重写Vue.config.errorHandler()

window.Vue = Vue

new LdEmbed({ ... })

AngularJS 1.x

AngularJS通过exceptionHandler捕捉所有未捕获的异常。

// AngularJS错误处理程序
// 需自定义错误类型（AngularError）
angular.module('loggerApp').config(function ($provide) {
  function AngularError(message, statck) {
    this.name = 'AngularError';
    this.message = message || 'unknow error';
    this.stack = statck || (new Error()).stack;
  }
  AngularError.prototype = Object.create(Error.prototype);
  AngularError.prototype.constructor = AngularError;

  // 监控日志
  $provide.decorator('$exceptionHandler', function ($delegate) {
    return function (exception, cause) {
      setTimeout(function () {
        $delegate(exception, cause);
        throw new AngularError(exception.message, exception.stack)
      }, 100)
    };
  });
});

手动上报

需要代码中主动上报业务相关错误 建议挂载到全局对象上

// 实例化的对象挂载都 global 上
window.Rebugger = new LdEmbed({ ... })

// 使用日志对象时必须先判断该对象是否存在
if ( Rebugger ) {
  ...
  Rebugger.上报方法(ErrorInfo);
}

// 安全使用 添加try catch
try {
  if ( Rebugger ) {
    ...
    Rebugger.上报方法(ErrorInfo);
  }
} catch (error) {
    
}

1、日志收集

Rebugger.reportInfo(errorInfo);

2、警告信息

Rebugger.reportWarning(errorInfo);

3、http请求异常

Rebugger.reportHttpError(errorInfo);

4、js异常收集

Rebugger.reportError(errorInfo);

5、promise异常上报

Rebugger.reportHandledRejection(errorInfo);