ld-embed

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