一次搞懂前端错误处理及收集，让你的Web应用程序更稳定可靠

前端

2023-04-01 15:41:03

前端错误收集和处理：全面指南

前端错误监控对于快速解决用户问题至关重要。本指南将深入探讨前端错误类型，捕获和处理技术，以及如何使用 Vue.js 和 Node.js 优化您的错误处理流程。

前端错误类型

前端错误分为三类：

JS 运行时错误： 语法、类型或引用错误，发生在浏览器执行 JavaScript 代码时。
资源加载错误： 404、403 等错误，在浏览器加载资源（脚本、样式表、图像）时出现。
接口错误： 500、401 等错误，在前端与后端交互时发生。

前端错误捕获和处理

JS 运行时错误

使用 window.onerror 事件监听器： message、source、lineno、colno 和 error 属性提供了详细的错误信息。

资源加载错误

使用 onload 和 onerror 事件监听器： 监视资源加载的成功或失败。

接口错误

使用 fetch 的 catch 方法： 捕获并处理服务器响应错误。

Vue.js 的全局错误处理

app.config.errorHandler 函数： 统一处理所有组件中的错误，提供 err、vm 和 info 作为参数。

使用 Node.js + Express 模拟接口

使用 Express 创建服务器端 API： 接收前端错误信息，并将其存储在数据库或日志文件中。

获取错误列表

getErrorList 函数： 从数据库或日志文件中检索已捕获的错误列表。

代码示例：

JS 运行时错误监听器：

window.onerror = function(message, source, lineno, colno, error) {
  console.log(`错误信息：${message}`);
  console.log(`脚本 URL：${source}`);
  console.log(`行号：${lineno}`);
  console.log(`列号：${colno}`);
  console.log(`错误对象：${error}`);
};

Express 接口：

// server.js
const express = require('express');
const app = express();

app.post('/api/v1/errors', (req, res) => {
  const error = req.body;

  // 将错误存储到数据库或日志文件中

  res.json({ success: true });
});

Vue.js 全局错误处理：

import Vue from 'vue';

Vue.config.errorHandler = function(err, vm, info) {
  console.log(`错误：${err}`);
  console.log(`组件：${vm}`);
  console.log(`错误信息：${info}`);
};