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

akira0705 / ld-embed Goto Github PK

ld-embed's Introduction

ld-embed.js

介绍

Installation and Usage

ES6

script

静态引入

API

ErrorInfo

ErrorInfoBatch

框架错误

Vue

AngularJS 1.x

手动上报

ld-embed's People

Contributors

Stargazers

Watchers

Recommend Projects

Recommend Topics

Recommend Org