React — Installation

Requirements

React 18+

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. If you’re using neither React nor Angular, @lerix-dev/lerix-core also works directly.

1. Add the dependency

npm install @lerix-dev/lerix-react

2. Register the SDK

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

main.tsx

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>,
);

Find your API key and project ID in the Lerix Dashboard under Project Settings.

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
`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
`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:

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 — the error should appear within seconds.

You’re all set! Continue to Error Tracking to report custom errors and enable automatic capture, or Push Notifications to enable push delivery.

Getting started

Frameworks

Modules

Developers

React — Installation

Requirements

1. Add the dependency

2. Register the SDK

Parameters

3. Verify the integration

​Requirements

​1. Add the dependency

​2. Register the SDK

​Parameters

​3. Verify the integration

Requirements

1. Add the dependency

2. Register the SDK

Parameters

3. Verify the integration