错误处理机制

错误处理机制的重要性

错误处理是编程中不可或缺的部分，良好的错误处理机制能提升代码的健壮性和可维护性。JavaScript作为动态弱类型语言，运行时错误更为常见，合理的错误处理策略尤为重要。

错误类型分类

JavaScript中的错误主要分为以下几类：

1. 语法错误(SyntaxError) 代码不符合语法规则，通常在解析阶段就会被发现。

// 语法错误示例
const obj = {;

2. 引用错误(ReferenceError) 访问未声明的变量时抛出。

// 引用错误示例
console.log(undeclaredVar);

3. 类型错误(TypeError) 操作不符合预期类型时发生。

// 类型错误示例
const num = 123;
num.toUpperCase();

4. 范围错误(RangeError) 数值超出允许范围时抛出。

// 范围错误示例
new Array(-1);

5. URI错误(URIError) URI处理函数使用不当时发生。

// URI错误示例
decodeURIComponent('%');

6. 自定义错误 开发者根据业务需求创建的错误类型。

try-catch-finally 基础结构

最基本的错误处理结构由try、catch和finally三个块组成：

try {
  // 可能抛出错误的代码
  riskyOperation();
} catch (error) {
  // 错误处理逻辑
  console.error('操作失败:', error.message);
} finally {
  // 无论是否出错都会执行的代码
  cleanupResources();
}

finally块的特殊性

finally块中的代码无论是否发生错误都会执行，常用于资源清理：

let connection;
try {
  connection = openDatabaseConnection();
  // 使用连接进行操作
} catch (error) {
  logError(error);
} finally {
  if (connection) {
    connection.close();
  }
}

Error对象及其属性

JavaScript中的Error对象包含以下重要属性：

• name: 错误类型名称
• message: 错误描述信息
• stack: 错误堆栈跟踪（非标准但广泛支持）

try {
  throw new Error('自定义错误消息');
} catch (err) {
  console.log(err.name);    // "Error"
  console.log(err.message); // "自定义错误消息"
  console.log(err.stack);   // 堆栈跟踪信息
}

抛出错误的最佳实践

主动抛出错误可以提前暴露问题：

function divide(a, b) {
  if (b === 0) {
    throw new Error('除数不能为零');
  }
  return a / b;
}

try {
  const result = divide(10, 0);
} catch (error) {
  console.error(error.message); // "除数不能为零"
}

自定义错误类型

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

class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = 'ValidationError';
  }
}

function validateInput(input) {
  if (!input) {
    throw new ValidationError('输入不能为空');
  }
}

Promise的错误处理

Promise链中的错误需要通过catch方法处理：

fetchData()
  .then(processData)
  .then(displayData)
  .catch(error => {
    console.error('处理流程出错:', error);
  });

async/await中的错误处理

async函数可以使用传统的try-catch结构：

async function loadData() {
  try {
    const data = await fetch('/api/data');
    return process(data);
  } catch (error) {
    console.error('数据加载失败:', error);
    throw error; // 可选择重新抛出
  }
}

全局错误处理

window.onerror

捕获未被处理的运行时错误：

window.onerror = function(message, source, lineno, colno, error) {
  console.error(`全局错误: ${message} at ${source}:${lineno}`);
  return true; // 阻止默认错误处理
};

unhandledrejection事件

处理未捕获的Promise拒绝：

window.addEventListener('unhandledrejection', event => {
  console.error('未处理的Promise拒绝:', event.reason);
  event.preventDefault(); // 阻止默认处理
});

错误边界(React特有)

React 16+引入了错误边界概念：

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  
  componentDidCatch(error, info) {
    logErrorToService(error, info.componentStack);
  }
  
  render() {
    if (this.state.hasError) {
      return <FallbackUI />;
    }
    return this.props.children;
  }
}

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

错误日志记录

生产环境应记录错误信息：

function logError(error) {
  const errorInfo = {
    message: error.message,
    stack: error.stack,
    timestamp: new Date().toISOString(),
    userAgent: navigator.userAgent
  };
  
  // 发送到错误监控服务
  fetch('/api/log-error', {
    method: 'POST',
    body: JSON.stringify(errorInfo)
  });
}

防御性编程技巧

1. 参数验证

function createUser(name, age) {
  if (typeof name !== 'string' || name.trim() === '') {
    throw new TypeError('姓名必须是非空字符串');
  }
  if (!Number.isInteger(age) || age < 0) {
    throw new RangeError('年龄必须是正整数');
  }
  // 正常逻辑
}

2. 默认值和短路操作

function getConfig(options) {
  const config = {
    timeout: options.timeout || 5000,
    retries: options.retries ?? 3  // 仅当undefined或null时使用默认值
  };
  return config;
}

3. 可选链操作符(?.)

const street = user?.address?.street; // 不会抛出错误

4. 空值合并运算符(??)

const pageSize = config.pageSize ?? 10; // 仅当null或undefined时使用默认值

性能考量

错误处理可能影响性能，需注意：

1. 避免在热代码路径中使用try-catch

// 不推荐
function processItems(items) {
  items.forEach(item => {
    try {
      transform(item);
    } catch {
      // 处理错误
    }
  });
}

// 推荐
function processItems(items) {
  try {
    items.forEach(transform);
  } catch {
    // 处理错误
  }
}

2. 错误对象创建成本

创建Error对象会捕获堆栈跟踪，有一定性能开销：

// 在性能关键代码中可考虑简单值
throw { message: '简单错误' };

测试中的错误处理

单元测试应验证错误情况：

describe('divide函数', () => {
  it('除数不为零时应返回正确结果', () => {
    expect(divide(10, 2)).toBe(5);
  });
  
  it('除数为零时应抛出错误', () => {
    expect(() => divide(10, 0)).toThrow('除数不能为零');
  });
});

浏览器兼容性处理

某些API在不同浏览器中行为可能不同：

function getLocalStorage() {
  try {
    localStorage.setItem('test', 'test');
    localStorage.removeItem('test');
    return localStorage;
  } catch (e) {
    // 隐私模式下可能抛出错误
    return {
      getItem: () => null,
      setItem: () => {},
      removeItem: () => {}
    };
  }
}

Node.js环境差异

Node.js中的错误处理有些特殊之处：

// 处理未捕获异常
process.on('uncaughtException', (err) => {
  console.error('未捕获异常:', err);
  process.exit(1); // 通常需要退出进程
});

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

错误处理与代码可读性

良好的错误处理不应牺牲代码可读性：

// 不推荐：嵌套过深
function processData(data) {
  try {
    if (data) {
      try {
        const parsed = JSON.parse(data);
        if (parsed.valid) {
          // 业务逻辑
        }
      } catch (parseError) {
        // 处理解析错误
      }
    }
  } catch (error) {
    // 处理其他错误
  }
}

// 推荐：扁平结构
function processData(data) {
  if (!data) return;
  
  let parsed;
  try {
    parsed = JSON.parse(data);
  } catch (error) {
    handleParseError(error);
    return;
  }
  
  if (!parsed.valid) return;
  
  // 业务逻辑
}

错误恢复策略

根据错误类型采取不同恢复措施：

1. 重试机制

async function fetchWithRetry(url, retries = 3) {
  for (let i = 0; i < retries; i++) {
    try {
      const response = await fetch(url);
      return await response.json();
    } catch (error) {
      if (i === retries - 1) throw error;
      await new Promise(resolve => setTimeout(resolve, 1000 * (i + 1)));
    }
  }
}

2. 降级方案

async function getHighQualityData() {
  try {
    return await fetch('/api/high-quality');
  } catch (error) {
    console.warn('高质量数据获取失败，使用低质量数据');
    return await fetch('/api/low-quality');
  }
}

用户友好的错误提示

向最终用户展示错误时应注意：

function showUserError(error) {
  const userMessages = {
    'NetworkError': '网络连接失败，请检查网络设置',
    'InvalidInput': '输入格式不正确',
    'default': '操作失败，请稍后重试'
  };
  
  const message = userMessages[error.name] || userMessages.default;
  displayToast(message);
  
  // 同时记录完整错误
  logError(error);
}