如何用原生JS+Vue实现一套可复用的前端错误监控系统

// 捕获运行时错误（语法错误、null 访问等）
window.onerror = function (message, source, lineno, colno, error) {
  reportError({
    type: 'js_error',
    message,        // 错误信息
    source,         // 出错文件
    lineno,         // 行号
    colno,          // 列号
    stack: error?.stack // 错误堆栈
  });
};

window.addEventListener('error', function (e) {
  // 过滤 JS 运行错误，保留资源加载错误
  if (e.target && e.target !== window) {
    reportError({
      type: 'resource_error',
      tagName: e.target.tagName,       // 资源标签名（如 IMG / SCRIPT）
      src: e.target.src || e.target.href // 资源地址
    });
  }
}, true);

window.addEventListener('unhandledrejection', function (e) {
  reportError({
    type: 'promise_error',
    reason: e.reason?.message || JSON.stringify(e.reason) // 兼容各种 Promise 报错内容
  });
});

function reportError(errorInfo) {
  try {
    const payload = {
      ...errorInfo,
      url: location.href,
      userAgent: navigator.userAgent,
      time: Date.now()
    };

    // 推荐使用 sendBeacon，不阻塞主线程
    if (navigator.sendBeacon) {
      navigator.sendBeacon('/api/log/error', JSON.stringify(payload));
    } else {
      fetch('/api/log/error', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
    }
  } catch (e) {
    console.warn('reportError 发送失败', e);
  }
}

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// Vue 全局错误处理
app.config.errorHandler = (err, instance, info) => {
  reportError({
    type: 'vue_error',
    message: err.message,
    stack: err.stack,
    info
  });
};

app.mount('#app');

function handleUserNotice(errorInfo) {
  if (errorInfo.type === 'js_error') {
    alert('页面出现了一些小问题，请刷新后重试');
  }
}

try {
  app.mount('#app');
} catch (e) {
  reportError({
    type: 'entry_error',
    message: e.message,
    stack: e.stack
  });
}

<link rel="stylesheet" href="cdn/font-awesome.css" rel="external nofollow"  data-monitor="true">

if (e.target.dataset.monitor === 'true') {
  reportError({
    type: 'resource_error',
    src: e.target.href,
    tag: e.target.tagName
  });
}

fetch('/api/data')
  .then(res => res.json())
  .then(data => {
    processData(data);
  });
  // 忘记加 .catch

window.addEventListener('unhandledrejection', function (e) {
  reportError({
    type: 'promise_error',
    reason: e.reason
  });
});

pagePath: location.pathname