JavaScript 运行时可能出现多种错误，这些错误是导致应用程序（尤其是 React 应用）白屏的常见原因。本文将深入探讨 JavaScript 的各种内置错误类型，并提供在 React 环境下有效的容错和错误处理策略。

常见的 JavaScript 错误类型

SyntaxError (语法错误)

当 JavaScript 引擎解析代码时遇到不符合语法规则的部分，就会抛出 SyntaxError。这通常在开发阶段就能被编辑器或构建工具捕获。

• 保留字冲突: 尝试使用 JavaScript 的保留关键字（如 enum, implements 等）作为标识符。
• 命名规范错误: 标识符（变量名、函数名等）不能以数字开头，必须以字母、下划线 (_) 或美元符号 ($) 开始。
• 非法标点符号: 在代码中使用了不期望或无效的标点符号，例如中文引号或横杠。
• JSON 解析错误: 当 JSON.parse() 遇到格式不正确的 JSON 字符串时，会抛出此错误。例如，JSON 对象或数组末尾的逗号。
• 分号缺失或不当使用: 尽管 JavaScript 有自动分号插入 (ASI) 机制，但在某些情况下（如字符串中包含单引号未正确转义），可能会导致语法错误。

这些错误通常在开发环境中容易被发现，因为现代 IDE 和构建工具会进行静态代码分析。

TypeError (类型错误)

TypeError 在值的类型与预期不符时发生。这是导致运行时白屏最常见的错误之一。

• 不可迭代对象: 在使用 for...of 循环或数组解构时，如果尝试迭代一个不可迭代的对象（如普通对象），则会抛出此错误。对象需要实现迭代协议（包括 [Symbol.iterator] 方法）才能被迭代。
• 空值或未定义值访问: 尝试访问 null 或 undefined 类型的属性或调用其方法，例如 null.property 或 undefined.method()。可选链 (?.) 操作符可以有效避免此类错误。
• 错误的函数调用: 调用一个不存在的函数或属性，例如 document.getElementByID (应为 getElementById) 或在普通对象上调用数组方法如 map。
• in 操作符误用: 在非对象类型（如字符串、null）上使用 in 操作符来检查属性，会导致 TypeError。

由于数据来源的多样性（API 响应、用户输入等），TypeError 经常在生产环境中出现，需要特别小心处理。

RangeError (范围错误)

当一个值超出其允许的范围时，会抛出 RangeError。这种情况相对较少见，通常发生在特定的数值计算或字符串操作中。

• 将无效值传递给 String.prototype.normalize()。
• 使用 Array 构造函数创建无效长度的数组（如负数）。
• 将错误参数传递给数值格式化方法（如 toFixed(), toPrecision()）。
• 使用 BigInt() 转换非整数（如 NaN）。

对于可能出现此类错误的情况，建议进行输入验证或使用 try...catch 块。

ReferenceError (引用错误)

当尝试引用一个未声明或未初始化的变量时，会抛出 ReferenceError。在非严格模式下，这通常表现为"variable is not defined"。

• 直接使用一个未声明的变量。
• 尝试对可选链访问的结果进行赋值（如 foo?.bar = 123 是无效的）。

这类错误在开发环境中很容易被发现。

其他错误类型

• InternalError: JavaScript 引擎内部错误，通常不应由开发者直接处理。
• EvalError: 与全局 eval() 函数相关，在现代 ECMAScript 规范中已不再抛出。
• URIError: 在使用全局 URI 处理函数（如 decodeURIComponent()）时，如果输入无效的 URI 序列，则会抛出此错误。使用这些函数时，建议配合 try...catch。

异常的 JavaScript 错误处理

Unhandled Rejection (未处理的 Promise 拒绝)

当一个 Promise 被拒绝 (reject) 且没有相应的 catch 或 then 中的第二个参数来处理这个拒绝时，会触发 unhandledrejection 事件。这可能导致信息丢失或难以追踪。可以通过监听全局的 unhandledrejection 事件来捕获这些错误。

window.addEventListener('unhandledrejection', event => {
    console.error('Unhandled Promise Rejection:', event.reason);
    // 可以在这里记录错误或向用户显示提示
});

// 示例:
Promise.reject("Something went wrong in a Promise");

手动抛出错误 (throw)

开发者可以主动使用 throw 语句抛出错误，以中断程序执行或表示特定条件的失败。这在封装逻辑或验证输入时非常有用。

function processData(data) {
    if (data === null || typeof data !== 'object') {
        throw new TypeError("Invalid data type provided.");
    }
    // ... process data
    return "Processed successfully";
}

try {
    processData(null);
} catch (error) {
    console.error(`Error caught: ${error.name} - ${error.message}`);
    // 可以在这里显示错误信息给用户
}

可以自定义错误类型，继承自 Error，以提供更丰富的错误信息和分类。

class NetworkError extends Error {
    constructor(message, statusCode) {
        super(message);
        this.name = "NetworkError";
        this.statusCode = statusCode;
    }
}

try {
    // 模拟网络请求失败
    throw new NetworkError("Failed to fetch resource", 500);
} catch (error) {
    if (error instanceof NetworkError) {
        console.error(`Network Error ${error.statusCode}: ${error.message}`);
    } else {
        console.error(`An unexpected error occurred: ${error.message}`);
    }
}

React 中的错误处理与容错

在 React 中，JavaScript 错误大致可分为两类：渲染时错误和执行时错误。

• 执行时错误: 发生在事件处理函数、生命周期方法（或 Hooks）等执行过程中。这类错误通常不会直接导致页面白屏，但会中断代码执行，可能导致 UI 状态不同步或功能异常（如按钮点击后一直处于加载状态）。
• 渲染时错误: 发生在组件的渲染过程（JSX 返回）中。自 React 16 起，任何未被"错误边界"捕获的渲染错误都会导致整个组件树的卸载，从而引发页面白屏。

错误边界 (Error Boundaries)

错误边界是 React 组件，它们可以捕获其子组件树中任何位置发生的 JavaScript 错误，并显示备用 UI，而不是让整个组件树崩溃。

通过实现 static getDerivedStateFromError() 或 componentDidCatch() 生命周期方法，组件可以成为错误边界。

class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false, error: null };
    }

    static getDerivedStateFromError(error) {
        // 更新 state 以便下一次渲染能够显示备用 UI
        return { hasError: true, error: error };
    }

    componentDidCatch(error, errorInfo) {
        // 你也同样可以将错误日志记录到某个服务上去
        console.error("Uncaught error:", error, errorInfo);
        // logErrorToMyService(error, errorInfo);
    }

    render() {
        if (this.state.hasError) {
            // 你可以自定义任何备用 UI
            return <h1>抱歉，发生了一个错误。</h1>;
            // 或者显示一个更友好的备用 UI 组件
            // return <FallbackUI error={this.state.error} />;
        }

        return this.props.children;
    }
}

// 使用示例:
<ErrorBoundary>
    <MyComponentThatMightThrowError />
</ErrorBoundary>

使用第三方库（如 `react-error-boundary`）

社区提供了更易用、功能更丰富的错误边界库，例如 react-error-boundary。它允许你通过 FallbackComponent prop 来渲染自定义的备用 UI，并提供 resetErrorBoundary 函数来重置错误状态，这对于需要重新加载数据的场景非常有用。

import { ErrorBoundary } from 'react-error-boundary';

function ErrorFallback({ error, resetErrorBoundary }) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  );
}

function App() {
  return (
    <ErrorBoundary FallbackComponent={ErrorFallback}>
      <MyAppComponent />
    </ErrorBoundary>
  );
}

降级和熔断策略

除了捕获错误，还可以通过降级（提供部分功能或简化 UI）和熔断（暂时停止某些功能或请求）来提高应用的健壮性。例如，当某个 API 请求失败时，可以显示缓存的数据或一个"数据加载失败"的提示，而不是完全阻止用户操作。

总结

JavaScript 错误是不可避免的，但通过理解不同类型的错误及其发生场景，结合现代开发工具的辅助和 React 的错误处理机制（如错误边界），可以显著提高应用程序的稳定性和用户体验。在开发过程中，充分的测试（包括边界情况和异常值）以及代码审查是预防许多运行时错误的关键。同时，遵循"不信任原则"，假设所有外部输入和依赖都可能出错，并采取相应的防御性编程措施，是构建健壮软件的重要理念。