@bluesky_tl/logger v0.0.1

Ohbug

推荐使用完全重写后的 ohbug，本项目已经废弃

简介

通过监听/主动捕获 error 以及性能信息，获取相关信息后执行特定操作(数据上传记录等)。

功能

错误捕获

可捕获的异常类型包括：

1. JavaScript执行错误
2. 资源加载错误
3. HTTP请求错误
4. 未catch处理的Promise错误

性能监控

可监控页面加载各个阶段所用时间、页面资源加载时间。

信息将于页面 load 事件时上报

错误上报

上报方法可自定义，上报时机分为：

1. 发生错误时立即上报错误
2. 页面卸载前上报。

性能信息上报

页面加载完成后上报

Todo

• 捕获websocket错误
• 设置采集率
• sourcemap定位压缩代码具体错误位置
• 页面性能监控
• 页面HTTP请求性能监控
• 页面资源加载性能监控

原理

• 通过 window.addEventListener，可捕获 JavaScript 执行错误，资源加载错误，未catch处理的Promise错误
• 通过改写 XMLHttpRequest / fetch 实现监听 HTTP 请求错误
• 页面性能时间

使用

script mode

<script src="https://unpkg.com/ohbug"></script>

<script>
  Ohbug.init({
    report(errorList) {
      // 上传错误至服务端
    }
  })
</script>

module mode (React)

1.安装

npm install ohbug --save

如果想用 yarn

yarn add ohbug

2.在 根组件文件中添加

import Ohbug from 'ohbug'

class Root extends React.Component {
  componentDidMount() {
    Ohbug.init({
      report(errorList) {
        // 上传错误至服务端
      }
    })
  }
}

主动捕获上报

针对一些特殊需求的错误 使用主动捕获(使用装饰器)

例如在 react 中

import { caughtError } from 'ohbug';

class Test extends React.Component {
  @caughtError // success
  send() {
    // ...
  }
}

请注意箭头函数使用 caughtError 捕获不到错误信息，例如

import { caughtError } from 'ohbug';

class Test extends React.Component {
  @caughtError // fail
  send = () => {
    // ...
  }
}

针对一些不能使用装饰器或自定义信息使用 reportInfo

import { reportInfo } from 'ohbug';

class Test extends React.Component {
  send() {
    try {
      // ...
    } catch(e) {
      reportInfo(e)
    }
  }
}

import { reportInfo } from 'ohbug';

class Test extends React.Component {
  hello() {
    reportInfo('hello')
  }
}

配置

使用方式

const others = {
  id: window.sessionStorage.getItem('XXX_ID'),
  nick: window.sessionStorage.getItem('XXX_NICK'),
};
function report(data) {
  ajax('url', JSON.stringify(data))
}
Ohbug.init({
  report,
  others,
});

注意

mode 属性

设置为 immediately 时，delay 时间内发生的错误将会统一收集并上报

设置为 beforeunload 时，会在卸载当前页面时上报，可能存在用户关闭或切换页面导致漏报问题。

常见的解决方案为发送同步 ajax 请求(会导致页面卡顿) 或 使用 navigator.sendBeacon() 异步上报(不支持 GET)，两种情况都存在弊端 实际生产环境视情况而定。

function report(data) {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/log", false); // false 表示同步
  xhr.send(data);
}
Ohbug.init({
  report,
});

function report(data) {
  navigator.sendBeacon("/log", data); // 默认发送 POST 请求
}
Ohbug.init({
  report,
});

ignore 属性

Ohbug 在捕获错误时会忽略 ignore 数组内的 url。

使用场景: 1. 可能频繁出错或不需上报的api。 2. 由于上报请求完全自定义，一旦上报请求发生错误，Ohbug无法判断错误来源，会导致无限循环上报，此时将上报的 url 添加入 ignore 数组内，忽略上报请求的错误。

include 属性

Ohbug 会调用传入函数, 当使用 reportInfo 时只捕获指定的信息.

配置:

function include() {
  if (window.user === 'frank') return true
  return false
}
Ohbug.init({
  include,
})

使用 reportInfo :

import { reportInfo } from 'ohbug';

class Test extends React.Component {
  hello() {
    reportInfo('hello', true) // 只有当前用户为 `frank` 时, 才会上报信息 'hello'
  }
}

错误类型

性能信息类型

License

MIT

Copyright (c) 2018 陈月半