React Frontends

Transactions that fail in the client/frontend cannot be found in a block explorer as the transaction never makes it into the mempool and subsequently on chain. For that reason, the Blocktorch team developed Dragon, an SDK that can easily be added to dApp frontends utilizing React.

With Dragon you can track failing and successful web3 client transactions for debugging as well as analytics.

Why consider using Dragon?

• json RPC responses, especially error messages, in the UI are cryptic

• to understand whether errors impacting users are a bug in the frontend or the smart contract

• to get better analytics about the wallets interacting with your dApp

• to understand if wallets are interacting with your smart contracts through your dApp frontend or through their own scripts, which can especially be helpful for security

Installation

npm install @blocktorch/0xdragon

or if you prefer yarn

yarn add @blocktorch/0xdragon

Usage

SDK initialization

import { Dragon } from '@blocktorch/0xdragon'
const dragon = new Dragon({
	projectId: <your-project-id>,
	apiKey: <your-blocktorch-api-key>
})

You can get your project ID and api key from the Blocktorch app on the "Settings" page

In the constructor you can also specify additional options:

• contractName (string) - default identifier for what the transactions are interacting with. Default is "unknown"

• chainId (number) - chain ID of the application

• http (object):

  • maxRetries (number) - number of times failed SDK requests are retried

  • delay (number) - number of times failed SDK requests are retried

  • exponentialBackoff (boolean) - Whether to allow exponential backoff or not

init(options?)

Initialize the tracking of a single transaction

const id = dragon.init()

You can override options per transaction.

• contract (string) - identifier for what the transaction is interacting with

• chainId (number) - id of the blockchain

success(id, transaction)

Track the transaction as a success. Should be done after the transaction is accepted on chain.

await dragon.success(id, transaction)

error(id, error)

Track the transaction as an error

await dragon.error(id, error)

wrap(fn, options?)

If you are using ethers@5 or any other compatible libraries you can use a helper function to wrap your whole transaction and it will detect success or failure itself. It will wait until the transaction receipt is received to mark it as a success.

await dragon.wrap(
   contract.doSmth({ value:  ethers.utils.parseEther("0.1") })
)

You can also specify the following options:

• contract (string) - identifier for what the transaction is interacting with

• chainId (number) - id of the blockchain

Accessing data collected by Dragon

All dragon data can be queried for monitoring as well as when searching logs. For successful transactions we automatically contextualize your transaction logs with dragon data to show the full end-2-end trace