详解JavaScript错误捕获和上报流程

前言

怎么捕获错误并且处理，是一门语言必备的知识。在JavaScript中也是如此。

那怎么捕获错误呢？初看好像很简单，try-catch就可以了嘛！但是有的时候我们发现情况却繁多复杂。

Q1: 同步可以try-catch,但一个异步回调，比如setTimeOut里的函数还可以try-catch吗？
Q2: Promise的错误捕获怎么做？
Q3: async/await怎么捕获错误？
Q4: 我能够在全局环境下捕获错误并且处理吗？
Q5: React16有什么新的错误捕获方式吗？
Q6: 捕获之后怎么上报和处理？

问题有点多，我们一个一个来。

Q1. 同步代码里的错误捕获方式

在同步代码里，我们是最简单的，只要try-catch就完了

function test1 () {
   
  try {
   
    throw Error ('callback err');
  } catch (error) {
   
    console.log ('test1:catch err successfully');
  }
}
test1();

Q2. 普通的异步回调里的错误捕获方式（Promise时代以前）

上面的问题来了，我们还能通过直接的try-catch在异步回调外部捕获错误吗？我们试一试

// 尝试在异步回调外部捕获错误的结果
function test2 () {
   
  try {
   
    setTimeout (function () {
   
      throw Error ('callback err');
    });
  } catch (error) {
   
    console.log ('test2:catch err successfully');
  }
}
test2(); 

输出

注意这里的Uncaught Error的文本，它告诉我们错误没有被成功捕捉。

为什么呢？ 因为try-catch的是属于同步代码，它执行的时候，setTimeOut内部的的匿名函数还没有执行呢。而内部的那个匿名函数执行的时候，try-catch早就执行完了。（ error的内心想法：哈哈，只要我跑的够慢，try-catch还是追不上我！）

但是我们简单想一想，诶我们把try-catch写到函数里面不就完事了嘛！

function test2_1 () {
   
  setTimeout (function () {
   
    try {
   
      throw Error ('callback err');
    } catch (error) {
   
      console.log ('test2_1:catch err successfully');
    }//需要获取资料的朋友请加Q君样：290194256*
  });
}
test2_1();

输出结果如下，告诉我们这方法可行

总结下Promise时代以前，异步回调中捕获和处理错误的方法

在异步回调内部编写try-catch去捕获和处理，不要在外部哦

很多异步操作会开放error事件，我们根据事件去操作就可以了

Q3. Promise里的错误捕获方式

可通过Promise.catch方法捕获

function test3 (