告别“裸奔”：全方位构建前端监控与容灾体系

// 1. 同步 JS 错误
window.onerror = function(msg, url, line, col, error) {
  report({ type: 'js_error', msg, url, line, col, stack: error?.stack });
};

// 2. 未处理的 Promise 异常
window.addEventListener('unhandledrejection', (event) => {
  report({ type: 'promise_error', reason: event.reason?.message || String(event.reason) });
});

// 3. 资源加载失败（img / script / css）— 必须用捕获阶段
window.addEventListener('error', (event) => {
  if (event.target !== window) {
    report({ type: 'resource_error', tag: event.target.tagName, src: event.target.src || event.target.href });
  }
}, true);

// 4. React 组件错误
class ErrorBoundary extends React.Component {
  componentDidCatch(error, errorInfo) {
    report({ type: 'react_error', error: error.message, componentStack: errorInfo.componentStack });
  }
  render() { return this.props.children; }
}

// 5. API 错误：封装 axios 拦截器
axios.interceptors.response.use(null, (error) => {
  report({ type: 'api_error', url: error.config?.url, status: error.response?.status });
  return Promise.reject(error);
});

import { onLCP, onFID, onCLS, onINP, onTTFB } from 'web-vitals';

onLCP((metric) => report({ name: 'LCP', value: metric.value }));
onCLS((metric) => report({ name: 'CLS', value: metric.value }));
onINP((metric) => report({ name: 'INP', value: metric.value }));
onTTFB((metric) => report({ name: 'TTFB', value: metric.value }));

// 自定义性能指标
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.name === 'first-contentful-paint') {
      report({ name: 'FCP', value: entry.startTime });
    }
  }
});
observer.observe({ type: 'paint', buffered: true });

// 慢资源告警
const resObserver = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 3000) {
      report({ name: 'slow_resource', url: entry.name, duration: entry.duration });
    }
  }
});
resObserver.observe({ type: 'resource', buffered: true });

const reportQueue = [];

function report(data) {
  reportQueue.push({
    ...data,
    timestamp: Date.now(),
    url: location.href,
    userAgent: navigator.userAgent,
  });
  if (reportQueue.length >= 10) flush();
}

function flush() {
  if (reportQueue.length === 0) return;
  const data = JSON.stringify(reportQueue.splice(0));
  // sendBeacon：页面卸载时也不会丢数据
  if (navigator.sendBeacon) {
    navigator.sendBeacon('/api/report', data);
  } else {
    fetch('/api/report', { method: 'POST', body: data, keepalive: true });
  }
}

setInterval(flush, 5000);
window.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') flush();
});