JavaScript错误处理实例：帮你快速定位网页卡顿问题

ref="/tag/88/" style="color:#643D3D;font-weight:bold;">网页突然白屏，按钮点不动，控制台一堆红字报错——这些场景你肯定遇到过。很多时候，问题就出在 JavaScript 的异常没处理好。别慌，看看这几个常见错误处理实例，能帮你快速理清思路。

1. 捕获未定义变量导致的运行时错误

比如你在写一个表单验证功能，不小心引用了一个还没定义的变量：

console.log(username.length); // 报错：Cannot read property 'length' of undefined

这种情况下页面直接卡住。加个 try-catch 就能兜底：

try {
    console.log(username.length);
} catch (error) {
    console.warn('变量未定义，使用默认值', error.message);
    username = '';
}

2. 处理 JSON 解析失败

从接口拿数据时，偶尔会收到格式不正确的 JSON 字符串。不处理就会抛 SyntaxError：

let data = '{"name": "张三", "age": }'; // 语法错误
try {
    let obj = JSON.parse(data);
} catch (e) {
    console.error('JSON 格式错误，已记录日志');
    // 可以上报到监控系统
}

加上 try-catch 后，即使解析失败也不会影响其他功能运行。

3. 监听全局未捕获的 Promise 异常

现代前端大量使用异步请求，但 .catch() 忘了写或者漏掉，错误就没了踪影。可以监听 unhandledrejection 事件：

window.addEventListener('unhandledrejection', function(event) {
    console.log('未捕获的Promise错误:', event.reason);
    // 避免页面崩溃，同时提醒开发者修复
});

比如某个 API 调用没加 catch，现在至少能在控制台看到提示，而不是默默失败。

4. 动态加载脚本出错时的 fallback 方案

有时候要加载第三方 SDK，网络不好或资源 404，页面就挂了。可以用 error 事件做降级：

let script = document.createElement('script');
script.src = 'https://cdn.example.com/widget.js';
script.onerror = function() {
    console.warn('第三方脚本加载失败，启用本地替代功能');
    initLocalWidget();
};
document.head.appendChild(script);

用户完全感知不到异常，体验自然就好多了。

5. 自定义错误类型，区分不同问题

项目大了以后，光靠 Error 不够用。可以自己定义错误类，方便排查：

class ApiError extends Error {
    constructor(url, status) {
        super(`API 请求失败: ${url}, 状态码: ${status}`);
        this.name = 'ApiError';
    }
}

// 使用场景
if (response.status === 500) {
    throw new ApiError('/api/user', 500);
}

这样在日志里一眼就能看出是接口问题，不是普通逻辑错误。

实际开发中，别指望代码永远不出错。关键是让错误可追踪、不影响主流程。把这些处理方式用起来，排错效率能提一大截。