HOW - 日志数据上报实践系列（二）

今天将从代码实现维度介绍如何收集各类信息。设计要求：

1. 简单高效
2. 不侵入业务代码

一、页面异常和错误

页面异常和错误。如资源加载异常（JavaScript 加载异常、CSS 加载异常、图片加载异常、音视频加载异常等）、JavaScript 错误（含 JavaScript 执行错误、Promise 错误等）。

1. JavaScript 加载异常：HTMLScriptElement

比如在Vue项目中，你可以在项目的入口文件中，例如main.js中实现对JavaScript加载异常的监控。

以下是一种基本的方法：

// main.js

// 引入你的监控工具
import {
    monitorJSLoading } from './monitoringTool';

// 创建Vue实例
const app = createApp(App);

// 其他初始化工作...

// 挂载Vue实例到DOM
app.mount('#app');

// 监控JS文件加载异常
monitorJSLoading();

在monitoringTool.js文件中，你可以实现监控JS文件加载异常的功能：

export function monitorJSLoading() {
   
    // 监听error事件，捕获JS文件加载异常
    window.addEventListener('error', function(event) {
   
        // 判断是否是JS文件加载异常
        if (event.target instanceof HTMLScriptElement) {
   
            var url = event.target.src;
            // 发送加载异常信息到服务器
            // 可以使用XMLHttpRequest或者Fetch API发送数据到服务器
        }
    });
}

这样，当开发者在Vue 3项目的入口文件中引入你的能力后，你的监控工具会自动开始监控JS文件加载异常，而不需要开发者在业务代码中进行额外的配置。

注意，我们的实现需要根据 Vue 或者 React 来进行兼容，比如 vue，我们可以通过传递 Vue 给我们的监听函数，并改造其提供的一些 Error 捕获API，注入我们上述的监听逻辑。

2. CSS 加载异常和图片异常：HTMLLinkElement 和 HTMLImageElement

在Vue项目中，获取CSS文件加载异常和图片加载异常的方法与获取JavaScript加载异常类似。你可以在项目的入口文件中实现对CSS文件加载异常和图片加载异常的监控。

首先，你可以在入口文件（例如main.js）中引入你的监控工具，并在Vue实例挂载后执行监控逻辑：

// main.js

// 引入你的监控工具
import {
    monitorResourceLoading } from './monitoringTool';

// 创建Vue实例
const app = createApp(App);

// 其他初始化工作...

// 挂载Vue实例到DOM
app.mount('#app');

// 监控资源加载异常
monitorResourceLoading();

然后，在monitoringTool.js文件中，你可以实现监控资源加载异常的功能：

export function monitorResourceLoading() {
   
    // 监听error事件，捕获资源加载异常
    window.addEventListener('error', function(event) {
   
        // 判断是否是CSS文件加载异常
        if (event.target instanceof HTMLLinkElement && event.target.rel === 'stylesheet') {
   
            var url = event.target.href;
            // 发送CSS加载异常信息到服务器
            // 可以使用XMLHttpRequest或者Fetch API发送数据到服务器
        }
        // 判断是否是图片加载异常
        else if (event.target instanceof HTMLImageElement) {
   
            var url = event.target.src;
            // 发送图片加载异常信息到服务器
            // 可以使用XMLHttpRequest或者Fetch API发送数据到服务器
        }
    });
}

这样，当开发者在Vue 3项目的入口文件中引入你的能力后，你的监控工具会自动开始监控CSS文件加载异常和图片加载异常，而不需要开发者在业务代码中进行额外的配置。

3. JavaScript 错误

含 JavaScript 执行错误、Promise 错误等。

在Vue项目中，获取JavaScript执行错误和Promise错误的方法需要在全局范围内设置相应的错误处理器。你可以在项目的入口文件中实现对这些错误的监控。

首先，在入口文件（例如main.js）中引入你的监控工具，并在Vue实例挂载后执行监控逻辑：

// main.js

// 引入你的监控工具
import {
    monitorJavaScriptErrors, monitorPromiseErrors } from