组合式函数useErrorReporter实现异常日志自动上报，通过封装错误捕获、分类、格式化与发送逻辑，解耦业务代码，支持全局errorHandler联动、主动上报、防抖限流、离线缓存及敏感信息过滤。
组合式函数实现异常日志自动上报，核心思路是：把错误捕获、分类、格式化、发送逻辑封装成独立的可复用函数，并与业务逻辑解耦。它不依赖具体组件，也不侵入业务代码，而是通过统一入口注入错误上下文，再交由基础设施层完成上报。
useErrorReporter：基础封装结构
这是一个典型的组合式函数签名：
命名规范：必须以 use 开头，如 useErrorReporter；
输入参数：通常接收一个配置对象，包含上报地址、是否启用、环境判断等；
返回值：暴露 report 方法和可选的全局监听器注册能力。
示例实现（简化版）：
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
立即学习“前端免费学习笔记（深入）”；
import { onMounted, onUnmounted, ref } from 'vue'
export function useErrorReporter(options: {
url: string;
enabled?: boolean;
envWhitelist?: string[];
}) {
const isReady = ref(false)
const report = async (error: any, context: Recordstring, any> = {}) => {
if (!options.enabled || !isReady.value) return
try {
await fetch(options.url, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
message: error?.message || 'Unknown error',
stack: error?.stack,
context,
timestamp: Date.now(),
env: import.meta.env.MODE
})
})
} catch (e) {
console.warn('Failed to send error log:', e)
}
}
onMounted(() => {
isReady.value = true
})
onUnmounted(() => {
isReady.value = false
})
return { report }
}
与全局错误处理联动
Vue 3 的 app.config.errorHandler 是捕获组件内未处理异常的第一道防线。组合式函数本身不负责监听这个钩子，但可以被它调用：
- 在
main.ts中初始化useErrorReporter实例，并将其report方法绑定到errorHandler - 这样所有 setup/render/watch 中抛出的同步/异步错误都会自动进入上报流程
- 注意：该钩子无法捕获原生 Promise reject，需配合
window.addEventListener('unhandledrejection')补充
业务侧主动上报错误
当业务代码中明确知道某处可能出错（比如手动调用接口失败），应避免直接 console.error，而是调用组合式函数暴露的 report：
const { report } = useErrorReporter({
url: '/api/log/error',
enabled: import.meta.env.PROD
})
const handleSubmit = async () => {
try {
await api.submitForm(data)
} catch (err) {
report(err, { action: 'submitForm', userId: currentUser.id })
}
}
增强健壮性的关键细节
-
防抖与限流：高频错误（如快速连续点击触发）应节流，避免日志服务被打爆；可用
lodash-es/debounce封装report -
离线缓存：网络不可用时，先存入
localStorage，恢复后重发；组合式函数内部可集成此逻辑 -
敏感信息过滤：上报前清理
context中的 token、密码字段，防止泄露 -
类型安全：定义
ErrorPayload接口，确保字段结构一致，便于后端解析
