How to listen to Metamask Errors using useWeb3Contract function?

[alymurtazamemon]

I am using a useWeb3Contract hook and using runContractFunction I am calling the contract function. I am handling the errors of this function call using onError function provided by runContractFunction, as you can below;

await preMintNFT({
            onSuccess: (tx) => handleSuccess(tx as ContractTransaction),
            onError: (error) => {
                handleErrors(error);
            },
        });

This is the error that Metamask throw, but I am not able to get these error key/value using the error instance provided by the OnError function.

I am looking forward to the solution. Thanks.

[YosephKS]

Hey @alymurtazamemon,

can you show more of your code on how it looks like?

Especially include useWeb3Contract in it

[alymurtazamemon]

const { runContractFunction: preMintNFT } = useWeb3Contract({
        abi: abi,
        contractAddress: props.nftContractAddress,
        functionName: "preMintNFT",
        params: {
            _proof: proof,
            _tokenUriIndex: props.nftIndex,
        },
    });

This is my useWeb3Contract code and everything is correct; as expected, my smart contract is throwing the error on the second time NFT mint. But as we can see in the console we have the above error. I wonder how we can get these error keys/values in the onError function.

[johnversus]

Hi @alymurtazamemon

useWeb3Contract stores the error in a state variable and it is exported from the hook. Since it is a state variable you can use useEffect to log or process the error.

const { error } = useWeb3Contract({ ... })

//... 
useEffect(() => {
if(error){
  console.log(error);
}
},[error])

Try as shown in the above code and let us know if it works.

[alymurtazamemon]

I am able to get the error but my question is how to get the error’s keys/values.

onError: (error) => {
    console.log(error);
},

This gives me the error, but as you can see my error has so many other things like code, data, and message and data itself has code, data, and message.

But this error of type Error only provides error.name and error.message keys/values but not the other keys/values of Metamask error.

[johnversus]

Hi @alymurtazamemon

Can you send a snap of the complete error returned from the useWeb3Contract error value? So I can see which key is missing when compared with the error from metamask.

[alymurtazamemon]

[johnversus]

Can your try logging the data using console.log to compare with metamask error? I believe the error data should almost be similar irrespective of the key values.

And also some of the key values like code and message in metamask error are just repeating itself.

[alymurtazamemon]

For some node_modules reasons, I am not able to use the console.log statement in my project otherwise I could show you that but If the error is not showing other keys/values it means I cannot use them in my app. I even tried to deconstruct the keys from the error such as code or data but It shows a compile-time error indicating that the key does not exist in the error.

Does anyone ever handle the smart contracts require or revert errors using this function?

[johnversus]

I tested it now with this. You can find the error message related to the reverted execution under JSON.parse(JSON.stringify(e)).error.message. I used JSON.parse and JSON.stringify as the error returned from the function is in normal string form.

runContractFunction({
            onError: (e) => {
              console.log(JSON.parse(JSON.stringify(e)));
            },
          });

[alymurtazamemon]

Yes, This is working Thanks for your help.

Also while searching for this I found something from the react-moralis GitHub readme file.

try {
            await preMintNFT({
                throwOnError: true,
                onSuccess: (tx) => handleSuccess(tx as ContractTransaction),
                // onError: (error) => {
                //     handleErrors(error);
                // },
            });
        } catch (error: any) {
            handleErrors(error);
        }

We can use the throwOnError property instead of onError function which will throw error and using catch we can handle this also.

if (error.message.includes("NFTAirdrop__NotInTheAllowlist")) {

This way I handle the above situation before the above solution so this is also an option.

Hope these solutions will be helpful for others.

[Mauro]

Hi, Aly!

Its great to hear you got it working; may I know how you find moralis services so far?