log-reporting
TypeScript icon, indicating that this package has built-in type declarations

1.3.1 • Public • Published
wxz

vue vue

log-reporting (日志上报)

🔈 注意事项

本系统的开发目的很简单,就是为了在部分情况下搜集前端的异常日志,用于分析异常情况; 如:线上环境的项目我们会吧一些日志删除,如果前端报错那么日志是首选, 这样的情况我们不知道是哪里的报错导致页面崩溃的; 那么开发这款工具常规情况下能解决大部分的问题;

🔈 日志搜集范围

  1. 资源:资源地址不正确或不存在导致的资源异常
  2. 代码:搜集报错信息,页面的崩溃等等;
  3. 请求:请求参数错误,访问地址不存在,异常拦截
  4. 额外添加功能:支持录制自定义时间的视频,但是最大时间不能超过1分钟;

🔈 如何使用

需要克隆下载该项目, 执行命令pnpm run build, 之后会在根目录dist文件下看到打包的对应的文件信息; 根据不同平台引入即可;

下面代码示例为浏览器的使用:

<script src="dist/index.umd.js"></script>

<script>
    logReporting.init({
        // 上报地址
        dsn: 'http://localhost:8888/postLog',
        // 是否开启调试, 控制台会打印出日志信息
        debug: false,
        // 上报方式:fetch sendBeacon
        logMethod: 'fetch', 
        // 配置参数
        config: {
            // 是否开启录制, 可以录制报错前20s的视频
            isRecord: true,
            // 录制的时间(20s), 最大不能超过1分钟
            recordTime: 20 * 1000,
            // 页面准备好,是否就立即监听
            watchReady: true,
            // 监听js
            watchJsError: true,
            // 监听资源报错
            watchSource: true,
            // 监听请求报错
            watchAxios: true,
        }
    })
</script>

vue中使用, pnpm install log-reporting 安装依赖

main.js中引入

import {logReporting} from 'log-reporting'
logReporting.init({
    // 上报地址
    dsn: 'http://localhost:8888/postLog',
    // 是否开启调试, 控制台会打印出日志信息
    debug: true,
    // 上报方式:fetch sendBeacon
    logMethod: 'fetch',
    // 配置参数
    config: {
        // 是否开启录制, 可以录制报错前20s的视频
        isRecord: true,
        // 录制的时间(20s), 最大不能超过1分钟
        recordTime: 20 * 1000,
        // 页面准备好,是否就立即监听
        watchReady: true,
        // 监听js
        watchJsError: true,
        // 监听资源报错
        watchSource: true,
        // 监听请求报错
        watchAxios: true,
    }
})

根据自己的业务需要开启对应的配置信息;


注意:

  1. 日志上报的方式有俩种: fetchsendBeacon;

  2. 如果要开启屏幕录制功能那么就不能使用sendBeacon,如果您使用sendBeacon去上报, 那么在复杂的项目目前它是上传不了的, 因为会把录制的元素信息也会上传;这里使用了开源rrweb

  3. 要想使用录制视频上传, 那么请使用fetch方式进行上传

  4. 视频录制的信息使用lz-string进行压缩加密, 如果您使用的情况, 请在服务端或者客户端对该数据进行解压解密;压缩可查阅代码/src/lib/send.ts 13行左右, 解压代码可查阅/example/index.html 110-118行左右

  5. 如果您想要体验效果:那么可以在/example目录下进行pnpm install,之后执行app.js,之后在/example/index.html 点击按钮模拟报错报错,等上报成功之后可以点击播放按钮预览录制的视频

Package Sidebar

Install

npm i log-reporting

Weekly Downloads

3

Version

1.3.1

License

MIT

Unpacked Size

380 kB

Total Files

18

Last publish

Collaborators

  • wangxiaoze_npm