如何通过Wagmi捕获并展示MetaMask连接错误？

你的问题出在两个核心点：一是connect()是异步函数，直接调用不使用await的话，try-catch无法捕获异步错误；二是useConnect返回的error是响应式状态，点击时立即console.log还没来得及更新，需要在组件渲染阶段监听。

以下是具体的解决方式：

1. 异步捕获错误（修改handleClick） #

把handleClick改成异步函数，用await调用connect()，这样就能通过try-catch捕获错误：

const { connect, error } = useConnect({
  connector: MetaMask,
});

const handleClick = async () => {
  try {
    await connect();
  } catch (err: any) {
    // 针对两类错误做自定义处理
    if (err.name === 'ConnectorNotFoundError') {
      console.error('请先安装MetaMask扩展');
    } else if (err.code === -32002) {
      console.error('连接请求正在处理中，请稍候');
    } else {
      console.error('连接出错:', err);
    }
  }
};

2. 使用useConnect的onError回调 #

在useConnect的配置中添加onError回调，专门处理连接过程中的错误：

const { connect, error } = useConnect({
  connector: MetaMask,
  onError(err) {
    // 在这里统一处理错误
    if (err.name === 'ConnectorNotFoundError') {
      alert('请先安装MetaMask钱包扩展');
    } else if (err.code === -32002) {
      alert('已有连接请求在处理，请不要重复点击');
    } else {
      console.error('连接失败:', err);
    }
  },
});

const handleClick = () => {
  connect();
};

3. 监听响应式error状态 #

useConnect返回的error是一个响应式状态，错误发生后会自动更新，你可以在组件中直接渲染错误信息：

const { connect, error } = useConnect({
  connector: MetaMask,
});

const handleClick = async () => {
  await connect();
};

// 组件渲染部分
return (
  <div>
    <button onClick={handleClick}>连接MetaMask</button>
    {error && (
      <div style={{ color: 'red' }}>
        {error.name === 'ConnectorNotFoundError' 
          ? '请安装MetaMask扩展后重试' 
          : error.code === -32002
            ? '连接请求处理中，请稍候'
            : error.message}
      </div>
    )}
  </div>
);

这三种方式可以单独或结合使用，确保你能捕获并处理那两类特定错误，同时自定义提示信息。

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