请描述在前端应用中构建全局错误处理机制的完整方案,包括如何捕获未处理异常与Promise rejection,以及当错误发生时如何向用户展示友好提示信息。
考察说明
考查前端错误处理体系的设计能力,包括全局捕获、分类处理与用户通知。
回答思路
- 【回答框架 1】全局错误处理需覆盖同步异常、异步Promise rejection、资源加载错误等。浏览器可通过window.onerror或window.addEventListener('error')捕获未捕获异常,通过window.addEventListener('unhandledrejection')捕获未处理的Promise拒绝。
- 【回答框架 2】应区分错误级别与类型:运行时错误、网络错误、资源错误。网络错误可结合axios等请求库的拦截器统一处理,资源错误可监听error事件,但需注意捕获阶段避免重复。
- 【回答框架 3】捕获错误后应进行统一处理:记录错误信息到监控平台(如Sentry),同时根据错误类型映射用户提示文案,使用全局消息组件展示友好提示,避免原始错误详情暴露。
- 【回答框架 4】需设计降级方案:对局部错误优先局部处理,全局兜底;对可恢复错误提供重试机制;对致命错误展示错误页或引导刷新。同时避免提示刷屏,需做节流与去重。
- 【关键点 1】用window.onerror捕获同步异常,unhandledrejection捕获Promise异常。
- 【关键点 2】请求库拦截器统一处理网络错误与业务码错误。
- 【关键点 3】错误提示需分级:可忽略、可重试、严重错误,并做节流去重。
- 【关键点 4】上报错误到监控平台,同时保留用户操作上下文。
- 【易错点 1】不要对所有错误都弹出提示,易造成骚扰,需按严重级别过滤。
- 【易错点 2】避免在全局错误处理中再次抛错,防止死循环,需用try-catch包裹处理逻辑。
- 【易错点 3】unhandledrejection事件中event.preventDefault()可阻止默认控制台报错,但需谨慎使用。