前端性能监控与错误捕获，用户侧的点得注意

一、要监控的两类东西

• 性能数据：页面加载多快、首屏什么时候出来、接口耗时多久。直接影响用户体验和留存。
• 错误数据：JS 运行时异常、未被 catch 的 Promise、资源加载失败、接口报错。这些不抓，你就活在"我这边好好的"幻觉里。

二、性能：用 Performance API 拿真实指标

浏览器自带 performance 接口，能拿到从导航到渲染各阶段的时间戳：

const nav = performance.getEntriesByType('navigation')[0];
console.log('DNS:', nav.domainLookupEnd - nav.domainLookupStart);
console.log('TCP:', nav.connectEnd - nav.connectStart);
console.log('请求响应:', nav.responseEnd - nav.requestStart);
console.log('DOM 解析:', nav.domContentLoadedEventEnd - nav.responseEnd);

// 首屏关键指标
const paint = performance.getEntriesByType('paint');
const fcp = paint.find(p => p.name === 'first-contentful-paint');
console.log('FCP(首次内容绘制):', fcp?.startTime);

FCP（首次内容绘制）能反映用户"看到东西"的快慢，比单纯看 window.onload 更贴近体感。

三、错误：全局兜住漏网的异常

代码里 try/catch 只能覆盖你写到的地方，真正的坑常在意料之外。用全局监听兜住：

// 普通 JS 错误
window.onerror = (msg, src, line, col, error) => {
  report({ type: 'js', msg, src, line, col, stack: error?.stack });
  return true; // 阻止默认打印也行
};

// Promise 未捕获的拒绝
window.addEventListener('unhandledrejection', (e) => {
  report({ type: 'promise', reason: e.reason?.message, stack: e.reason?.stack });
});

// 资源加载失败（img/script/link）
window.addEventListener('error', (e) => {
  if (e.target && (e.target.src || e.target.href)) {
    report({ type: 'resource', url: e.target.src || e.target.href });
  }
}, true); // 注意 capture 用 true 才能捕获资源错误

unhandledrejection 是很多人漏掉的——fetch 失败不进 onerror，如果你没在业务里 catch，就靠它兜底。

四、框架里的错误边界

React 用错误边界（Error Boundary）拦住组件渲染时的崩溃，避免整页白屏：

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  componentDidCatch(error, info) { report({ type: 'react', error, info }); }
  render() {
    return this.state.hasError ? <Fallback /> : this.props.children;
  }
}

Vue 则可用 app.config.errorHandler 统一接住组件内抛出的错误。

五、上报：别把监控变成负担

• 采样上报：全量上报量太大，可按一定比例采样，错误类建议全报、性能类可抽样。

• 批量+异步：攒一批再发，用 navigator.sendBeacon 在页面关闭时也能可靠送出：

  navigator.sendBeacon('/log', JSON.stringify(payload));
  

• 加 traceId：和后端链路追踪串起来，用户报问题时能一路追到服务端日志。

小结

前端监控的本质是"把用户侧的无形变成可见"。性能上用 Performance API 拿真实指标，错误上用全局 onerror/unhandledrejection 和资源监听兜住漏网异常，框架内再补错误边界。最后通过采样 + sendBeacon 可靠上报，和后端链路打通。上线前花半天接监控，能省下之后无数个"复现不了"的夜晚。