前端监控面试题

错误监控

如何捕获前端错误？

方法：

  1. window.onerror：全局错误捕获
  2. unhandledrejection：Promise 错误捕获
  3. 资源加载错误：error 事件监听
  4. 框架错误：Vue errorHandler、React Error Boundary

window.onerror 能捕获哪些错误？

能捕获：

  • 运行时错误
  • 同步错误

不能捕获：

  • Promise 错误
  • 资源加载错误
  • 语法错误
  • 跨域脚本错误（信息不完整）

如何捕获 Promise 错误？

方法：

window.addEventListener('unhandledrejection', (event) => {
  console.error('Unhandled rejection:', event.reason);
  event.preventDefault();
});

如何上报错误？

方法：

  1. sendBeacon：页面卸载时也能发送
  2. Image：降级方案
  3. fetch：正常情况使用
function reportError(errorInfo) {
  if (navigator.sendBeacon) {
    navigator.sendBeacon('/api/error', JSON.stringify(errorInfo));
  } else {
    const img = new Image();
    img.src = `/api/error?data=${encodeURIComponent(JSON.stringify(errorInfo))}`;
  }
}

性能监控

Web Vitals 包含哪些指标？

Core Web Vitals：

  1. LCP (Largest Contentful Paint)：最大内容绘制，< 2.5s
  2. FID (First Input Delay)：首次输入延迟，< 100ms
  3. CLS (Cumulative Layout Shift)：累积布局偏移，< 0.1

其他指标：

  • FCP (First Contentful Paint)
  • TTI (Time to Interactive)
  • TBT (Total Blocking Time)

如何测量 LCP？

new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1];
  const lcp = lastEntry.renderTime || lastEntry.loadTime;
  reportMetric('LCP', lcp);
}).observe({ entryTypes: ['largest-contentful-paint'] });

如何测量页面加载时间？

方法：

const timing = performance.timing;
const pageLoadTime = timing.loadEventEnd - timing.navigationStart;

Performance API 有哪些？

API：

  • performance.timing：Navigation Timing
  • performance.getEntriesByType('resource')：Resource Timing
  • PerformanceObserver：监听性能指标
  • performance.mark()：标记时间点
  • performance.measure()：测量时间间隔

监控实践

如何设计前端监控系统？

设计要点：

  1. 错误捕获：全面捕获各种错误
  2. 性能采集：采集关键性能指标
  3. 数据上报：批量上报、失败重试
  4. 数据分析：统计、分组、趋势分析
  5. 告警机制：阈值告警、异常告警

如何避免监控影响性能？

优化：

  1. 异步上报
  2. 批量上报
  3. 采样上报
  4. 使用 sendBeacon
  5. 延迟上报

如何处理 Source Map？

流程：

  1. 生产环境上传 Source Map
  2. 错误上报包含行列号
  3. 服务端使用 source-map 库解析
  4. 返回原始位置信息

如何过滤敏感信息？

方法：

function sanitizeError(errorInfo) {
  // 过滤敏感字段
  if (errorInfo.url) {
    errorInfo.url = errorInfo.url.replace(/token=[^&]*/, 'token=***');
  }
  
  // 过滤用户信息
  if (errorInfo.user) {
    delete errorInfo.user.email;
    delete errorInfo.user.phone;
  }
  
  return errorInfo;
}

最佳实践

前端监控最佳实践？

实践：

  1. 全面错误捕获
  2. 采集核心性能指标
  3. 批量上报数据
  4. 过滤敏感信息
  5. 提供降级方案
  6. 定期分析数据

如何选择监控方案？

自建 vs 第三方：

  • 自建：可控性强、成本低、需要开发
  • 第三方：功能完善、成本高、依赖外部

推荐：

  • 小项目：使用 Sentry
  • 大项目：自建 + 第三方结合
最近更新：:
Contributors: liyulai