当前页面的脚本发生错误如何解决win7 javascript 异常处理的一些经验

当前页面的脚本发生错误如何解决win7 javascript 异常处理的一些经验

简介：为了提升应用稳定性，我们对前端项目开展了脚本异常治理的工作，对生产上报的js error进行了整体排查，试图通过降低脚本异常的发生频次来提升相关告警的准确率，结合最近在这方面阅读的相关资料，尝试阶段性的做个总结，下面我们来介绍下js异常处理的一些经验。

作者 | 肖荣强(路迁)

来源 | 阿里开发者公众号

写在前面

为了提升应用稳定性，我们对前端项目开展了脚本异常治理的工作，对生产上报的js error进行了整体排查，试图通过降低脚本异常的发生频次来提升相关告警的准确率，结合最近在这方面阅读的相关资料，尝试阶段性的做个总结，下面我们来介绍下js异常处理的一些经验。

先说概念

什么是异常

先来看一下官方的定义：

Error objects are thrown when runtime errors occur. The Error object can also be used as a base object for user-defined exceptions.

描述的很简单，我们总结一下就是代码在执行过程中遇到了问题，程序已经无法正常运行了，Error对象会被抛出，这一点它不同于大部分编程语言里使用的异常对象Exception，甚至更适合称之为错误，应该说事实也确实如此，Error对象在未被抛出时候和js里其他的普通对象没有任何差别是不会引发异常的，同时Error 对象也可用于用户自定义错误的基础对象。

看下面两个例子：

try {
  const 123variable = 2;
} catch(e) {
  console.log('捕获到了：', e)
}

↓↓↓执行结果↓↓↓

结论：只有在执行过程中的异常可以被捕获，语法解析阶段的异常或者不在当前同步任务中的异常都无法被捕获。

<script>
  function throwSomeError() {
    throw new Error('抛个异常玩玩');
    console.log('我估计是凉了，不会执行我了！');
  }
  throwSomeError();
  console.log('那么我呢？')
</script>
<script>
  console.log('大家猜猜我会执行吗？');
</script>

↓↓↓执行结果↓↓↓

以上红色信息里包含了异常信息（message）和栈跟踪（stack trace）信息，对于定位代码中的问题起到重要作用，可以看到栈跟踪是从底部文件位置21:15到顶部25:7位置的；前两个console在遇到异常时候未被执行，第二个script标签内的代码被正常执行。

结论：当任务执行过程中出现未处理的异常，会一直沿着调用栈一层层向外抛出（有点像事件冒泡），最终会导致当前任务被终止执行。当前任务终止后JS 线程会继续从任务队列中提取下一个任务继续执行。

异常的类型

1、以上这些异常很多都来会由Javascript引擎抛出，但异常类型都是实际的构造函数，旨在生成一个新的异常实例，所以你可以:

// 获取分页数据
const getPagedData = (pageIndex, pageSize) => {
  if(pageIndex < 0 || pageSize < 0 || pageSize > 1000) {
    throw new RangeError(`pageIndex 必须大于0, pageSize必须在0和1000之间`);
  }
  
  return [];
}
// 转换时间格式
const dateFormat = (dateObj) => {
  if(dateObj instanceof Date) {
    return 'formated date string';
  }
  
  throw new TypeError('传入的日期类型错误');
}