前端容错

一、两个脚本独立执行，彼此是不影响的

<script>
  error
  console.log(1)
</script>
<script>
  // 会执行，两种脚本时独立的
  console.log(2)
</script>

二、try,catch

<script type="text/javascript">
  // try不能检测到语法错误,此法解析就挂了，此法解析识别不了中文的分号,所以不能对他解析,先此法解析，然后语法解析，语法解析错误是捕获不了的,onerror也不行
  try{
    var error = 'error'；
  }catch(e){
    console.log("老哥没有检查到错误")
    console.log(e)
  }
</script>

<script type="text/javascript">
  // try检测不到setTimeout(异步)中的错误
  try {
    setTimeout(()=>{
      error
    })
  } catch(e){
    console.log("老哥没有检查到错误")
    console.log(e)    
  }
</script>

三、window.onerror

<script type="text/javascript">
  window.onerror = function(msg,url,row,col,error){
    console.log("我知道错误了")
    console.log({
      msg,
      url,
      row,
      col,
      error
    })
    return true;
  };
  setTimeout(()=>{
    error
  })
  // onerror用来捕捉预料之外的错误，而try-catch用来在可预见情况下监控特定的错误，两者组合使用更加高效
  // window.onerror只有在函数返回true的时候，异常才不会向上抛出，否则即使知道异常的发生控制台还是会显示 错误
  // 当遇到<img src="./404.png"> 报404错误异常的时候，它捕获不到
</script>

四、 error监听

<script type="text/javascript">
  // 由于网络请求异常不会事件冒泡,因此必须在捕获阶段将其捕捉到,但是这种方式虽然可以捕捉到网络请求的异常，但是无法判断http的状态是404还是500等等所以还需要配合服务端日志进行排查分析
  window.addEventListener('error',function(msg,url,row,col,error){
    console.log("我知道404错误了")
    console.log(msg,url,row,col,error)
    return true;
  },true)

</script>
<img src="./404.png">

五、unhandledrejection 未处理的Promise

<script type="text/javascript">
  // 全局捕获promise error
  window.addEventListener("unhandledrejection",function(e){
    e.preventDefault()
    console.log("我知道promise错误了")
    console.log(e.reason)
    return true;
  })
  Promise.reject("promise error")
  new Promise((resolve,reject)=>{
    reject('promise error')
  })
  new Promise((resolvet)=>{
    resolve()
  }).then(()=>{
    throw 'promise error'
  }) 
</script>