Why Error Handling is Important

When interacting with the Ethereum blockchain using Ethers.js, various errors can occur due to network issues, invalid inputs, or smart contract failures. Proper error handling is essential to provide meaningful feedback to users and ensure that your application can gracefully handle unexpected situations.

Common Types of Errors in Ethers.js

Some common types of errors you might encounter include:

  • Provider Errors: Issues with connecting to the Ethereum network.
  • Transaction Errors: Problems with sending transactions, such as insufficient gas or invalid nonce.
  • Contract Errors: Errors thrown by smart contracts, often due to failed require statements.

How to Catch Errors in Ethers.js

You can catch errors in Ethers.js using standard JavaScript try...catch blocks. Below is a complete HTML example demonstrating how to catch and handle errors when sending a transaction using Ethers.js: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ethers.js Error Handling Example</title>
    <script src="https://cdn.jsdelivr.net/npm/ethers@5.7.0/dist/ethers.umd.min.js"></script>
</head>
<body>
    <h1>Send Ether with Error Handling</h1>
    <input type="text" id="recipientInput" placeholder="Enter recipient address" />
    <input type="number" id="amountInput" placeholder="Enter amount in ETH" />
    <input type="text" id="privateKeyInput" placeholder="Enter your private key" />
    <button id="sendButton">Send Ether</button>
    <pre id="transactionInfo"></pre>

    <script>
        async function sendEther() {
            const provider = new ethers.providers.Web3Provider(window.ethereum);
            const recipient = document.getElementById('recipientInput').value;
            const amount = document.getElementById('amountInput').value;
            const privateKey = document.getElementById('privateKeyInput').value;

            // Create a wallet instance
            const wallet = new ethers.Wallet(privateKey, provider);

            // Create a transaction object
            const tx = {
                to: recipient,
                value: ethers.utils.parseEther(amount) // Convert amount to Wei
            };

            try {
                // Send the transaction
                const transactionResponse = await wallet.sendTransaction(tx);
                document.getElementById('transactionInfo').innerText = "Transaction Sent: " + transactionResponse.hash;

                // Wait for confirmation
                const receipt = await transactionResponse.wait();
                document.getElementById('transactionInfo').innerText += "\\nTransaction Confirmed in Block: " + receipt.blockNumber;
            } catch (error) {
                // Catch and handle errors
                if (error.code === ethers.errors.INVALID_ARGUMENT) {
                    document.getElementById('transactionInfo').innerText = "Invalid argument: " + error.message;
                } else if (error.code === ethers.errors.UNPREDICTABLE_GAS_LIMIT) {
                    document.getElementById('transactionInfo').innerText = "Unpredictable gas limit: " + error.message;
                } else {
                    document.getElementById('transactionInfo').innerText = "Error: " + error.message;
                }
            }
        }

        document.getElementById('sendButton').onclick = sendEther;
    </script>
</body>
</html>

How It Works

In the example above:

  1. We create a simple HTML interface that allows the user to input the recipient's address, the amount of Ether to send, and their private key.
  2. The sendEther function initializes a connection to the Ethereum network using a Web3 provider.
  3. A wallet instance is created using the user's private key, which allows for signing transactions.
  4. A transaction object is constructed with the recipient's address and the amount of Ether to send, converted to Wei using ethers.utils.parseEther.
  5. The transaction is sent using wallet.sendTransaction, and the transaction hash is displayed to the user.
  6. We use a try...catch block to handle any errors that may occur during the transaction process.
  7. Specific error codes are checked, and appropriate messages are displayed to the user based on the type of error encountered.

Conclusion

Catching errors in Ethers.js is crucial for building robust applications that interact with the Ethereum blockchain. By using try...catch blocks, you can gracefully handle errors and provide users with meaningful feedback, enhancing the overall user experience and reliability of your application.