JS `Error Handling` 策略：区分可恢复错误与不可恢复错误

大家好，欢迎来到今天的“JS异常处理之分门别类”讲座！今天咱们就来聊聊JavaScript里那些让人头疼，但又不得不面对的错误。别怕，咱们要做的就是把它们揪出来，分个三六九等，看看哪些能救，哪些只能“安乐死”。

开场白：错误的世界，没有绝对的好与坏

首先，要声明的是，错误本身并不是魔鬼。它们只是程序运行过程中，由于各种原因（比如手滑、逻辑不清、数据异常等等）产生的偏差。关键在于我们如何对待它们。把错误当成bug，恨不得立马消灭，还是把错误当成线索，帮助我们理解程序深层的问题，这决定了我们异常处理的姿态。

第一部分：错误的分类——可恢复 vs. 不可恢复

在JS的世界里，我们可以把错误大致分为两类：可恢复错误和不可恢复错误。这两者之间并没有绝对的界限，有时候取决于具体的业务场景和容错需求。

可恢复错误 (Recoverable Errors)

这类错误通常是预期之内，或者可以通过一些手段进行补救的。例如：
- 网络请求失败： 可能是网络不稳定，或者服务器暂时宕机。我们可以尝试重试。
- 用户输入无效： 用户填写的邮箱格式不对，或者密码强度不够。我们可以提示用户修改。
- 资源加载失败： 图片加载失败，字体加载失败。我们可以使用默认图片或字体。
- 数据校验失败： 数据不符合预期的格式或范围。我们可以进行数据转换或提示用户。
- 并发冲突： 多个用户同时修改同一份数据。我们可以使用锁机制或乐观锁来解决。
代码示例：网络请求重试
```
async function fetchData(url, maxRetries = 3) {
  let retries = 0;
  while (retries < maxRetries) {
    try {
      const response = await fetch(url);
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return await response.json();
    } catch (error) {
      console.warn(`请求失败，重试第 ${retries + 1} 次: ${error.message}`);
      retries++;
      await new Promise(resolve => setTimeout(resolve, 1000 * retries)); // 每次重试间隔递增
    }
  }
  throw new Error(`请求失败，达到最大重试次数 ${maxRetries}`);
}

fetchData('https://example.com/api/data')
  .then(data => console.log('数据:', data))
  .catch(error => console.error('最终失败:', error.message));
```
解释:
- fetchData 函数尝试从给定的URL获取数据，如果请求失败，它会重试最多 maxRetries 次。
- try...catch 块用于捕获 fetch 函数可能抛出的异常。
- response.ok 检查HTTP状态码是否指示成功。
- 每次重试之间，使用 setTimeout 暂停一段时间，避免过于频繁地请求。
- 如果所有重试都失败，则抛出一个错误，指示请求已达到最大重试次数。
不可恢复错误 (Unrecoverable Errors)

这类错误通常是程序出现了严重的逻辑错误，或者遇到了无法解决的系统问题。继续运行可能会导致数据损坏，或者程序崩溃。例如：
- 语法错误： 代码中存在语法错误，导致程序无法解析。
- 类型错误： 尝试对一个不是函数的值进行函数调用，或者尝试访问一个未定义对象的属性。
- 栈溢出： 函数调用层级过深，导致栈空间耗尽。
- 内存泄漏： 程序占用的内存无法释放，最终导致系统崩溃。
- 断言失败： 程序中的断言条件不满足，表明程序状态出现了严重错误。
代码示例：断言失败
```
function calculateDiscount(price, discountPercentage) {
  if (discountPercentage < 0 || discountPercentage > 100) {
    throw new Error("折扣百分比必须在0到100之间"); // 错误处理
    // 或者使用断言库，如Node.js内置的assert模块
    // assert(discountPercentage >= 0 && discountPercentage <= 100, "折扣百分比必须在0到100之间");
  }

  return price * (1 - discountPercentage / 100);
}

try {
  const discountedPrice = calculateDiscount(100, 120); // 传入错误的折扣百分比
  console.log("折扣后的价格:", discountedPrice);
} catch (error) {
  console.error("计算折扣时出错:", error.message);
  // 这里可以进行一些清理工作，或者通知开发者
  // 但通常情况下，由于断言失败表明程序状态已经不正常，继续运行可能不安全
}
```
解释:
- calculateDiscount 函数用于计算折扣后的价格。
- 如果折扣百分比不在0到100之间，则抛出一个错误。这是一个断言，用于确保程序的输入符合预期。
- 在 try...catch 块中，我们捕获可能抛出的异常。
- 由于断言失败表明程序状态已经不正常，继续运行可能不安全，因此在 catch 块中通常会进行一些清理工作，或者通知开发者。

第二部分：JS的异常处理机制

JS提供了一套标准的异常处理机制，主要包括 try...catch 语句和 throw 语句。

try...catch 语句

try 块用于包裹可能抛出异常的代码。如果在 try 块中发生了异常，程序会立即跳转到 catch 块，并将异常对象传递给 catch 块的参数。
```
try {
  // 可能会抛出异常的代码
  const result = someRiskyOperation();
  console.log('操作成功:', result);
} catch (error) {
  // 处理异常的代码
  console.error('操作失败:', error.message);
} finally {
  // 无论是否发生异常，都会执行的代码 (可选)
  console.log('清理工作...');
}
```
解释:
- try 块中的代码如果抛出异常，执行流程会立即跳转到 catch 块。
- catch 块中的 error 参数包含了异常对象，我们可以从中获取异常信息。
- finally 块中的代码无论是否发生异常，都会在 try 或 catch 块执行完毕后执行。通常用于执行清理工作，例如关闭文件、释放资源等。
throw 语句

throw 语句用于手动抛出一个异常。我们可以抛出任何类型的值作为异常对象，但通常建议抛出一个 Error 对象，因为它包含了更丰富的异常信息，例如错误消息和堆栈信息。
```
function validateInput(input) {
  if (typeof input !== 'number') {
    throw new TypeError('输入必须是数字');
  }
  if (input < 0) {
    throw new RangeError('输入必须是非负数');
  }
}

try {
  validateInput('abc');
} catch (error) {
  if (error instanceof TypeError) {
    console.error('类型错误:', error.message);
  } else if (error instanceof RangeError) {
    console.error('范围错误:', error.message);
  } else {
    console.error('未知错误:', error.message);
  }
}
```
解释:
- validateInput 函数用于验证输入是否为数字，并且是否为非负数。
- 如果输入不符合要求，则抛出一个 TypeError 或 RangeError 对象。
- 在 catch 块中，我们使用 instanceof 运算符来判断异常对象的类型，并根据不同的类型进行不同的处理。

第三部分：如何区分可恢复错误与不可恢复错误？

区分可恢复错误与不可恢复错误，需要结合具体的业务场景和容错需求。以下是一些常用的判断标准：

错误是否可预测？

如果错误是可预测的，例如网络请求失败、用户输入无效等，那么通常可以将其视为可恢复错误。我们可以通过一些手段来避免这些错误的发生，或者在发生后进行补救。
错误是否会导致数据损坏？

如果错误会导致数据损坏，或者程序状态出现严重错误，那么通常可以将其视为不可恢复错误。继续运行可能会导致更严重的后果。
错误是否会影响用户体验？

如果错误会严重影响用户体验，例如程序崩溃、页面卡死等，那么通常可以将其视为不可恢复错误。我们需要尽快修复这些错误，避免影响用户的使用。
容错成本是否过高？

有时候，即使错误是可恢复的，但容错成本过高，例如需要复杂的重试机制、数据回滚等，那么也可以将其视为不可恢复错误。我们可以选择放弃容错，直接终止程序。

表格总结：可恢复 vs. 不可恢复

特征	可恢复错误	不可恢复错误
可预测性	通常可预测	通常不可预测
数据损坏风险	低	高
用户体验影响	较低	较高
容错成本	较低	较高
处理方式	重试、数据校验、默认值、用户提示等	终止程序、记录日志、通知开发者
常见例子	网络请求失败、用户输入无效、资源加载失败、数据校验失败	语法错误、类型错误、栈溢出、内存泄漏、断言失败

第四部分：最佳实践：如何优雅地处理JS异常

不要吞掉异常： 捕获异常后，一定要进行处理。不要只是简单地 console.log 一下，或者直接忽略掉。至少要记录日志，方便后续排查问题。
```
try {
  // 可能会抛出异常的代码
} catch (error) {
  console.error('发生错误:', error.message); // 至少要记录日志
  // 其他处理逻辑...
}
```

区分异常类型： 根据不同的异常类型，采取不同的处理方式。例如，对于网络请求失败，可以尝试重试；对于用户输入无效，可以提示用户修改。

try {
  // 可能会抛出异常的代码
} catch (error) {
  if (error instanceof NetworkError) {
    // 重试
  } else if (error instanceof ValidationError) {
    // 提示用户修改
  } else {
    // 其他处理
  }
}

使用 finally 块进行清理： 无论是否发生异常，都要确保资源得到释放。例如，关闭文件、释放内存等。

let fileHandle;
try {
  fileHandle = await openFile('data.txt');
  // 使用文件
} catch (error) {
  console.error('发生错误:', error.message);
} finally {
  if (fileHandle) {
    await fileHandle.close(); // 确保文件被关闭
  }
}

使用全局错误处理： 对于未捕获的异常，可以使用 window.onerror 或 addEventListener('error', ...) 进行全局处理。这可以帮助我们捕获一些遗漏的异常，并进行统一的日志记录和错误上报。

window.onerror = function(message, source, lineno, colno, error) {
  console.error('全局错误:', message, source, lineno, colno, error);
  // 上报错误到服务器
};

// 或者使用 addEventListener
window.addEventListener('error', function(event) {
  console.error('全局错误:', event.message, event.filename, event.lineno, event.colno, event.error);
  // 上报错误到服务器
});

使用 async/await 和 try...catch： 在异步函数中，使用 async/await 可以使代码更简洁，并且更容易使用 try...catch 进行异常处理。

async function fetchData() {
  try {
    const response = await fetch('https://example.com/api/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('请求失败:', error.message);
    throw error; // 重新抛出错误，方便上层处理
  }
}

使用错误边界 (Error Boundaries，React)： 在React中，可以使用错误边界组件来捕获子组件树中的JavaScript错误，并显示备用UI。这可以防止整个应用崩溃，提高用户体验。

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

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 你同样可以将错误日志上报给服务器
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 你可以自定义降级后的 UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

// 使用
<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

拥抱防御性编程： 在编写代码时，要时刻考虑可能出现的错误，并采取相应的措施进行预防。例如，对用户输入进行校验、对数据进行格式化、避免使用全局变量等。

第五部分：总结与展望

今天，我们一起探讨了JS异常处理的重要性，以及如何区分可恢复错误与不可恢复错误。记住，异常处理不是简单的“try…catch”，而是一种编程哲学，一种对程序健壮性的追求。

未来，JS异常处理会更加智能化，例如通过AI技术自动分析错误日志，预测潜在的错误，并提供相应的解决方案。我们作为开发者，也要不断学习新的技术，提升自己的异常处理能力，编写出更加健壮、可靠的程序。

希望今天的讲座对大家有所帮助。谢谢大家！

发表回复 取消回复

发表回复取消回复