如何防止JS错误被隐藏/捕获？排查第三方库致控制台无报错问题

问题描述 #

控制台完全无法显示部分错误与警告，甚至调用未定义变量这类基础语法错误都没有任何提示。怀疑是引入的第三方库干扰了错误输出流程，涉疑依赖如下：

"@ckeditor/ckeditor5-build-classic": "^41.1.0",
"@xbs/webix-pro": "^10.2.4",
"backbone": "^1.6.0",
"dexie": "^3.2.4",
"webix-backbone": "^1.0.1"  

通用排查与解决方案 #

• 逐个移除可疑依赖定位问题：每次只移除一个第三方库，重新构建并运行项目，观察控制台是否恢复错误提示，以此锁定具体的问题库
• 检查库的错误拦截逻辑：查看可疑库的官方文档或源码，确认是否存在覆盖window.onerror、重写console.error/console.warn方法，或是通过全局try/catch吞掉错误的逻辑
• 强制恢复原生控制台方法：在项目入口文件最顶部，提前保存并重新挂载原生控制台方法，避免被后续加载的库覆盖：

// 保存原生控制台方法
const originalError = console.error;
const originalWarn = console.warn;
const originalLog = console.log;

// 重新挂载，确保输出不被拦截
console.error = (...args) => originalError.apply(console, args);
console.warn = (...args) => originalWarn.apply(console, args);
console.log = (...args) => originalLog.apply(console, args);

• 利用浏览器调试工具强制捕获异常：打开浏览器开发者工具的Sources面板，启用Pause on exceptions（勾选Uncaught exceptions甚至Caught exceptions），即使错误被库吞掉，也能在抛出时暂停执行，追踪到错误的触发点

个人解决方法 #

排查后发现是@xbs/webix-pro库默认启用了全局错误拦截，隐藏了控制台的错误输出。通过在项目入口处添加webix.debug()开启调试模式，即可恢复所有错误与警告的控制台提示：

// 入口文件加载Webix后立即执行
webix.debug();

内容的提问来源于stack exchange，提问作者Vasilii Suricov