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

# React — Installation

> Add Lerix to your React app in a few steps.

## Requirements

* React 18+

<Note>
  This is a dedicated React library — a `LerixProvider` component, a
  `LerixErrorBoundary`, and `useLerix()`/`useLerixNotifications()` hooks —
  built on top of `@lerix-dev/lerix-core`, the framework-agnostic engine shared by
  every Lerix web SDK. Building an Angular app instead? See the
  [Angular SDK](/frameworks/angular/installation). If you're using
  neither React nor Angular, `@lerix-dev/lerix-core` also works directly.
</Note>

## 1. Add the dependency

```bash theme={"dark"}
npm install @lerix-dev/lerix-react
```

## 2. Register the SDK

Wrap your app in `LerixProvider`, and `LerixErrorBoundary` to catch render errors:

```tsx main.tsx theme={"dark"}
import { createRoot } from 'react-dom/client';
import { LerixErrorBoundary, LerixProvider } from '@lerix-dev/lerix-react';
import App from './App';

createRoot(document.getElementById('root')!).render(
  <LerixProvider
    options={{
      apiKey: 'your-api-key',
      projectId: 'your-project-id',
      debugMode: true,
    }}
  >
    <LerixErrorBoundary fallback={<p>Something went wrong.</p>}>
      <App />
    </LerixErrorBoundary>
  </LerixProvider>,
);
```

<Note>
  Find your API key and project ID in the [Lerix Dashboard](https://app.lerix.dev) under **Project Settings**.
</Note>

Registration with the backend, and the automatic crash handler, run once
at mount — safe even under React 18 StrictMode's double-effect-invocation
in development, since initialization is re-entrant-safe.

### Parameters

`LerixProvider`'s `options` prop:

| Parameter | Type | Required | Description |
| - | - | - | - |
| `apiKey` | `string` | Yes | Your project API key from the dashboard |
| `projectId` | `string` | Yes | Your project ID (slug) from the dashboard |
| `url` | `string` | No | Backend base URL. Defaults to `https://api.lerix.dev/v1` — only change this if you're pointing at a self-hosted backend |
| `release` | `string` | No | The version this build ships as (e.g. `1.4.0` or a commit SHA). Pass the same value when uploading source maps so production stack traces show your original files: see [Source maps](/frameworks/react/source-maps) |
| `debugMode` | `boolean` | No | Print SDK request/response logs to the console (default: `false`) |
| `enableCrashReporting` | `boolean` | No | Install the automatic crash handler (default: `true`) — see [Error Tracking](/frameworks/react/error-tracking) |
| `onError` | `(error: unknown) => void` | No | Called if initialization itself fails (e.g. network unreachable) |

## 3. Verify the integration

Use `useLerix()` and throw a test error to confirm everything is working:

```tsx theme={"dark"}
import { useLerix } from '@lerix-dev/lerix-react';

function MyComponent() {
  const lerix = useLerix();

  return <button onClick={() => lerix.throwError('Test error')}>Test</button>;
}
```

Then open your [dashboard](https://app.lerix.dev) — the error should appear within seconds.

<Check>
  You're all set! Continue to [Error Tracking](/frameworks/react/error-tracking) to report custom errors and enable automatic capture, or [Push Notifications](/frameworks/react/push-notifications) to enable push delivery.
</Check>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.