前端监控实践：错误、性能与用户行为追踪

前端监控实践：错误、性能与用户行为追踪

常见误区

前端监控？这不是后端的事吗？

"我的代码没问题，不需要监控"——结果用户反馈网站崩溃，自己却一无所知； "我有日志，还需要什么监控"——结果日志太多，根本找不到问题； "监控太复杂了，我没时间做"——结果问题频发，用户流失。

醒醒吧，前端监控是前端开发的重要组成部分，不是可有可无的！

实施前端监控的价值

• 问题发现：及时发现和定位前端问题
• 性能优化：了解网站性能瓶颈
• 用户体验：了解用户真实使用情况
• 数据驱动：基于数据做出决策

缺乏监控的代码示例

// 反面教材：没有任何监控
function App() {
  return (
    <div>
      <h1>我的网站</h1>
      {/* 没有任何错误处理和监控 */}
      <button onClick={() => {
        // 可能会出错的代码
        const data = fetchData();
        processData(data);
      }}>
        点击我
      </button>
    </div>
  );
}

// 反面教材：简单的 console.log
function fetchData() {
  try {
    const data = /* 从 API 获取数据 */;
    return data;
  } catch (error) {
    console.log('Error:', error); // 只在控制台打印，没有持久化
    return null;
  }
}

集成 Sentry 监控方案

// 正确的做法：使用专业的监控工具
// 安装依赖：npm install @sentry/react @sentry/tracing

   ;
   ;
   ;
 *    ;
 {  }  ;


.({
  : ,
  : [ ()],
  : ,
  
  : process..,
  
  : 
});

.(.()).(
  
);


   ;
 *    ;

    {
  () {
    (props);
    . = { :  };
  }

   () {
    
     { :  };
  }

  () {
    
    .(error, { : errorInfo });
  }

  () {
     (..) {
      
       ;
    }
     ..;
  }
}


 { usePerformanceObserver }  ;

 () {
  ( {
    entries.( {
      
       (entry. === ) {
        .(, { : , : { : entry. } });
      }
       (entry. === ) {
        .(, { : , : { : entry. } });
      }
    });
  });
   ;
}


 () {
  
  .(action, { : , : data });
}


 () {
   start = performance.();
   (url, options)
    .( {
       end = performance.();
       duration = end - start;
      
      .(, { : , : { url, : response., duration } });
       response;
    })
    .( {
      
      .(error, { : { url } });
       error;
    });
}


 () {
   (
    
  );
}