Error Handling

The error property in Wagmi Hooks is strongly typed with it's corresponding error type. This enables you to have granular precision with handling errors in your application.

You can discriminate the error type by using the name property on the error object.

index.tsxconfig.ts

tsx

tsx
import { useBlockNumber } from 'wagmi'
 
function App() {
  const { data, error } = useBlockNumber()
                 
const error: GetBlockNumberErrorType | null
 
  error?.name
          
(property) name: "Error" | "ChainDisconnectedError" | "HttpRequestError" | "InternalRpcError" | "InvalidInputRpcError" | "InvalidParamsRpcError" | "InvalidRequestRpcError" | "JsonRpcVersionUnsupportedError" | ... 17 more ... | undefined
 
  if (error?.name === 'HttpRequestError') {
    const { status } = error
              
const status: number | undefined
    return <div>A HTTP error occurred. Status: {status}</div>
  }
  if (error?.name === 'LimitExceededRpcError') {
    const { code } = error
             
const code: -32005
    return <div>Rate limit exceeded. Code: {code}</div>
  }
  // ...
}

tsx
import { useBlockNumber } from 'wagmi'
 
function App() {
  const { data, error } = useBlockNumber()
                 
const error: GetBlockNumberErrorType | null
 
  error?.name
          
(property) name: "Error" | "ChainDisconnectedError" | "HttpRequestError" | "InternalRpcError" | "InvalidInputRpcError" | "InvalidParamsRpcError" | "InvalidRequestRpcError" | "JsonRpcVersionUnsupportedError" | ... 17 more ... | undefined
 
  if (error?.name === 'HttpRequestError') {
    const { status } = error
              
const status: number | undefined
    return <div>A HTTP error occurred. Status: {status}</div>
  }
  if (error?.name === 'LimitExceededRpcError') {
    const { code } = error
             
const code: -32005
    return <div>Rate limit exceeded. Code: {code}</div>
  }
  // ...
}

import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})

import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})

Connectors

Transports

Error Handling

Error Handling ​

Error Handling