No Packages, Mate

    hibug

    0.1.2 • Public • Published

    Welcome to hibug 👋

    npm version Build Status downloads JS Gzip Size issue Coverage Status

    简介

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

    功能

    错误捕获

    可捕获的异常类型包括:

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

    性能监控

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

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

    错误上报

    上报方法可自定义,上报时机分为:

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

    性能信息上报

    页面加载完成后上报

    Todo

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

    原理

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

    使用

    script mode

    <script src="https://unpkg.com/hibug"></script>
     
    <script>
      hibug.init({
        report(errorList) {
          // 上传错误至服务端
        }
      })
    </script> 

    module mode (React)

    1.安装

    npm install hibug --save

    如果想用 yarn

    yarn add hibug

    2.在 根组件文件中添加

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

    主动捕获上报

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

    例如在 react

    import { caughtError } from 'hibug';
     
    class Test extends React.Component {
      @caughtError // success
      send() {
        // ...
      }
    }

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

    import { caughtError } from 'hibug';
     
    class Test extends React.Component {
      @caughtError // fail
      send = () => {
        // ...
      }
    }

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

    import { reportInfo } from 'hibug';
     
    class Test extends React.Component {
      send() {
        try {
          // ...
        } catch(e) {
          reportInfo(e)
        }
      }
    }
    import { reportInfo } from 'hibug';
     
    class Test extends React.Component {
      hello() {
        reportInfo('hello')
      }
    }

    License

    MIT

    Copyright (c) 2019 Wei Changhua

    Install

    npm i hibug

    DownloadsWeekly Downloads

    2

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    115 kB

    Total Files

    7

    Last publish

    Collaborators

    • fullbook