# 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](https://www.npmjs.com/package/@blocktorch/0xdragon), an SDK that can easily be added to dApp frontends utilizing [React](https://react.dev/). 

With Dragon you can track failing and successful web3 client transactions for [debugging](/use-cases/debugging.md) as well as [analytics](broken://pages/N9ZEqoGw7aCfFJcWnAso). 

### 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](https://beta.blocktorch.xyz)  on the "Settings" page

<figure><img src="/files/gI0UxXPam8kePioXLYsP" alt=""><figcaption></figcaption></figure>

In the constructor you can also specify additional options:&#x20;

* `contractName` (*string*) - default identifier for what the transactions are interacting with. Default is "unknown"&#x20;
* `chainId` (*number*) - chain ID of the application&#x20;
* `http` (*object*):   &#x20;
  * `maxRetries` (*number*) - number of times failed SDK requests are retried &#x20;
  * `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.&#x20;

* `contract` (*string*) - identifier for what the transaction is interacting with&#x20;
* `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:&#x20;

* `contract` (*string*) - identifier for what the transaction is interacting with&#x20;
* `chainId` (*number*) - id of the blockchain

### Accessing data collected by Dragon

All dragon data can be queried for [monitoring](/use-cases/monitoring.md) as well as when [searching](/use-cases/searching.md) logs. For successful transactions we automatically contextualize your transaction logs with dragon data to show the full [end-2-end trace](/use-cases/tracing.md)&#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.blocktorch.xyz/concepts/data-sources/react-frontends.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.