调用合约方法并取消交易时无法捕获Web3.js合约错误

我基于React开发了一个简易应用，使用Web3.js v4.3.2调用Solidity智能合约方法，数据来自表单输入。尝试捕获调用合约方法或发送交易时的错误（比如用户关闭钱包确认弹窗）以展示提示，但试了三种错误捕获方式均未触发，控制台却显示未捕获的Promise错误。

初始化代码 #

window.ethereum.request({ method: "eth_requestAccounts" });

const web3 = new Web3(window.ethereum);

const factoryCampaignContract = new web3.eth.Contract(CAMPAIGN_ABI, CAMPAIGN_ADDRESS);

尝试的三种错误捕获方式 #

1. try-catch #

try {
  const receipt = await factoryCampaignContract.methods
    .createCampaign(minimumContribution)
    .send({ from: accounts[0] });
} catch(err) {
  console.log(err);
}

2. .then() + .catch() #

factoryCampaignContract.methods
  .createCampaign(minimumContribution)
  .send({ from: accounts[0] })
  .then(receipt => console.log(receipt))
  .catch(err => console.log(err));

3. PromiEvents error 事件监听 #

factoryCampaignContract.methods
  .createCampaign(minimumContribution)
  .send({ from: accounts[0] })
  .on('transactionHash', (hash) => console.log(hash))
  .on('confirmation', (confirmationNumber) => console.log(confirmationNumber))
  .on('receipt', (receipt) => console.log(receipt))
  .on('error', (error) => console.log(error));

问题现象 #

当关闭钱包模态框时，控制台输出以下错误，但上述三种捕获逻辑均未触发：

Uncaught (in promise) Error: User rejected the request.
  at ap.<anonymous> (<anonymous>:7:4040)
  at Generator.next (<anonymous>)
  at u (<anonymous>:1:1048)

解决方案 #

1. 处理账户授权的异步错误
   初始化时的eth_requestAccounts是异步请求，未处理其拒绝状态会导致未捕获错误。需改为：

   async function initWeb3() {
     try {
       const accounts = await window.ethereum.request({ method: "eth_requestAccounts" });
       // 将账户保存到组件状态或全局变量
     } catch (err) {
       console.log("用户拒绝账户授权", err);
     }
   }
   initWeb3();
   

2. 确保表单提交函数为异步函数
   使用try-catch包裹await时，必须保证表单提交处理函数标记为async：

   const handleSubmit = async (e) => {
     e.preventDefault();
     try {
       const receipt = await factoryCampaignContract.methods
         .createCampaign(minimumContribution)
         .send({ from: accounts[0] });
       console.log("交易成功", receipt);
     } catch(err) {
       console.log("交易错误", err);
       // 在此处添加用户可见的错误提示逻辑
     }
   };
   

3. 添加钱包全局错误监听
   部分钱包的拒绝事件会直接触发window.ethereum的全局错误，可添加兜底监听：

   window.ethereum.on('error', (err) => {
     console.log("钱包全局错误", err);
     // 处理错误提示
   });
   

4. 验证版本兼容性
   确认Web3.js v4.3.2与当前使用的钱包客户端（如MetaMask）兼容，若存在兼容性问题，可尝试升级或降级Web3.js版本。

内容的提问来源于stack exchange，提问作者Danziger