js系列-异常的处理

为什么要处理异常？

异常是不可控的，会影响最终的呈现结果，但是我们有充分的理由去做这样的事情。

• 增强用户体验；

• 远程定位问题；

• 未雨绸缪，及早发现问题；

• 无法复线问题，尤其是移动端，机型，系统都是问题；

• 完善的前端方案，前端监控系统；

• 对于 JS 而言，我们面对的仅仅只是异常，异常的出现不会直接导致 JS 引擎崩溃，最多只会使当前执行的任务终止。

需要处理的异常：

• JS 语法错误、代码异常

• AJAX 请求异常

• 静态资源加载异常

• Promise 异常

• Iframe 异常

• 跨域 Script error

• 崩溃和卡顿

异常的捕获方法：

• try catch：try catch只能捕获到同步的运行时错误，对语法和异步错误却无能为力，捕获不到。 

  try { var a = 1; var b = a + c; } catch (e) { // 捕获处理 console.log(e); // ReferenceError: c is not defined }

• window.error:相比try catch来说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); // 异常堆栈信息 }; console.log(a);

通过异常捕获问题：

• 使用window.error 进行异常上报

  window.onerror = function(errorMessage, scriptURI, lineNo, columnNo, error) { // 构建错误对象 var errorObj = { errorMessage: errorMessage || null, scriptURI: scriptURI || null, lineNo: lineNo || null, columnNo: columnNo || null, stack: error && error.stack ? error.stack : null }; if (XMLHttpRequest) { var xhr = new XMLHttpRequest(); xhr.open('post', '/middleware/errorMsg', true); // 上报给node中间层处理 xhr.setRequestHeader('Content-Type', 'application/json'); // 设置请求头 xhr.send(JSON.stringify(errorObj)); // 发送参数 } }

• 使用sourceMap：在webpack内可以进行设置

• Vue支持捕获全局异常

  Vue.config.errorHandler = function (err, vm, info) { let { message, // 异常信息 name, // 异常名称 script, // 异常脚本url line, // 异常行号 column, // 异常列号 stack // 异常堆栈信息 } = err;

  // vm为抛出异常的 Vue 实例
  // info为 Vue 特定的错误信息，比如错误所在的生命周期钩子
  

  }