react项目中异常捕获处理

方法一：react16以后的版本增加异常捕获

?

1 2 3 4 5 6 7

componentDidCatch(error, info) {     const isNewError = (error.toString() !== this.state.prevError.toString());// should only run once     if (isNewError) {//判断两次错误不一致才再次执行，不然一直循环       this.logErrorToMyService(error, info);       this.setState({ prevError: error });     }   }

方法二：使用window.onerror全局捕获异常

?

1 2 3 4 5 6 7

window.onerror = function (errorMessage, scriptURI, lineNo, columnNo, error) {    console.log('errorMessage: ' + errorMessage); // 异常信息    console.log('scriptURI: ' + scriptURI); // 异常文件路径    console.log('lineNo: ' + lineNo); // 异常行号    console.log('columnNo: ' + columnNo); // 异常列号    console.log('error: ' + error); // 异常堆栈信息  };

方法三：使用try catch捕获

在每个方法内进行捕获，对所有的字段进行校验

?

1 2 3 4 5 6 7 8 9 10 11

let optionfloor = null; try {     optionfloor = (       floorList ? floorList.map((item) => {         return <Option key={item.id} value={item.id}>{item.name}</Option>       }) : null     )   } catch (e) {     optionfloor = null;         }

总结：项目内进行的异常判断少之又少，这是很危险的行为，每次接口出现的数据不符合预期都会出现空白页崩的现象。在未来的项目内，异常判断也要加入规范内，是项目很重要的一个组成部分，最起码的全局有异常捕获，其次每个具体的页面内判断字段是否存在，类型是否正确。