背景

去年下半年，我参与了一个 DeFi 项目的流动性池监控面板开发。需求很简单的观点是，使用者连接钱包后页面上要实时显示某个流动性池的 Swap、Mint、Burn 事件。包括交易对、数量、时间等。这个面板要跑在多个链上，使用者切换链时事件监听也要跟着切换。

当时我第一个想法是：用 ers.js 的 contract.on 或者轮询。但实际做起来才发现，事情远没有这么简单。连接断开后监听没恢复、使用者切换链后事件重复触发、页面切后台再回来时监听已经失效…，这些问题一个个蹦出来让我整整折腾了三天。

后来我换成了 wagmi v2 的 useWatchContractEvent配合一些状态管理和错误处理，终于稳定了。这篇文章就是记录我这次踩坑和最终解决的过程。

使用者痛点

• 连接不可靠页面刷新或网络波动导致 WebSocket 断开，事件监听失效。
• 多链切换混乱切链后旧监听残留。新旧事件同时触发，界面卡顿。
• 区块回滚未处理临时分叉导致的假事件未被过滤。话说回来，
• 高成本轮询使用 setInterval + queryFilter 带来高延迟和 RPC 配额浪费。
• 页面挂起失效浏览器后台挂起后 WebSocket 暂停，返回前不再收到新事件。

说到问题分析，为什么轮询和 ers.js 的 on 不够用

我一开始用的是 ers.js 的 contract.on。 这是最直接的方式，但问题在于：

1. 连接不可靠使用者刷新页面或网络波动时WebSocket 或 Provider 会断开，监听就失效了。我需要手动重连，但重连逻辑很容易写错。
2. 多链切换麻烦使用者切换链时我必须销毁旧监听，创建新监听。不过，但 ers.js 的 removeAllListeners 有时会残留。导致新旧监听一起跑，页面卡死。
3. 区块回滚链上偶尔会出现临时分叉，事件可能被回滚。ers.js 的 on 不会处理这个，需要自己维护一个待确认队列。怎么说呢，

后来我试了轮询：用 setInterval 每 N 秒调用 contract.queryFilter。这种方法简单，但延迟高，而且每次查询都会消耗 RPC 配额，使用者量大了成本很高。

I thought: wagmi 作为 React 环境里的 Web3 主流库，肯定有更好的方案。话说回来，于是我切到了 wagmi v2。

至于主要实现，用 wagmi v2 的 useWatchContractEvent 搞定监听

. 安装和配置 wagmi

在项目里装好 wagmi v2 与 viem：

npm install wagmi viem @tanstack/react-query

在 A​pp.tsx 中配置

// App.tsx
import { WagmiProvider,createConfig,http } from 'wagmi'
import { mainnet,polygon,arbitrum } from 'wagmi/chains'
import { QueryClient,QueryClientProvider } from '@tanstack/react-query'
const config = createConfig({
至于chains，transports: {
: http,: http,: http,},})
const queryClient = new QueryClient
export default function App {
return (





)
}

. 使用 useWatchContractEvent 监听事件

PooLMonitor.tsx：

// PoolMonitor.tsx
import { useWatchContractEvent } from 'wagmi'
import { useChainId } from 'wagmi'
import { useState } from 'react'
// 假设这是你的流动性池合约 ABI 和地址
const POOL_ABI =。name: 'Swap',type: 'event',},] as const
const POOL_ADDRESS = '0x...' // 替换为实际地址
export default function PoolMonitor {
const chainId = useChainId
const = useState
useWatchContractEvent({
address: POOL_ADDRESS as `0x${string}`,abi: POOL_ABI,eventName: 'Swap',chainId,onLogs {
// logs 是数组，需要展开合并到已有列表
setEvents
},onError {
console.error
},})
return (


当前链 ID: {chainId}

{events.map => (

{ev.args.sender} - {ev.args.amount0In.toString} /{' '}
{ev.args.amount1In.toString}

))}


)
}

Pitfall：a) 必须显式传入 {`chainId`}. 如果省略，它默认使用配置中的第一个链，导致 Polygon 上收不到任何事件。

. 处理区块回滚：用 useBlockNumber 做确认层级

wagmi v2 提供的 {`useBlockNumber`}

import { useBlockNumber } from 'wagmi'
import { useEffect } from 'react'
export default function PoolMonitor {
const chainId = useChainId
const { data: currentBlockNumber } = useBlockNumber
const = useState
const = useState
// 同上，用 useWatchContractEvent 收集 pendingEvents …// 每产生新区块检查是否满足确认数
const CONFIRMATIONS = 6 // 可根据业务自行调节
useEffect => {
if return
setPendingEvents(prev => {
const newlyConfirmed = prev.filter(
ev => Number - Number>= CONFIRMATIONS
)
const stillPending = prev.filter(
ev => Number - Number