Ethereum: How to display solidity’s custom errors on frontend?

Showing Custom Solidity Errors on the Frontend

When building complex decentralized applications (dApps), it’s not uncommon to encounter custom errors that can’t be caught by traditional error handling mechanisms. In this article, we’ll explore how to show these custom errors on the frontend using Ethereum’s web3.js library.

Why show custom errors?

Custom errors are often the result of unexpected logic in your contract or third-party integrations. By showing them on the frontend, you can:

• Improve user experience: Users appreciate a clear signal that something went wrong.

• Improve debugging tools: Developers can use these custom errors to more effectively identify and fix problems.

Prerequisites

Before we dive in, make sure you have:

• A basic understanding of Solidity and web3.js

• A contract deployed on the Ethereum blockchain

Displaying custom errors with web3.js

In this example, we will use web3.js to display custom errors in a client application. We will create an event emitter that listens for CustomError events emitted by your contract.

First, install the web3.js and w3-logger libraries:

npm install web3 w3-logger

pragma solidity 0,8,16;
test contract {
event CustomError(uint256 value);
public uint a;
constructor() public {
emit CustomError(10); // Example error code
}
function testFunction() external pure returns (bool) {
a = 5; // This should raise a custom error
return true; // Successful execution
}
}

import * as w3 from "web3";
import { Events } from "w3-logger";
class FrontendApp {
constructor(w3Instance) {
this.w3 = w3Instance;
const eventEmitter = new Events();
eventEmitter.on("CustomError", (errorValue) => {
console.error(Custom Error: ${errorValue});
// Edit your custom error logic here
});
// Deployment contract
deployContract(w3Instance);
}
async deployContract(w3Instance) {
const contractAddress = "0x..."; // Replace with your contract address
const contractAbi = "..."; // Replace with your contract ABI
const web3 = new w3.Web3(w3Instance, contractAbi);
wait web3.eth.deployContract(contractAddress);
}
}

To run this frontend application, you will need to create a new Solidity contract and deploy it. Then import the FrontendAppclass and call its constructor.

const w3Instance = require("web3")("
const frontendApp = new FrontendApp(w3Instance);

try {
const result = await frontendApp.testFunction();
console.log(result);
} catch (error) {
console.error(Custom error: ${error.message});
}

Displaying custom errors is a fundamental step in building robust decentralized applications. By using web3.js` and implementing a custom error handling system, you can improve the usability and debuggability of your frontend application. This example shows how to deploy a contract on the Ethereum blockchain and display custom errors on the frontend using web3.js.