Pinia 怎么管理应用运行时的全局错误日志收集状态-Vue.js-PHP中文网

pinia可通过插件+action拦截+状态管理实现可追踪、可开关、可上报、可本地暂存的错误日志收集；核心是定义errorlogstore管理enabled、queue等状态，并用$onaction和全局错误监听自动捕获异常。

pinia 怎么管理应用运行时的全局错误日志收集状态

Pinia 本身不内置错误日志收集功能，但可以通过插件机制 + 全局 action 拦截 + 状态管理三者协同，实现运行时全局错误日志的**可追踪、可开关、可上报、可本地暂存**的状态管理。核心思路是：把「错误日志收集开关」和「待上报错误队列」作为 store 的 state，再用 $onAction 和插件统一捕获源头，最后由业务逻辑或定时任务触发上报。

定义一个 errorLogStore 管理日志状态

创建独立 store 专注错误日志生命周期：

state：包含 enabled: boolean（是否开启收集）、queue: ErrorLogItem[]（内存中暂存的错误项）、maxQueueSize: number（防爆仓）
getters：如 hasErrors、errorCount，便于视图响应式判断
actions：提供 addError(err, context?)、clear()、flushToServer()、toggleEnabled() 等方法

示例片段：

src/stores/useErrorLogStore.ts

import { defineStore } from 'pinia'
import { ref } from 'vue'

export interface ErrorLogItem {
  id: string
  message: string
  stack?: string
  url: string
  timestamp: number
  context?: Record<string any>
}

export const useErrorLogStore = defineStore('errorLog', () => {
  const enabled = ref(true)
  const queue = ref<errorlogitem>([])
  const maxQueueSize = 50

  function addError(err: Error, context: Record<string any> = {}) {
    if (!enabled.value) return
    const item: ErrorLogItem = {
      id: Math.random().toString(36).substr(2, 9),
      message: err.message,
      stack: err.stack,
      url: location.href,
      timestamp: Date.now(),
      context
    }
    queue.value.push(item)
    if (queue.value.length > maxQueueSize) {
      queue.value.shift()
    }
  }

  function flushToServer() {
    if (queue.value.length === 0) return
    // 这里调用你的上报 API，例如：api.reportErrors(queue.value)
    // 成功后清空队列
    queue.value = []
  }

  return { enabled, queue, addError, flushToServer, clear: () => (queue.value = []) }
})</string></errorlogitem></string>

用 $onAction 全局拦截所有 store action 错误

在 store 初始化后，对所有 store 实例统一监听 action 执行失败，自动注入日志：

Vuejs

Vue.js 官方推荐通过 npm 进行安装，这是构建现代化前端项目最主流的方式。在终端中执行 npm install vue 即可获取最新稳定版，如需指定版本可添加 @版本号，例如 npm install vue@3.4.0。安装前请确保已配置 Node.js 环境（推荐 v18 及以上版本），并建议将 npm 镜像源切换至国内镜像以提升下载速度。对于大型项目，还可通过 npm create v

下载

在 main.ts 或 Pinia 插件中调用 pinia.use()
使用 onError 钩子捕获 action 内抛出的错误
调用 useErrorLogStore().addError() 记录，附带 action 名称和参数快照

这样，所有 store 中 async fetchUser()、submitForm() 等操作的异常都会被自动捕获并归集。

捕获全局未处理错误（window.onerror / unhandledrejection）

Pinia store 不负责监听浏览器级错误，需在应用入口手动绑定：

在 main.ts 中注册 window.addEventListener('error') 和 window.addEventListener('unhandledrejection')
在回调中调用 useErrorLogStore().addError()，并标注来源为 'global'
注意过滤掉资源加载失败（event.filename 为空或为 undefined 时跳过）