面试题答案
一键面试1. 错误边界的基本理解
错误边界是 React 组件，它可以捕获并处理其子组件树中抛出的 JavaScript 错误，记录这些错误，并展示备用 UI 而不是崩溃的子组件树。
2. 整体部署策略
- 顶层错误边界：在应用的顶层（例如
App组件外层）包裹一个错误边界组件。这样可以捕获整个应用中未处理的错误，提供统一的错误处理界面，比如显示“很抱歉，应用出现了错误”等友好提示。 - 分层部署：针对多层嵌套组件，在每一层关键的组件边界处（例如不同功能模块的入口组件）也部署错误边界。这样即使顶层错误边界未捕获到错误，特定模块内的错误边界也能处理本模块内的错误，避免错误向上传播导致整个应用崩溃。
3. 确保有效捕获各类错误
- 错误类型覆盖：在错误边界的
componentDidCatch方法中，不仅要处理普通的 JavaScript 运行时错误，还要考虑 Promise 拒绝错误。可以使用window.addEventListener('unhandledrejection', function (event) {...})来捕获未处理的 Promise 拒绝，并通过错误边界进行处理。 - 测试覆盖：编写全面的单元测试和集成测试，模拟各种错误场景，确保错误边界能够正确捕获和处理错误。例如，在子组件中故意抛出不同类型的错误，验证错误边界是否能展示正确的备用 UI 并记录错误。
4. 避免与第三方库的兼容性问题
- 文档查阅：在使用第三方库之前，仔细查阅其文档，了解是否有特定的错误处理机制或与错误边界相关的兼容性说明。有些第三方库可能已经内置了错误处理，需要与之配合。
- 沙箱隔离：可以考虑将第三方库组件包裹在一个沙箱环境中。例如，使用
iframe或一些专门的沙箱工具，将第三方库与主应用隔离，这样第三方库内部的错误不会直接影响到主应用的错误处理流程。 - 版本兼容性：确保使用的第三方库版本与 React 及项目中的其他依赖版本兼容。通过查阅第三方库的版本发布说明，了解其对 React 版本的支持情况以及错误处理相关的变更。
5. 避免微前端架构下不同模块间的错误干扰
- 独立错误边界：为每个微前端模块部署独立的错误边界。这样每个模块内的错误不会影响到其他模块，各个微前端可以独立展示错误提示或进行错误处理。
- 错误日志区分：在记录错误日志时，添加模块标识，以便清晰区分错误来自哪个微前端模块。这样在排查问题时，可以快速定位到具体模块。
- 通信机制：建立微前端之间的错误通信机制。如果一个微前端模块的错误可能会影响到其他模块，通过特定的通信渠道（如事件总线、消息队列等）通知相关模块进行相应处理，而不是让错误直接传播导致整个应用崩溃。