前端监控实战：构建可观测的前端应用
为什么要做前端监控
很多团队习惯等用户反馈问题后再去排查，这就像在没有监控的仓库里存放贵重物品——东西丢了都不知道。
最近有个项目，页面频繁崩溃，但开发团队完全无法定位原因。与其被动猜测问题出在哪里，不如主动建立监控体系。
基础错误追踪
没有监控的代码就像在黑暗中开车，出了事故也不知道怎么回事。下面是一个典型的 React 组件示例，缺少了必要的错误处理：
// 反面教材：没有监控
function App() {
const [data, setData] = React.useState([]);
useEffect(() => {
async function fetchData() {
try {
const response = await fetch('/api/data');
const result = await response.json();
setData(result);
} catch (error) {
console.error('Error fetching data:', error);
}
}
fetchData();
}, []);
return (
<div>
{data.map(item => (
<div key={item.id}>{item.name}</div>
))}
</div>
);
}
仅靠 console.error 在生产环境往往不够，我们需要专业的错误追踪服务。以 Sentry 为例，它能自动捕获未处理的异常并提供堆栈信息。
集成 Sentry
首先安装依赖：
npm install @sentry/react @sentry/tracing
