window.onerror 和window.addEventListener('error')的区别

1. 定义window.onerror全局事件函数

window.onerror = function(message, source, lineno, colno, error) { ... }
/ *
*   message：错误信息（字符串）。可用于HTML onerror=""处理程序中的event。
*   source：发生错误的脚本URL（字符串）
*   lineno：发生错误的行号（数字）
*   colno：发生错误的列号（数字）
*   error：Error对象
*/

• 事件监听器，只可以绑定一个，后一个会覆盖前一个
• 是一个全局变量，默认值为null;
• 当有js运行时错误触发时，window会触发error事件，并执行window.onerror()，onerror可以接受多个参数，错误信息更完善
• 没有返回值或者返回值为false的时候，异常信息会通过 console.error 的方式在控制台打印；
• 无论返回 true 或 false 或不返回，当有报错时都会阻止执行默认事件处理函数，即无法继续该报错代码的下一行逻辑。
• 无法全局捕获资源加载异常
• 可以捕获异步错误
• 不可以捕获 forEach 中抛出的异常

2. 在 window 上添加 addEventListener('error')  事件

• 事件处理器，可以绑定多个回调函数，会按照顺序执行回调函数
• 同样会阻止默认事件处理函数的执行，即该错误代码的下一行不会执行；
• 同样可以获取到 filename，message，error，lineno，colno
• 监听 js 运行时错误事件，会比window.onerror 先触发，与onerror的功能大体类似；
• 控制台会通过 console.error 方式打印出错误信息；
• 由于网络请求异常不会事件冒泡，因此必须在捕获阶段将其捕捉到才行，于是window.addEventListener 设置为 true 在捕获阶段进行，网络请求错误可以捕获，但是获取不到具体错误信息；
• 
  
  
• 如果 A 网站使用 B（CDN） 域名下的js资源，但是JS执行报错了，浏览器只会给出 Script error 错误提示，不会有具体报错信息，原因是：浏览器的同源策略限制。
  • 解决方案：
  • 1. script 增加 crossorigin,
  • 2. 服务端配置：Access-Control-Allow-Origin: b.com 
  • 3. 代码劫持后重写
• 但可以全局捕获资源加载异常的错误；
• 可以捕获异步错误
• 可以捕获 forEach 中抛出的异常
• 事件回调函数传参只有一个保存所有错误信息的参数，如下:

 

// 可以捕获资源加载异常
window.addEventListener("error",(error) => {
    console.log("捕获到异常：", error);
    },
    true
);
// 注意这里一定要设置 true，捕获阶段监听才可以捕获资源加载异常

console.log(notdefined111);
console.log("666");



//  可以捕获 forEach 中的异常
let arr = [1, 2, 3];
arr.forEach((item) => {
    throw new Error(" foreach 抛出异常");
});