标准答案
- React 渲染错误可以通过 Error Boundary 捕获并展示降级 UI，同时上报错误信息。
- 接口错误应在请求层统一归一化，并带上 requestId、状态码、业务码和页面上下文。
- 全局错误可以监听 window error、unhandledrejection 和资源加载失败，但要注意噪声过滤。
- 用户行为追踪应记录关键路径，例如曝光、点击、提交、失败和重试，而不是采集所有细节。
- 上报数据要脱敏，避免上传 token、手机号、邮箱、完整请求体等敏感信息。
题目解析
这道题的重点是可定位和合规。上报不是越多越好，能把一次问题和用户操作链路串起来才有价值。
Error Boundary 不能捕获异步回调、事件处理器和服务端错误，所以还需要请求层和全局监听配合。
生产环境要考虑采样、去重、版本号、source map、用户会话和隐私边界。
代码示例
下面用 Error Boundary 在降级展示的同时上报组件错误。
TSX
class AppErrorBoundary extends React.Component<Props, { hasError: boolean }> {
state = { hasError: false }
static getDerivedStateFromError() {
return { hasError: true }
}
componentDidCatch(error: Error, info: React.ErrorInfo) {
reportError(error, { componentStack: info.componentStack })
}
render() {
return this.state.hasError ? <ErrorFallback /> : this.props.children
}
}常见误区
- 只接入 Error Boundary，就以为所有错误都能被捕获。
- 上报完整请求参数和用户输入，造成隐私或合规风险。
- 埋点没有事件命名规范和上下文字段，后续无法分析。