react项目中异常捕获处理
方法一:react16以后的版本增加异常捕获
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全局捕获异常
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捕获
在每个方法内进行捕获,对所有的字段进行校验
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; }
总结:项目内进行的异常判断少之又少,这是很危险的行为,每次接口出现的数据不符合预期都会出现空白页崩的现象。在未来的项目内,异常判断也要加入规范内,是项目很重要的一个组成部分,最起码的全局有异常捕获,其次每个具体的页面内判断字段是否存在,类型是否正确。