Cannot access Error object and sendTransaction.on(error) not firing

[meri-maki]

Expected behavior

While working on error handling I noticed that I'm catching transaction errors in this format:

vt: Returned error: MetaMask Tx Signature: User denied transaction signature.

With this error I cannot access error code and other useful staff..

Tried adding web3.eth.sendTransaction.on('error', (error) => {} as written in docs, and access the innerError object
(https://docs.web3js.org/guides/basics/sign_and_send_tx/promi_event)

Tested with transaction cancellation but the event is not firing, but it should, right?

Steps to reproduce the behavior

	const onSubmitForm = (e) => {
		e.preventDefault()
		resetPurchase()

		const amount = Math.max(0, parseFloat(ethInputAmount))
		if (amount < 0.000001 || !amount) {
			return
		}

		setPurchaseLoading(true)

		let selectedAccount

		authorize({
			force: false,
			metaMaskDeeplinkUrl: appendParamsToUrl(window.location.href, {
				[ethAmountQueryKey]: amount,
			}),
		})
			.then((res) => {
				web3 = res
				return getAuthorizedAccounts()
			})
			.then(async (accounts) => {
				selectedAccount = accounts[0]
				let transaction = {
					from: selectedAccount,
					to: window.toonAppData.address,
					data: "0x64edfbf0e2c706ba4a09595315c45355a341a576cc17f3a19f43ac1c02f814ee",
					value: web3.utils.toWei(String(amount), "ether"),
				}
				transaction = { ...transaction, gas: await web3.eth.estimateGas(transaction) }
				return web3.eth
					.sendTransaction(transaction)
					.on("transactionHash", function (txHash) {
						setPurchaseLoading(false)

						if (txHash !== undefined) {
							setEthInputAmount("")
							scheduleTxCheckStatus(txHash)
						}
					})
					.on("error", (error) => {
						console.log(error.innerError)
						console.log(error.code)
						console.log(error.message)
						throw new Error(error.innerError)
					})
			})
			.then(function (receipt) {
				console.log("receipt2", receipt)
			})
			.catch((error) => {
				setPurchaseLoading(false)


				console.log(error)
				setPurchaseError({ status: true, message: error.message })
			})
	}

the logic above was mentioned in this issue (#6249)
and previous logic was handling errors correctly (returning Error object, not vt)

Environment

"web3": "^4.0.3",
"web3-eth": "^4.0.3"

[luu-alex]

Thank you for submitting this error, it seems odd that our error is not catching this. I'll take a look into this

[meri-maki]

@luu-alex hi! could it be the error in the code itself? or is on.error definetely not catching anything?

[luu-alex]

Hey there, sorry for the long response. The issue vt: Returned error: MetaMask Tx Signature: User denied transaction signature. will not fire an 'error' event. When using the method sendTransaction The errors web3js will listen to will be coming from the rpc node response, not from metamask. So you should not expect an error event to be fired. I hope this answers your question and if you have anymore feel free to ask. Thanks for your patience

[meri-maki]

Okay, but if you have insufficient funds, for example, should it fire an error?

Here are a few examples of errors I get:

1. insufficient funds with MM extension for Chrome - I get correct error first (with correct codes and stuff) and then carching VT

2. same MM but denied transaction

3. Connected with WalletConnect with Rainbow app - first cancelled, then funds

4. This is example with "web3": "^1.8.0", "web3-eth": "^1.8.0" and a bit different logic I will share below
   As you can see, I'm catching correct error object and not VT returned error

Here is the code with old logic but it was catching errors correctly and that way I could easily filter errors by their codes and return respective UI
Since updating to the latest web3, I thought that error catching behavior would be the same but for some reason it's not...

const onSubmitForm = (e) => {
		e.preventDefault()

		const amount = Math.max(0, parseFloat(ethInputAmount))
		if (amount < 0.000001 || !amount) {
			return
		}

		setPurchaseLoading(true)

		let selectedAccount

		debounce("purchase", 400, function () {
			const amount = Math.max(0, parseFloat(ethInputAmount))

			authorize({
				force: false,
				metaMaskDeeplinkUrl: appendParamsToUrl(window.location.href, {
					[ethAmountQueryKey]: amount,
				}),
			})
				.then((res) => {
					web3 = res
					return getAuthorizedAccounts()
				})
				.then((accounts) => {
					selectedAccount = accounts[0]					

					return web3.eth
						.sendTransaction({
							from: selectedAccount,
							to: window.toonAppData.address,
							data: "0x64edfbf0e2c706ba4a09595315c45355a341a576cc17f3a19f43ac1c02f814ee",
							value: web3.utils.toWei(amount.toString(), "ether"),
						})
						.on("transactionHash", function (txHash) {
							setPurchaseLoading(false)

							if (txHash !== undefined) {
								setEthInputAmount("")
								scheduleTxCheckStatus(txHash)
							}
						})
				})
				.then(function (receipt) {
					console.log("receipt2", receipt)
				})
				.catch(function (err) {
					console.error(err)
					setPurchaseLoading(false)

					if (err.code === 4001) {
						return
					}
					setPurchaseError(true)
					setPurchaseErrorMessage(err.message)
				})
		})
	}
	```
	
	

[luu-alex]

Ah I see what you, version 4 metamask errors are not returning properly with error and code like version 1 errors. This is definitely an issue. I'll take a look into this and update when I have a solution for this. Thank you for reporting this)

[meri-maki]

@luu-alex hi! any updates? )

[luu-alex]

Hey there! Sorry was away this week, I have a PR created and should be good to go for next week. thank you for waiting.

[luu-alex]

Hi there @meri-maki the PR has been merged and is now in the dev branch. [email protected] as well it'll be part of next release. When catching the error, make sure to use error.toJSON() and the error and errorcode you will want will be apart of error.toJSON().innerError.

If theres any other issues please let me know.

[meri-maki]

Hi @luu-alex ! I updated to 4.1.0 and replaced

.catch(function (err) {
   				console.error(err)

   			})

to

.catch((error) => {
				const err = error.toJSON()
				console.log(err)

			})

Here is what i get in console...

innerError object is undefined, the code is always 100...
I guess the issue remains, do i need to refactor the function itself? because .on(error) is still not working...

[luu-alex]

can you install the dev branch? https://www.npmjs.com/package/web3-eth/v/4.1.1-dev.622174c.0 yarn add [email protected] or npm install web3@[email protected] @meri-maki

[meri-maki]

@luu-alex updated, still a no
maybe a repo will help? i will make one

[meri-maki]

@luu-alex here is the repo
https:/meri-maki/web3-error

main component: https:/meri-maki/web3-error/blob/main/src/components/widgets/Purchase%20Widgets/MintForm/MintForm.jsx

[meri-maki]

After updating to v4.1.1 I'm able to access innerError object so finally RESOLVED

[meri-maki]

unfortunately, this is not working with transactions via WalletConnect wallets, but that's another story