Vue项目中全局错误监测与错误日志记录实现 - 涵盖JS/Vue/请求/Promise错误
上线后的Vue项目难免会出现各种运行时错误，如果不做全局监控，排查问题往往依赖用户反馈或测试重现。在项目中集成一套全局错误监测与日志记录机制，可以将常见的JS错误、静态资源加载失败、Vue渲染异常、请求错误以及Promise未捕获错误统一捕获，并存储到localStorage中。这样开发人员只要查看错误日志就能快速定位问题，大幅降低维护成本。本文基于Vue3环境，完整实现一个命名为“watchError”的工具模块，包含错误码定义、错误处理函数、自动监听与落地方案。
一、准备工作
1. 错误码规定
使用Map定义一套自定义错误码，与请求状态码类似，便于区分错误类型：
// 错误代码
const errCode = new Map([
['E1001', '系统未知错误'],
['E1002', 'vue逻辑错误'],
['E1003', 'JavaScript错误'],
['E1004', '静态资源加载错误'],
['E1005', '请求错误'],
['E1006', 'Promise错误']
])
2. 错误处理函数
export导出一个errorHandler函数，供后续手动调用（比如在Promise.catch或axios响应拦截器中）。该函数接收错误码、错误消息和可选的错误文件路径，内部调用来保存日志：
export const errorHandler = (code: string, msg: string, file = 'null') => {
saveLog({
code: code,
type: errCode.get(`$
`),
msg: msg,
router: router.currentRoute.value.fullPath,
file: file,
createTime: new Date().toLocaleString()
})
}
3. 保存错误日志到localStorage
定义saveLog函数，将错误信息存入localStorage的“ERROR”字段，并限制最多保存50条，超出时替换最旧的一条。通过createTime排序保证后来者替换最早错误：
type errorParams = {
code: string
msg: string
router: string
file?: string
createTime: string
type?: string
}
const saveLog = (data: errorParams): void => {
const nowData = localStorage.getItem('ERROR')
if (nowData) {
const allData = JSON.parse(nowData)
sortArray(allData)
if (allData.length > 50) {
allData = data
sortArray(allData)
} else {
allData.push(data)
}
localStorage.setItem('ERROR', JSON.stringify(allData))
} else {
localStorage.setItem('ERROR', JSON.stringify())
}
}
const sortArray = (allData: string[]) => {
allData.sort((a: any, b: any) => {
if (a.createTime > b.createTime) return 1
return -1
})
}
二、监听错误
项目上线后主要有四类错误需要捕获。利用Vue官方提供的app.config.errorHandler和window.addEventListener实现。
1. JS错误与静态资源加载错误
通过window的error事件统一监听，利用error.message是否存在来区分：
window.addEventListener('error', (error: any) => {
if (error.message) {
// JS错误
console.error('监测到E1003错误');
errorHandler('E1003', error.message, error.filename)
} else {
// 静态资源加载错误
console.error('监测到E1004错误');
errorHandler('E1004', error.target.currentSrc, error.filename)
}
}, true)
注意：第三个参数为true，表示在捕获阶段监听，确保资源加载错误能被捕获。
2. Vue逻辑错误
利用app.config.errorHandler，它会在组件渲染、计算属性、侦听器等过程中捕获未处理的错误：
app.config.errorHandler = (err: any) => {
console.error('监测到E1002错误');
errorHandler('E1002', err.name + ':' + err.message)
}
3. 请求错误与Promise错误
这两种错误需要开发者在使用时主动调用errorHandler，因为它们本身已有自己的错误处理机制。
- 请求错误：在axios响应拦截器中调用errorHandler，传入错误码E1005和错误详情。
- Promise错误：在catch块中调用errorHandler，传入错误码E1006。
// 请求错误示例（在axios.interceptors.response内）
errorHandler('E1005', `请求地址：${error.config.method}：${error.config.baseURL}/${error.config.url}`)
// Promise错误示例
errorHandler('E1006', '测试Promise错误')
三、完整代码与使用方法
将上述逻辑整合到一个文件中，例如src/utils/watchError.ts。然后在main.ts中引入并启动：
// main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { watchError } from './utils/watchError'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')
watchError(app)
watchError函数接收app实例，内部同时注册Vue错误处理器和全局error事件：
export const watchError = (app: any) => {
app.config.errorHandler = (err: any) => {
console.error('监测到E1002错误');
errorHandler('E1002', err.name + ':' + err.message)
}
window.addEventListener('error', (error: any) => {
if (error.message) {
console.error('监测到E1003错误');
errorHandler('E1003', error.message, error.filename)
} else {
console.error('监测到E1004错误');
errorHandler('E1004', error.target.currentSrc, error.filename)
}
}, true)
}
使用时，对于axios请求错误和Promise.catch，手动引入errorHandler并调用。
错误日志会存储在localStorage的“ERROR”字段中，你可以开发一个管理页面（如表格）展示这些日志，方便线上排查。
四、总结
以上方案基于Vue3，通用性较强。通过自定义错误码、统一捕获策略与localStorage持久化，能够覆盖绝大多数线上运行时错误。实际项目中可根据需要扩展errorHandler逻辑，比如发送到服务器告警。需要注意的是，window.onerror和app.config.errorHandler都不能捕获所有异常（如异步代码内部未显式reject的情况），建议结合Promise错误手动处理。此方案已在个人项目中验证有效，可作为错误监控的基础模块。
Re: Vue项目中全局错误监测与错误日志记录实现 - 涵盖JS/Vue/请求/Promise错误
非常感谢楼主分享这么完整的方案！我正好在给公司项目做全局错误监控，你这套体系覆盖了JS、Vue、请求和Promise四种核心错误类型，而且用自定义错误码和localStorage存储，感觉很实用。 有几个小细节想请教一下： 1. `saveLog` 里 `localStorage.setItem('ERROR', JSON.stringify())` 是不是笔误？应该是 `JSON.stringify()` 吧？ 2. 用 localStorage 存储上限50条，如果用户页面长时间不关闭、报错较多，会不会丢日志？有没有考虑过同时上报到服务器（比如通过 `navigator.sendBeacon` 或异步请求）？ 3. 对于 `Promise` 错误，是否建议在全局加一个 `unhandledrejection` 监听来兜底？这样即使开发者忘记写catch也能捕获到。 另外，分享一个我踩过的坑：Vue3 的 `app.config.errorHandler` 里如果本身抛出错误会导致死循环，建议用 `try...catch` 包一下。再次感谢，你的代码结构清晰，已经收藏了！Re: Vue项目中全局错误监测与错误日志记录实现 - 涵盖JS/Vue/请求/Promise错误
感谢分享！这个方案很实用，全局错误监控确实是上线后不可或缺的一环。你设计的错误码和存储结构清晰，把JS、Vue、资源和请求错误统一管理，排查问题的效率能提升不少。 提几个小细节供参考： 1. `saveLog` 里长度超过50时的处理逻辑，目前是先排序，替换`allData`再排序。其实可以用队列思想，直接`shift`移除最旧的（排序后第一个），然后`push`新的，再排序即可，这样避免了一次无谓的排序。另外初始化时 `JSON.stringify([])` 漏了空数组，会存成 `[]` 的字符串吗？ 2. 静态资源错误监听中，`error.filename` 在部分资源加载失败时可能为 `undefined`，建议改用 `error.target.src` 或 `currentSrc`（你已有），不过`filename`备用也可以，需确认兼容性。 3. `sortArray` 参数类型声明为 `string[]`，但实际传入的是对象数组，TS 会报类型不匹配，改成泛型会更严谨。 总体很赞，尤其是把Vue errorHandler和window error事件结合，覆盖全面。期待后续能加上用户操作路径（如点击/路由）联调日志，这样定位更准。已收藏！Re: Vue项目中全局错误监测与错误日志记录实现 - 涵盖JS/Vue/请求/Promise错误
感谢分享这套完整的 `watchError` 方案，很实用。错误码的设计和按类型分类收拢到 localStorage 的思路清晰，对本地调试和快速定位问题帮助很大。尤其是将 VUE 渲染错误通过 `app.config.errorHandler` 单独捕获，与原生 JS 错误分开处理，避免了混合排查的困难。 有几个点想请教或讨论： 1. `saveLog` 中排序后替换最旧记录的逻辑，如果操作并发高（比如连续多个错误），会不会因为 `localStorage` 的同步读写导致数据覆盖或排序失效？是否考虑加一个简单的队列或锁？ 2. 目前请求错误和 Promise 错误依赖开发者手动调用，有没有办法自动拦截 `window.fetch` 或 `XMLHttpRequest` 来全局捕获？这样可以减少遗漏。 3. 大于 50 条替换时，用的是 `allData = data`，但如果排序后第一条已经被替换过了，后续新错误进来会不会重复覆盖第一条？也许检查长度相等后直接 `shift` 再 `push` 更直观。 整体来说，这套方案已经很成熟，加一个执行 `sortArray` 后的边界条件处理，就能完美落地。感谢分享！
页:
[1]