本文转载自微信公众号《JS日报》，作者慧慧。转载本文请联系JS每日一问公众号。1.哪里不对？在我们日常的代码编写中是很常见的。比如在React项目中组件中写JavaScript代码错误，会导致React内部状态被破坏，导致整个应用崩溃。这不应该发生。React作为一个框架，对于错误处理也有自己的解决方案2.Howtodo为了解决错误导致整个应用崩溃的问题，react16引用了“错误边界”的新概念。错误边界是一种React组件。组件可以捕获其子组件树中任何位置发生的JavaScript错误，并在显示降级UI的同时打印它们，而不渲染那些子组件树崩溃渲染期间的错误边界，生命周期方法和整个组件树在构造函数中捕获错误的两个条件形成错误边界组件：使用staticgetDerivedStateFromError()使用componentDidCatch()抛出错误后，请使用staticgetDerivedStateFromError()渲染备用UI，并使用componentDidCatch()打印错误信息，如下：classErrorBoundaryextendsReact.Component{constructor(props){super(props);this.state={hasError:false};}staticgetDerivedStateFromError(error){//更新状态，以便下次渲染可以显示退化的UIreturn{hasError:true};}componentDidCatch(error,errorInfo){//也可以向服务器上报错误日志logErrorToMyService(error,errorInfo);}render(){if(this.state.hasError){//可以自定义降级后的UI和renderreturn

Somethingwentwrong.

;}returnthis.props.children;}}然后你可以使用自己的组件作为错误边界的子组件，如下：以下情况无法捕获经常：事件处理异步代码服务器端渲染错误自己抛出React16版本之后，渲染过程中发生的所有错误都会被打印到控制台除了错误信息和JavaScript堆栈之外，React16还提供了组件堆栈跟踪现在你可以准确的查看组件树中出现的错误信息：可以看到在错误信息下方的文字中有一个组件栈，方便我们跟踪错误边界捕捉不到的错误，比如事件处理过程中出现的问题，不会被捕获是因为在渲染过程中不会触发，不会在渲染过程中出现问题。这种情况下，可以使用js的try...catch...语法，如下：=this.handleClick.bind(this);}handleClick(){try{//执行操作，如果有错误则抛出}catch(error){this.setState({error});}}render(){if(this.state.error){return

Caughtanerror.

}returnClickMe}}另外可以监听onerror事件window.addEventListener('error',function(event){...})参考https://zh-hans.reactjs.org/docs/error-boundaries。网页格式