Scaffold-ETH 2 中 useScaffoldContractWrite 错误处理机制解析

问题背景

在 Scaffold-ETH 2 项目中，useScaffoldContractWrite 是一个常用的 Hook，用于与智能合约进行交互。然而，开发者发现当前版本存在一个重要的错误处理问题：当合约调用失败时，错误被"吞掉"而没有正确抛出，导致上层代码无法通过 try/catch 捕获异常。

问题表现

当开发者使用 useScaffoldContractWrite 调用合约函数时，无论调用成功还是失败，try 块都会完整执行。这会导致两个问题：

1. 错误通知和成功通知可能同时出现，造成用户界面混乱
2. 开发者无法在代码层面捕获和处理错误，影响错误处理逻辑的实现

技术分析

问题的根源在于错误传播链的中断。useScaffoldContractWrite 内部依赖于 useTransactor，而 useTransactor 在遇到错误时只是显示通知而没有将错误向上抛出。这使得错误处理流程不完整，导致上层代码无法感知到错误的发生。

解决方案

经过分析，修复方案需要修改两处关键代码：

1. 在 useScaffoldContractWrite.ts 中，捕获到错误后需要重新抛出：

catch (e) {
  notification.error(notificationMsg);
  throw new Error(e);  // 新增的错误抛出
}

2. 在 useTransactor.tsx 中，需要调整错误处理逻辑：

// 注释掉原有的错误通知代码
// notification.error(message);
// 改为抛出错误
throw new Error(message);

修复原理

这个修改实现了完整的错误传播链：

1. useTransactor 捕获底层错误并抛出
2. useScaffoldContractWrite 捕获并重新抛出
3. 最终开发者可以在业务代码的 try/catch 中捕获错误

同时避免了重复的错误通知显示，保持了良好的用户体验。

最佳实践建议

在使用修复后的版本时，开发者可以这样编写代码：

const handleContractCall = async () => {
  const loadingNotification = notification.loading("处理中...");
  try {
    await contractFunction();
    notification.remove(loadingNotification);
    notification.success("操作成功");
  } catch (error) {
    notification.remove(loadingNotification);
    // 可以在这里添加自定义错误处理逻辑
    console.error("合约调用失败:", error);
  }
};

这种模式既保持了良好的用户体验，又为开发者提供了完整的错误处理能力。

总结

这个修复完善了 Scaffold-ETH 2 的错误处理机制，使得合约交互的错误处理更加符合 JavaScript/TypeScript 的常规模式。开发者现在可以像处理普通异步操作一样处理合约调用错误，提高了代码的可维护性和可预测性。