Vue 3 组合式函数怎么实现异常日志自动上报的封装-Vue.js-PHP中文网

组合式函数useErrorReporter实现异常日志自动上报，通过封装错误捕获、分类、格式化与发送逻辑，解耦业务代码，支持全局errorHandler联动、主动上报、防抖限流、离线缓存及敏感信息过滤。

vue 3 组合式函数怎么实现异常日志自动上报的封装

组合式函数实现异常日志自动上报，核心思路是：把错误捕获、分类、格式化、发送逻辑封装成独立的可复用函数，并与业务逻辑解耦。它不依赖具体组件，也不侵入业务代码，而是通过统一入口注入错误上下文，再交由基础设施层完成上报。

useErrorReporter：基础封装结构

这是一个典型的组合式函数签名：

命名规范：必须以 use 开头，如 useErrorReporter；
输入参数：通常接收一个配置对象，包含上报地址、是否启用、环境判断等；
返回值：暴露 report 方法和可选的全局监听器注册能力。

示例实现（简化版）：

蓝湖代码转vue2.0+element-ui

将静态 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 })
  }
}