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
    // 处理多个异常上传
  },
})

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | apikey | 必填，用于项目区分 | string | - | | silent | 是否禁用rebugger | boolean | false | | silentPromise | 是否收集Promise异常 | boolean | false | | reportMode | 异常上传模式,可选值为 onError 立即上传。 byNum 按天存储满多少个上传。 byDay 按天上传。onErrorOffline 立即上报且支持线下缓存 | string | onError | | reportNum | byNum上传模式满n个上传数据，缓解服务端压力 | number | 10 | | limitNum | byDay上传模式默认超过20个会主动上传数据 | number | 20 | | onError | 上传模式为 onError onErrorOffline 时，接收报错信息 | (error: ErrorInfo) => {} | - | | onErrorBatch | 上传模式为 byDay byNum 时，接收报错信息 | (error: ErrorInfoBatch) => {} | - | | silentVideo | 是否开启用户行为录制, 异常场景还原 ——— 待开发 | boolean | false |

ErrorInfo

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

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | apikey | 必填，用于项目区分 | string | - | | screenInfo | 窗口信息，详细说明 | string | - | | ip | 当前网络IP地址 | string | - | | cityNo | IP省份代码 | string | - | | cityName | IP省份名称 | string | - | | width | 访问者屏幕宽度像素 | number | - | | height | 访问者屏幕高度像素 | number | - | | colorDepth | 硬件的色彩分辨率，详细说明 | string | - | | pixelDepth | 屏幕的像素深度 | string | - | | language | 浏览器语言 | string | - | | browser | 浏览器名称 | string | - | | coreVersion | 浏览器版本号 | string | - | | OS | 浏览器平台（操作系统） | string | - | | agent | 浏览器发送到服务器的用户代理报头（user-agent header） | string | - | | url | 报错页面当前URL | string | - | | online | 浏览器是否在线 | boolean | - | | env | 当前项目环境 dev test pre | string | - | | name | 报错类型 SyntaxError ReferenceError TypeError RangeError EvalError URIError，详细说明，最大长度254 | string | - | | message | 有关错误信息，最大长度2040 | string | - | | fileName | 引发此错误的文件的路径. | string | - | | lineNumber | 抛出错误的代码在其源文件中所在的行号 | string | - | | columnNumber | 引发此错误的文件行中的列号 | string | - | | componentName | Vue框架 报错组件名称 | string | - | | type | 错误类型 unCaught sourceError httpError | string | - | | emitTime | 当前设备时间 | Date | - | | stack | 函数的堆栈追踪字符串，最大长度60000 | string | - | | src | 资源加载异常时，所请求的资源地址 | string | - | | tagName | 资源加载异常时，节点的标签. 例 script img 等 | string | - | | selector | 节点在文档里的选择器位置 | string | - | | outerHTML | 节点的完整HTML | string | - | | status | Promise异常和资源异常的HTTP请求错误码 | string | - | | statusText | HTTP请求错误描述 | string | - |

ErrorInfoBatch

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

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | list | 错误信息的数组 | ErrorInfo[] | - |

框架错误

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);