How to display solidity's custom errors on frontend?

Question

I am trying to catch custom errors in my frontend project, but am not able to do that.

My contract:

pragma solidity 0.8.16;

contract Test {
    error CustomError(uint256 value);

    uint public a;

    function throwError() public {
        a = 6;
        revert CustomError(5);
    }
}

I am trying to use the ethers' interface method to get the error. React code:

  const handleError = async (e: any) => {
    e.preventDefault();

    try {
      let result: any = await dispatch(callContractSendMethod("throwError", [], userAddress));
      result = JSON.parse(result.toString().split(".")[1]);

      const interfaces: any = new Interface([
        "function CustomError(uint256 value)",
      ]);

      const decoded = interfaces.decodeFunctionData(
        interfaces.functions["CustomError(uint256)"],
        result.data
      );

      console.log("decoded", decoded);
    } catch (error: any) {
      console.log("error", error);
    }
  };

But the issue I am facing is that the code interfaces.functions["CustomError(uint256)"] is returning undefined. Because of this, the decoding process is not working correctly. Any solution or way to do it?

Answer 1

Well, I found an answer. I needed to use a different method. Corrected solution:

 const decoded = interfaces.decodeFunctionData(
    interfaces.getFunction("CustomError(uint256)"),
    result.data
  );