错误处理机制

错误处理机制

JavaScript中的错误处理机制是保证代码健壮性的关键部分。当代码执行过程中出现意外情况时，合理的错误处理可以防止程序崩溃，并提供有用的调试信息。错误处理主要包括错误捕获、错误抛出和错误传播等概念。

try-catch-finally语句

最基本的错误处理结构是try-catch-finally语句块。try块包含可能抛出错误的代码，catch块处理捕获的错误，finally块则无论是否发生错误都会执行。

try {
  // 可能抛出错误的代码
  const result = riskyOperation();
  console.log(result);
} catch (error) {
  // 错误处理
  console.error('发生错误:', error.message);
} finally {
  // 清理代码
  console.log('操作完成');
}

catch块接收一个错误对象，通常包含name、message和stack等属性。finally块常用于资源释放，如关闭文件或数据库连接。

Error对象类型

JavaScript内置了几种错误类型，每种类型对应特定的错误场景：

• Error: 通用错误基类
• SyntaxError: 语法错误
• ReferenceError: 引用未定义变量
• TypeError: 类型不匹配或方法调用错误
• RangeError: 数值超出有效范围
• URIError: URI处理函数使用不当
• EvalError: eval()函数使用错误(已弃用)

try {
  null.f(); // 抛出TypeError
} catch (e) {
  if (e instanceof TypeError) {
    console.log('类型错误:', e.message);
  } else {
    console.log('其他错误:', e.message);
  }
}

自定义错误

通过继承Error类可以创建自定义错误类型，添加额外的属性和方法：

class ValidationError extends Error {
  constructor(message, field) {
    super(message);
    this.name = 'ValidationError';
    this.field = field;
    this.date = new Date();
  }
}

function validateUser(user) {
  if (!user.name) {
    throw new ValidationError('名称不能为空', 'name');
  }
}

try {
  validateUser({});
} catch (e) {
  if (e instanceof ValidationError) {
    console.error(`${e.name}: ${e.message} (字段: ${e.field})`);
  } else {
    console.error('未知错误:', e);
  }
}

Promise错误处理

Promise链中的错误处理有几种方式：

1. 使用.catch()方法捕获错误
2. 在.then()的第二个参数中处理错误
3. 使用async/await配合try-catch

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('网络响应不正常');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('请求失败:', error));

// async/await方式
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('获取数据失败:', error);
  }
}

全局错误处理

对于未捕获的错误，可以设置全局错误处理器：

// 浏览器环境
window.addEventListener('error', (event) => {
  console.error('全局错误:', event.error);
  // 可以发送错误日志到服务器
  sendErrorToServer(event.error);
  // 阻止默认错误处理(如显示在控制台)
  event.preventDefault();
});

// Node.js环境
process.on('uncaughtException', (err) => {
  console.error('未捕获异常:', err);
  // 通常应该记录错误并优雅退出
  process.exit(1);
});

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

错误边界(React)

在React中，错误边界是一种特殊组件，可以捕获子组件树中的JavaScript错误：

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

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    logErrorToService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>组件渲染出错</h1>;
    }
    return this.props.children; 
  }
}

// 使用方式
<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

错误处理最佳实践

1. 具体错误消息: 提供足够详细的错误信息，但不要暴露敏感数据
2. 错误分类: 根据错误类型采取不同处理策略
3. 错误恢复: 尽可能从错误中恢复，保持应用运行
4. 错误日志: 记录错误以便后续分析
5. 用户友好提示: 对终端用户显示友好的错误信息

async function loadUserData(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);
    if (!response.ok) {
      throw new Error(`HTTP错误! 状态: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    if (error instanceof TypeError) {
      // 网络错误
      showUserMessage('网络连接失败，请检查您的网络');
    } else if (error.message.includes('HTTP错误')) {
      // API错误
      showUserMessage('暂时无法获取用户数据，请稍后重试');
    } else {
      // 未知错误
      console.error('加载用户数据失败:', error);
      showUserMessage('发生意外错误');
    }
    // 返回默认值或null
    return null;
  }
}

异步生成器错误处理

异步生成器函数中的错误处理需要特别注意：

async function* asyncGenerator() {
  try {
    yield await fetchData1();
    yield await fetchData2();
  } catch (e) {
    console.error('生成器内部错误:', e);
    throw e; // 可以选择重新抛出
  }
}

(async () => {
  const gen = asyncGenerator();
  try {
    for await (const item of gen) {
      console.log(item);
    }
  } catch (e) {
    console.error('消费生成器时出错:', e);
  }
})();

错误处理模式

1. 返回错误对象: 代替抛出异常，返回包含错误信息的对象
2. 空对象模式: 返回一个无害的默认对象
3. 特殊值模式: 返回特殊值(如null)表示错误
4. 回调函数: 通过回调参数传递错误

// 返回错误对象模式
function parseJSON(jsonString) {
  try {
    return { data: JSON.parse(jsonString), error: null };
  } catch (e) {
    return { data: null, error: e };
  }
}

// 空对象模式
function getConfig() {
  try {
    return loadConfig();
  } catch (e) {
    return {}; // 返回空配置
  }
}

性能考虑

错误处理对性能有一定影响，特别是在关键路径上：

1. try-catch块在V8引擎中优化良好，但错误路径仍然较慢
2. 避免在性能敏感的热代码路径中使用过多的错误捕获
3. 对于预期可能频繁发生的"错误"，考虑使用返回码而非异常

// 不推荐 - 在热循环中使用try-catch
function processItems(items) {
  const results = [];
  for (const item of items) {
    try {
      results.push(transform(item));
    } catch (e) {
      results.push(null);
    }
  }
  return results;
}

// 更好 - 提前验证或使用返回码
function processItems(items) {
  return items.map(item => {
    if (!isValid(item)) return null;
    return transform(item);
  });
}