处理脚本错误的恢复方案

JavaScript在浏览器环境中的执行可能会遇到各种不可预见的错误，这些错误如果不妥善处理，可能导致整个页面功能瘫痪。本文将探讨在BOM(Browser Object Model)环境下处理脚本错误的几种有效恢复方案。

1. try-catch语句的基本使用

最基本的错误处理机制是使用try-catch语句块：

javascript 复制代码

try {
    // 可能出错的代码
    const result = someUndefinedFunction();
} catch (error) {
    // 错误处理
    console.error('发生错误:', error.message);
    // 恢复操作
    fallbackOperation();
}

2. window.onerror全局错误处理

对于未捕获的错误，可以使用window.onerror全局错误处理器：

javascript 复制代码

window.onerror = function(message, source, lineno, colno, error) {
    console.log('全局捕获的错误:', {
        message,    // 错误信息
        source,     // 发生错误的脚本URL
        lineno,     // 行号
        colno,      // 列号
        error       // Error对象
    });
    
    // 返回true可以阻止浏览器默认错误处理
    return true;
};

3. window.addEventListener('error')捕获资源加载错误

对于资源加载错误(如图片、脚本等)，需要使用事件监听方式：

javascript 复制代码

window.addEventListener('error', function(event) {
    // 检查是否是资源错误
    if (event.target && (event.target.tagName === 'IMG' || 
                         event.target.tagName === 'SCRIPT' || 
                         event.target.tagName === 'LINK')) {
        console.log('资源加载失败:', event.target.src || event.target.href);
        // 替换为备用资源
        if (event.target.tagName === 'IMG') {
            event.target.src = 'fallback-image.png';
        }
    }
}, true); // 注意使用捕获阶段

4. Promise错误处理

对于异步操作中的错误，需要处理Promise的rejection：

javascript 复制代码

// 单个Promise的错误处理
someAsyncOperation()
    .then(result => {
        // 成功处理
    })
    .catch(error => {
        console.error('异步操作失败:', error);
        // 恢复操作
    });

// 全局未处理的Promise rejection
window.addEventListener('unhandledrejection', function(event) {
    console.error('未处理的Promise rejection:', event.reason);
    // 可以在这里进行全局恢复处理
    event.preventDefault(); // 阻止默认行为(控制台报错)
});

5. 错误边界(Error Boundaries)模式

借鉴React的思想，可以创建错误边界组件：

javascript 复制代码

function ErrorBoundary({ children }) {
    try {
        return children();
    } catch (error) {
        console.error('组件渲染错误:', error);
        // 显示降级UI
        return document.createElement('div').textContent = '抱歉，发生了错误';
    }
}

// 使用方式
ErrorBoundary({
    children: () => {
        // 可能出错的组件代码
        renderComplexComponent();
    }
});

6. 错误恢复策略

根据错误的严重程度，可以采取不同的恢复策略：

重试机制：对于暂时性错误(如网络问题)

javascript 复制代码

function withRetry(fn, maxRetries = 3, delay = 1000) {
    return async function(...args) {
        let lastError;
        for (let i = 0; i < maxRetries; i++) {
            try {
                return await fn(...args);
            } catch (error) {
                lastError = error;
                await new Promise(res => setTimeout(res, delay));
            }
        }
        throw lastError;
    };
}

功能降级：当主要功能不可用时提供简化版功能
状态恢复：使用localStorage/sessionStorage保存状态，错误后恢复

7. 错误日志上报

为了持续改进，应该将错误信息上报到服务器：

javascript 复制代码

function logError(error, context = {}) {
    const errorData = {
        message: error.message,
        stack: error.stack,
        timestamp: new Date().toISOString(),
        userAgent: navigator.userAgent,
        url: window.location.href,
        ...context
    };
    
    // 使用navigator.sendBeacon确保在页面卸载时也能发送
    navigator.sendBeacon('/api/error-log', JSON.stringify(errorData));
}

window.addEventListener('error', (event) => {
    logError(event.error);
});

最佳实践建议

在生产环境中始终启用错误处理机制
不要吞没所有错误，保留对调试有用的信息
根据错误类型采取适当的恢复策略
为用户提供友好的错误提示，避免技术细节
监控错误发生率，持续改进代码质量

通过合理运用这些错误处理技术，可以显著提高Web应用的健壮性和用户体验，即使出现脚本错误也能保持基本功能可用或优雅降级。