前端小食堂 | Day16 - 前端监控の天眼通

️ 今日天眼：错误追踪与性能透视

1. 错误监控の捕虫网

//  全局错误捕获  
window.addEventListener('error', (e) => {
     
  sendToServer({
     
    type: 'JS_ERROR',  
    message: e.message,  
    stack: e.error?.stack,  
    filename: e.filename,  
    lineno: e.lineno  
  });  
});  

// ️ Promise未捕获异常  
window.addEventListener('unhandledrejection', (e) => {
     
  trackError({
     
    type: 'PROMISE_REJECTION',  
    reason: e.reason?.message || String(e.reason)  
  });  
});  

// ️ Vue组件错误边界  
app.config.errorHandler = (err, vm, info) => {
     
  console.error(' 组件崩溃:', err, `触发位置: ${
     info}`);  
  sentry.captureException(err); // 接入Sentry  
};  

核心配置：

• 接入 Sentry/LogRocket 等专业工具
• 自动记录用户操作路径
• 生产环境开启 SourceMap 映射

---

2. 性能分析の时光机

//  关键性能指标采集  
const perfData = {
     
  FP: performance.getEntriesByName('first-paint')[0]?.startTime,  
  FCP: performance.getEntriesByName('first-contentful-paint')[0]?.startTime,  
  LCP: performance.getEntriesByName('largest-contentful-paint')[0]?.startTime