Ethers (Solidity Customized Error)

If you have customized errors in your smart contract and during integration with the frontend, you want to display this customized error to the users, to help them know what your smart contract requires as input or logic-wise.

I will be showing you how to do that.

Most of the time, you must have used the require error handling in your smart contract. Let me show you a common example using a simple function;

function updateNumber(uint _number){
require(_number > 0, "Amount must be greater than 0");
number = _number;
}

Most smart contract developers prefer using customized errors. Let’s see an example.

error InvalidNumber();

function updateNumber(uint _number){
if(_number < 0) {
  revert InvalidNumber();
}
number = _number;
}

Customized error handling in smart contracts is more efficient and developer-helpful than the frequently used require statement.

Custom errors in Solidity can improve the transparency and effectiveness of smart contract code, providing more insightful feedback for developers and smart contract consumers, for instance, using the Ethers library. Adding them to your toolkit can be highly beneficial and reduce gas costs.

So how do we show these customized errors in our frontend?

Let’s say you are integrating with the famous ethers.js library. Let’s build a small code that utilizes ethers

const setNumber= async () => {

    //since we are writing to state, we need a signer and a provider
    const signer = await providerWrite.getSigner();

    //this sets up the contract instance with the contract address, 
    //contract ABI, and the signer(connected account)

    const contractWrite = new ethers.Contract(setContractAddress, contractABI, signer);

    //Let's wrap our logic in try and catch block

    try {
      //This calls the updateNumber function in the smart contract, 
      //with the number set to zero and stores the result in the variable "tx"

      let tx = await contractWrite.updateNumber(0);

      //here, we wait for the transaction to be mined and confirmed
      //then we obtained a receipt, to know the status.
      tx.wait().then(async (receipt) => {
        if (receipt && receipt.status == 1) {
          // transaction success.
          toast.success("Number status updated successfully")
        }
      });
    } 
    
      catch (e) {
      //Now in the case of an error, either from the transaction, or from
      //the smart contract, we will be able to decode the error and display
      //it to the user

      //If e.data exists and the contract instance is available, 
      //the error is decoded using contractWrite.interface.parseError(e.data). 
      //The decoded error is then displayed.

      if (e.data && contractWrite) {
        const decodedError = contractWrite.interface.parseError(e.data);
        toast.error(`Transaction failed: ${decodedError?.name}`)
      } else {

      //If no specific error information is available, 
      //a generic error message is logged to the console.
        console.log(`Error in contract:`, e);
      }
    }
  }

With the comments, I have added to the function above, you can easily denote and understand how to display customized errors in smart contracts on the frontend side.

Thanks for reading and I look forward to sharing more content like this with you.