> ## Documentation Index
> Fetch the complete documentation index at: https://docs.traceback.cc/llms.txt
> Use this file to discover all available pages before exploring further.

# React SDK

> React 18/19 error boundaries, component profiling, and session recording.

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @traceback/react @traceback/browser
  ```

  ```bash pnpm theme={null}
  pnpm add @traceback/react @traceback/browser
  ```
</CodeGroup>

***

## Initialization

Initialize Traceback in your `index.tsx` or `main.tsx`:

```tsx theme={null}
import React from "react";
import ReactDOM from "react-dom/client";
import * as Traceback from "@traceback/react";
import App from "./App";

Traceback.init({
  dsn: "https://tb_live_key@ingest.traceback.dev/1",
  integrations: [
    new Traceback.BrowserTracing(),
    new Traceback.Replay(),
  ],
  tracesSampleRate: 0.5,
  replaysOnErrorSampleRate: 1.0,
});

const root = ReactDOM.createRoot(document.getElementById("root")!);
root.render(
  <Traceback.ErrorBoundary
    fallback={({ error, resetError }) => (
      <div className="error-fallback">
        <h2>Something went wrong</h2>
        <p>{error.message}</p>
        <button onClick={resetError}>Try Again</button>
      </div>
    )}
  >
    <App />
  </Traceback.ErrorBoundary>
);
```

***

## React Profiler Component

Track render durations and layout shifts across specific UI components:

```tsx theme={null}
import { withProfiler } from "@traceback/react";

const HeavyCheckoutTable = ({ items }: { items: any[] }) => {
  return <table>{/* table rows */}</table>;
};

export default withProfiler(HeavyCheckoutTable, { name: "HeavyCheckoutTable" });
```