JavaScript 浏览器端错误捕获：window.onerror、try...catch 与 Promise 处理详解

本文整理关于 JavaScript 在浏览器端进行错误捕获与处理的笔记及解决示例，旨在帮助开发者理解不同场景下的错误处理机制。

• 需要明确的是，window.onerror 事件处理器无法捕获由 onunhandledrejection 触发的未处理 Promise 拒绝错误。这两者属于不同的错误监听机制。
• 传统的 try...catch 语句无法捕获异步操作中的错误，例如 setTimeout 回调或普通的 Promise 链。但是，在 async/await 语法中，try...catch 可以正常捕获 await 表达式抛出的异常。
• 当 Promise 处于 rejected 状态时，错误处理逻辑取决于是否提供了 onRejected 回调。如果提供了 onRejected 函数，则由该函数负责处理错误，此时后续的 catch 方法不会被调用；若未提供 onRejected，则由后续的 catch 方法接管处理。
• 在 Promise 的 onResolve 或 onRejected 回调函数内部发生的错误，无法被外层的 try...catch 捕获，但可以被链式调用中后续的 catch 方法捕获。

其他错误处理场景与注意事项。

• try...catch 语句同样无法捕获 JavaScript 运行时的语法错误（SyntaxError），这类错误通常在代码解析阶段就会被抛出。
• 若希望使用 window.onerror 函数来完全消化（处理并屏蔽）错误，必须在事件处理函数中显式返回 true。这样做的目的是防止错误继续向上抛出，从而避免控制台输出大量的错误提示信息。
• 对于跨域加载的脚本，许多浏览器中的 window.onerror 无法捕获具体的异常信息，通常只返回 'Script error'。为了解决这一问题，需要在加载脚本的 script 标签中显式设置 crossorigin="anonymous" 属性，以便浏览器正确传递错误信息。
• 处理网络资源（如图片、脚本、样式表）加载错误时，应使用 window.addEventListener('error') 方式。注意，此时不能使用 window.onerror，因为 window.onerror 依赖事件冒泡机制获取错误信息，而网络加载错误不会发生事件冒泡。
• 区分网络资源加载错误与其他一般运行时错误的方法在于 error 对象的属性。一般运行时错误的 error 对象包含 error.message 属性，用于描述错误信息；而网络资源加载错误的 error 对象通常不包含该属性。

以下是相关的测试代码示例，展示了上述错误捕获机制的实际应用。

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();

参考来源：https://fe.mbear.top/xing-neng-you-hua/032-xing-neng-jian-kon...

以上就是浏览器端错误捕获处理方法笔记解决示例的详细内容，更多关于浏览器端错误捕获的资料请关注本站其它相关文章！