如何将Chrome控制台抛出的TypeError错误捕获并以Alert弹窗提示用户

• 你遇到的错误属于未处理的Promise拒绝异常，常规的window.onerror和error事件监听仅能捕获同步代码运行错误、资源加载错误，默认无法捕获Promise抛出的未捕获异常。
• 若报错代码运行在type="module"的ES模块脚本中，部分浏览器的全局错误事件对模块内未捕获错误的捕获也会存在限制。

1. 新增Promise未捕获异常的全局监听，代码如下：

window.addEventListener('unhandledrejection', function (evt) {
    // 可选：阻止默认行为，避免控制台重复输出错误
    evt.preventDefault();
    const error = evt.reason;
    alert(`Error: ${error.message}\n堆栈信息：${error.stack}`);
});

2. 补充原有同步错误监听的返回逻辑，确保错误不会被浏览器默认行为覆盖：

window.onerror = function (errorMsg, url, lineNumber, column, errorObj) {
    alert(
      `Error: ` +
        errorMsg +
        ` Script: ` +
        url +
        ` Line: ` +
        lineNumber +
        ` Column: ` +
        column +
        ` StackTrace: ` +
        errorObj
    );
    // 必须返回true，阻止浏览器默认打印错误到控制台的行为
    return true;
};

3. 若报错代码位于ES模块中，可选择将模块改为普通脚本（无模块依赖场景），或在模块入口处统一包裹try catch做兜底处理。
4. 检查原有try catch写法是否适配异步场景：如果报错代码位于异步逻辑/Promise链内，try catch需要放在异步逻辑内部才能生效，示例如下：

// 异步场景正确写法
async function fetchData() {
    try {
        // 你的业务代码
        let something = undefined;
        let undefined = something.test;
    } catch (err) {
        alert(err.message);
    }
}

配置完成后可运行以下测试代码验证监听是否生效：

// 测试Promise未捕获错误
Promise.reject(new Error('测试Promise异常'));
// 测试同步运行错误
setTimeout(() => {
    const test = undefined;
    test.testProp;
}, 500);

如果上述测试的两类错误都能正常弹出alert，说明全局监听配置正确，再排查业务代码是否存在阻止错误冒泡的逻辑即可。

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