编辑“︁JavaScript错误处理策略”︁

= JavaScript错误处理策略 =

== 介绍 ==

在JavaScript开发中，错误处理是确保代码健壮性和用户体验的关键环节。错误处理策略指的是开发者预先设计的机制，用于捕获、诊断和处理运行时可能出现的异常情况。良好的错误处理能：

1. 防止程序崩溃
2. 提供有意义的错误信息
3. 保持应用状态稳定
4. 辅助调试过程

JavaScript提供了多种错误处理机制，从基础的<code>try-catch</code>到现代的异步错误处理模式。

== 错误类型 ==

JavaScript中常见的错误类型包括：

{| class="wikitable"
|+ 主要错误类型
! 错误类型 !! 描述 !! 示例
|-
| <code>SyntaxError</code> || 语法错误 || <code>const 1invalid = 5;</code>
|-
| <code>ReferenceError</code> || 引用未定义变量 || <code>undefinedFunction();</code>
|-
| <code>TypeError</code> || 类型操作错误 || <code>null.toString()</code>
|-
| <code>RangeError</code> || 数值超出范围 || <code>new Array(-1)</code>
|-
| <code>自定义错误</code> || 开发者定义的错误 || <code>throw new Error("自定义消息")</code>
|}

== 基本错误处理 ==

=== try-catch-finally ===

最基本的错误处理结构：

<syntaxhighlight lang="javascript">
try {
    // 可能出错的代码
    const result = riskyOperation();
    console.log(result);
} catch (error) {
    // 错误处理
    console.error("操作失败:", error.message);
} finally {
    // 无论是否出错都会执行
    cleanupResources();
}
</syntaxhighlight>

'''输入/输出示例'''：
<syntaxhighlight lang="javascript">
function divide(a, b) {
    if (b === 0) throw new Error("除数不能为零");
    return a / b;
}

try {
    console.log(divide(10, 2));  // 输出: 5
    console.log(divide(10, 0));  // 抛出错误
} catch (e) {
    console.log(e.message);      // 输出: "除数不能为零"
}
</syntaxhighlight>

== 异步错误处理 ==

=== Promise的.catch() ===

处理Promise链中的错误：

<syntaxhighlight lang="javascript">
fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => processData(data))
    .catch(error => {
        console.error("请求失败:", error);
        return getFallbackData();
    });
</syntaxhighlight>

=== async/await中的try-catch ===

<syntaxhighlight lang="javascript">
async function loadData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        return processData(data);
    } catch (error) {
        console.error("加载数据失败:", error);
        return null;
    }
}
</syntaxhighlight>

== 错误传播策略 ==

<mermaid>
graph TD
    A[函数调用] --> B{可能出错?}
    B -->|是| C[处理错误]
    B -->|否| D[继续执行]
    C --> E{能恢复吗?}
    E -->|是| F[恢复并继续]
    E -->|否| G[向上抛出]
</mermaid>

最佳实践原则：
1. 在能够处理错误的层级捕获错误
2. 无法处理时应向上传播
3. 添加有意义的错误上下文

== 自定义错误 ==

创建特定错误类型有助于错误分类：

<syntaxhighlight lang="javascript">
class NetworkError extends Error {
    constructor(message, statusCode) {
        super(message);
        this.name = "NetworkError";
        this.statusCode = statusCode;
    }
}

try {
    throw new NetworkError("API不可用", 503);
} catch (e) {
    if (e instanceof NetworkError) {
        console.error(`${e.name}: ${e.message} (状态码: ${e.statusCode})`);
    }
}
</syntaxhighlight>

== 全局错误处理 ==

=== 浏览器环境 ===

<syntaxhighlight lang="javascript">
// 未捕获的异常
window.addEventListener('error', (event) => {
    console.error("全局错误:", event.error);
    // 可以发送错误日志到服务器
    return true; // 阻止默认错误提示
});

// 未处理的Promise拒绝
window.addEventListener('unhandledrejection', (event) => {
    console.error("未处理的Promise拒绝:", event.reason);
});
</syntaxhighlight>

=== Node.js环境 ===

<syntaxhighlight lang="javascript">
process.on('uncaughtException', (error) => {
    console.error("未捕获异常:", error);
    // 重要：在记录错误后应退出进程
    process.exit(1);
});

process.on('unhandledRejection', (reason, promise) => {
    console.error("未处理的Promise拒绝:", reason);
});
</syntaxhighlight>

== 错误日志记录 ==

有效的错误日志应包含：
* 错误消息
* 堆栈跟踪
* 时间戳
* 相关上下文数据

示例日志结构：
<syntaxhighlight lang="javascript">
function logError(error, context = {}) {
    const entry = {
        timestamp: new Date().toISOString(),
        message: error.message,
        stack: error.stack,
        type: error.name,
        context
    };
    // 发送到日志服务
    sendToLogServer(entry);
}
</syntaxhighlight>

== 防御性编程技巧 ==

1. 参数验证：
<syntaxhighlight lang="javascript">
function calculateArea(width, height) {
    if (typeof width !== 'number' || typeof height !== 'number') {
        throw new TypeError("参数必须为数字");
    }
    if (width <= 0 || height <= 0) {
        throw new RangeError("参数必须为正数");
    }
    return width * height;
}
</syntaxhighlight>

2. 默认值和可选链：
<syntaxhighlight lang="javascript">
const userName = user?.profile?.name ?? '匿名';
</syntaxhighlight>

3. 使用Object.freeze防止意外修改：
<syntaxhighlight lang="javascript">
const config = Object.freeze({
    apiUrl: 'https://api.example.com',
    timeout: 5000
});
</syntaxhighlight>

== 实际案例 ==

'''案例：表单验证错误处理'''

<syntaxhighlight lang="javascript">
class ValidationError extends Error {
    constructor(field, message) {
        super(message);
        this.field = field;
        this.name = "ValidationError";
    }
}

function validateUserInput(input) {
    if (!input.username) {
        throw new ValidationError("username", "用户名不能为空");
    }
    if (input.password.length < 8) {
        throw new ValidationError("password", "密码至少8个字符");
    }
}

try {
    validateUserInput({ username: "", password: "123" });
} catch (error) {
    if (error instanceof ValidationError) {
        showErrorOnField(error.field, error.message);
    } else {
        showGenericError();
    }
}
</syntaxhighlight>

== 性能考虑 ==

错误处理对性能的影响：
* <code>try-catch</code>块在非错误路径上几乎没有性能开销
* 错误对象的创建和堆栈跟踪收集可能较昂贵
* 过多的错误检查可能影响代码可读性

优化建议：
* 避免在热代码路径中频繁抛出错误
* 对预期内的"错误"情况使用返回码可能更高效
* 使用<code>Error.stackTraceLimit</code>控制堆栈跟踪深度

== 数学表达示例 ==

在科学计算中可能需要的错误检查：

<math>
\text{标准差计算检查: } \sigma = \sqrt{\frac{1}{N}\sum_{i=1}^N (x_i - \mu)^2} \quad \text{要求} \quad N > 1
</math>

对应代码实现：
<syntaxhighlight lang="javascript">
function standardDeviation(values) {
    if (values.length <= 1) {
        throw new Error("至少需要2个数据点");
    }
    // 计算实现...
}
</syntaxhighlight>

== 总结 ==

JavaScript错误处理的关键要点：
* 使用适当的错误类型传达问题本质
* 在正确的层级处理错误
* 为终端用户提供友好信息，同时保留调试细节
* 实现全面的错误日志记录
* 平衡防御性编程和代码简洁性

良好的错误处理策略能显著提高应用稳定性和可维护性，是专业JavaScript开发的重要组成部

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript最佳实践]]