# 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](https://docs.blocktorch.xyz/use-cases/debugging) as well as [analytics](https://docs.blocktorch.xyz/concepts/data-sources/broken-reference). 

### 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="https://4201788747-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5vTnL6SrT2qX7rXjH96E%2Fuploads%2FASLjqB4WsQnAMj46knTv%2FScreenshot%202024-02-25%20at%2012.29.34.png?alt=media&#x26;token=8cea1117-177b-43f2-be07-3ce7c1e52965" 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](https://docs.blocktorch.xyz/use-cases/monitoring) as well as when [searching](https://docs.blocktorch.xyz/use-cases/searching) logs. For successful transactions we automatically contextualize your transaction logs with dragon data to show the full [end-2-end trace](https://docs.blocktorch.xyz/use-cases/tracing)&#x20;