段落1

众所周知，也不是很多人知，前端捕获错误三大秘诀：

try catch 不能捕获异步错误
window.onerror 不能捕获promise reject
unhandledrejection 仅可以捕获 Promise reject

各有各的用处，各有各的弊端，那么总而言之，只能三剑合一，一键3连，才能发挥出巨大的威力

且慢，此处有一个彩蛋，不算彩蛋，俺们用vue，所以还得知道vue的全局错误捕获方法

Vue.config.errorHandler = function (err, vm, info) {  
// handle error  
// `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子  
// 只在 2.2.0+ 可用  
}

封装一个全局的错误捕获方法

// src/utils/error-handler.js  
 
import Vue from 'vue'
/**  
 * 全局错误处理函数  
 * @param {Error|string} err 错误对象或错误信息  
 * @param {Vue} vm 触发错误的Vue实例  
 * @param {string} info Vue特有的错误信息字符串  
 */  
function globalErrorHandler(err, vm, info) {  
  // 这里可以根据需要处理错误，例如记录日志、发送错误报告等  
  console.error(`捕获到Vue组件错误: ${err.toString()}`);  
  console.error(`错误来源组件: ${vm.$options.name || '匿名组件'}`);  
  if (vm.$parent && vm.$parent.$options.name) {  
    console.error(`父组件: ${vm.$parent.$options.name}`);  
  }  
  console.error(`错误信息: ${info}`);  
  
  // 可以将错误发送到服务器等  
  // reportErrorToServer(err, vm, info);  
}  
  
// 设置Vue的全局错误处理器  
Vue.config.errorHandler = globalErrorHandler;  
  
// 捕获全局的JavaScript错误  
window.onerror = function(message, source, lineno, colno, error) {  
  const errorMessage = `捕获到全局JavaScript错误: ${message} - 源: ${source} - 行号: ${lineno} - 列号: ${colno}`;  
  console.error(errorMessage);  
  // 可以将错误发送到服务器等  
  // reportErrorToServer(errorMessage, null, 'window.onerror');  
  return true; // 阻止默认错误处理（如显示浏览器默认的错误页面）  
};  
  
// 捕获未处理的Promise拒绝  
window.addEventListener('unhandledrejection', event => {  
  const errorMessage = `捕获到未处理的Promise拒绝: ${event.reason}`;  
  console.error(errorMessage);  
  // 可以将错误发送到服务器等  
  // reportErrorToServer(errorMessage, null, 'unhandledrejection');  
});  
  
// 假设的发送错误到服务器的函数  
// function reportErrorToServer(error, vm, type) {  
//   // 实现发送逻辑  
// }

在main.js引入充当副作用即可

// src/main.js  
import './utils/error-handler';

最后

---有没有人不知道异步错误不会阻塞后面的代码执行的？不会吧不会吧，不会还有人不知道吧---

---完结，听说点赞后bug会变少---

vue项目全局捕获错误用上了金丝细网

段落1

封装一个全局的错误捕获方法

在main.js引入充当副作用即可

最后