浏览器端错误捕获处理方法笔记

summary

1. window.onerror 无法捕获 onunhandledrejection 错误
2. try...catch 无法捕获异步错误，包括 setTimeout 和 promise。可以捕获 async...await 错误
3. promise 被 rejected，在有 onRejected 的情况下，onRejected 发挥作用，catch 并未被调用；在没有onRejected 的情况下 catch 发挥作用
4. onResolve 和 onRejected 里的错误，可以被后面的 catch 捕获，无法被 try...catch 捕获

other

1. try...catch 也无法捕获语法错误
2. 如果想使用 window.onerror 函数消化错误，需要显示返回 true，以保证错误不会向上抛出，控制台也就不会看到一堆错误提示。
3. 跨域之后 window.onerror 在很多浏览器中是无法捕获异常信息的。要统一返回 Script error，这就需要 script 脚本设置为：
   crossorigin="anonymous"
4. 处理网络加载错误：使用 window.addEventListener('error') 方式对加载异常进行处理。注意这时候我们无法使用 window.onerror 进行处理， 因为 window.onerror 事件是通过事件冒泡获取 error 信息的，而网络加载错误是不会进行事件冒泡的。
5. 怎么区分网络资源加载错误和其他一般错误：普通错误的 error 对象中会有一个 error.message 属性，表示错误信息，而资源加载错误对应的 error 对象却没有，

test code

window.onerror = () => { console.log('window.onerror')}
window.onunhandledrejection = () => { console.log('window.onunhandledrejection') }

const fetchDataSuccess = () => Promise.resolve({ name:'123'})

const fetchDataFail = () => Promise.reject({ name:'123'})

const testTryCatch = async() =>{
   try{
    // Promise.reject('reject')
    // throw Error('err')
       await fetchDataFail()
       console.log('fetch success')
    
  } catch(e){
    console.log('catch error:',e)
  } 
}

const testPromiseError = () => {
  try{
  new Promise((resolve, reject) => {
    throw new Error()
      // resolve({})
  }).then( () => {
    console.log('resolved')
      // throw Error()
  }, err => {
    console.log('rejected')
    throw err
  })
  // .catch(err => {
  //   console.log('catch')
  // })

  }catch(e){
      console.log('testPromiseError try-catch')
  }
}

// testTryCatch();
// testPromiseError();

from: https://fe.mbear.top/xing-neng-you-hua/032-xing-neng-jian-kon...