@log-reporting/core - V2

当然， v2 版本由内置的types， 如果您的项目因为安装@log-reporting/core而导致ts类型报错，那就需要您安装@log-reporting/types了，这样就可以完全解决类型报错的问题；

当前版本仅仅支持客户端使用，不支持在服务端使用

🔈 地址

• github 地址
• npm 地址

🔈 注意事项

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

该版本为全新版本, 与之前的版本会有很大的区别;

🔈 日志搜集范围

1. 资源：资源地址不正确或不存在导致的资源异常
2. 代码：搜集报错信息，页面的崩溃等等；
3. 请求：截请求参数错误，访问地址不存在，异常拦
4. 额外添加功能：支持录制自定义时间的视频，但是最大时间不能超过 1 分钟;
5. 支持性能监控, 白屏时间, 页面加载时间等等; 新版本支持
6. 支持pv页面浏览, 需要手动提交; 新版本支持
7. 支持曝光, 需要手动设置对应的元素(仅支持在可是区域内); 新版本支持

🔈 如何使用

js 项目引入

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

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

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

<script>
  logReportingCore.init({
    // 上报地址
    dsn: 'http://localhost:8888/postLog',
    // 是否开启调试
    isDebug: true,
    // 是否捕获错误
    isError: true,
    // 是否捕获console.error
    isConsoleError: true,
    // 是否捕获性能
    isPerformance: true,
    // 是否捕获资源
    isResource: true,
    // 是否捕获请求
    isXhr: true,
    // 屏幕录制
    record: {
      open: true,
      time: 10 * 1000
    },
    // 加密方式
    encryptMethod: 'base64',
    // 上报方式
    method: 'beacon',
    // pv统计
    isPv: true,
    // 曝光统计
    isExposure: true
  })
</script>

vue 项目引入

在vue中使用, npm install @log-reporting/core 安装依赖

在main.js中引入

import { init } from "@log-reporting/core";
init({});

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

🔈 关于pv统计与曝光统计

目前仅仅支持手动上报；

1. pv统计：

import { lestenPv } from "@log-reporting/core";
lestenPv({
	// 统计信息
	message: "测试",
	// 其他参数都是可以自定义的
	url: "localhost:8888/getLogData",
	params: { a: 123 },
});

export interface IPv {
	message?: string;
	[k: string]: any;
}

2. 曝光统计：

import { lestenExposure } from "@log-reporting/core";
lestenExposure({
	// 曝光元素
	target: document.querySelector("#btn10"),
	// 曝光信息
	message: "曝光按钮",
	threshold: 0.5,
	// 其他参数
	params: { a: 123 },
});

export interface IExposure extends IPv {
	threshold?: number;
	target?: any; // 曝光的元素
	params?: Record<string, any>;
	time?: number;
}

🔈 屏幕录制

该版本中有内置的屏幕录制功能，也就是相对于错误日志的操作视频记录；

为什么要添加这个功能？

因为相对于日志上报，我们希望在线上环境中能够记录一些操作的视频，这样我们就能更好的了解用户的操作情况； 但是，由于浏览器本身对屏幕录制的支持不是很友好，所以需要我们自己实现； 所以，我们自己实现了一个简单的屏幕录制功能；

当然主要是引入了rrweb插件；

屏幕录制的配置

{
  record: {
    open: true, // 是否开启录制
    time: 10 * 1000 // 录制时间， 最大时间为1分钟
  }
}

视频信息的加密解密

为了保证安全性以及性能，视频信息是做了 安全加密 的，所以您需要解密才能使用；

目前加密的的方式分为俩中：lz 和 base64

• 加密使用： encryptFun(value: Record<string, any>, k?: string);
  • 该方法是对象进行加密，加密后的数据是字符串, 默认的加密
  • k: 可以是固定值snapshot也可以是其他，当k为其他值时，默认加密方式为base64
• 解密使用： decryptionFun(value: string, k?: string)
  • 该方法是解密，解密后的数据是object
  • 将您加密后等到的字符串给到该方法即可；k的作用类似于上面的k；

解密之后展示回放

import { decryptionFun } from "@log-reporting/core";
// data: 模仿后端返回的数据
const { reportInfo } = data;
// 对数据进行解密
const videoData = decryptionFun(reportInfo.snapshot);
// 使用rrweb进行回放， 当然是需要安装rrweb插件
// https://github.com/rrweb-io/rrweb/blob/master/README.zh_CN.md
const player = new rrweb.Replayer(JSON.parse(videoData));
// 自动播放
player.play();

🔈 额外导出的方法

这些方法不是主要核心方法，一般情况没什么用，但是有些时候可能需要用到，所以这里导出出来；

import { _global, _support } from "@log-reporting/core";

1. _global: 全局对象，可以理解为window
2. _support： 基础信息参数

🔈 其他

@log-reortinging/types - 类型校验

@log-reporting/core有内置的类型校验，如果您的项目是ts搭建，那么需要再次安装@log-reporting/types，否则会导致类型报错，当然，您也可以自行定义类型，但是需要您自行保证类型是否正确；

如果您引入正确之后，不需要特殊使用就可以在项目中使用了；您也可以点击内置api可以查看源码编译而成的index.d.ts；

@log-reporting/logger - 日志

@log-reporting/logger没有太大的用处，就是依赖于@log-reporting/core配置中的debuge产生的，也就是在console.log的基础上做了一层美化效果， 当然您也是可以关闭的，配置完全是自定义的；