Skip to content
Opslane

React setup

Wire the Opslane SDK into a React 18/19 app so render errors are captured through an error boundary.

Install

Section titled “Install”
Terminal window
npm install @opslane/sdk

React is an optional peer dependency of the SDK — installing @opslane/sdk does not pull React in.

Initialize and wrap

Section titled “Initialize and wrap”
import { createRoot } from 'react-dom/client';
import { init } from '@opslane/sdk';
import { OpslaneErrorBoundary } from '@opslane/sdk/react';
import App from './App';


init({
  apiKey: import.meta.env.VITE_OPSLANE_API_KEY,
  endpoint: 'https://your-opslane-instance.example.com', // omit for hosted Opslane
  release: import.meta.env.VITE_OPSLANE_RELEASE,
});


createRoot(document.getElementById('root')!).render(
  <OpslaneErrorBoundary fallback={<p>Something went wrong.</p>}>
    <App />
  </OpslaneErrorBoundary>
);

This example uses Vite. In Next.js, read process.env.NEXT_PUBLIC_OPSLANE_API_KEY and process.env.NEXT_PUBLIC_OPSLANE_RELEASE instead.

Privacy: Session recording is on by default since SDK 1.0.0; review replay privacy and masking before deploying.

What gets caught where

Section titled “What gets caught where”
  • Render errors (thrown during render, in lifecycle, or in hooks’ render phase) are caught by OpslaneErrorBoundary, reported, and replaced with your fallback UI.
  • Everything else — event handlers, setTimeout, promise rejections — bypasses React error boundaries by design; the SDK’s global handlers (installed by init) catch those.
  • To report an error you caught yourself inside a boundary of your own, use captureReactError(error) from @opslane/sdk/react (or the framework-agnostic captureException).

Place boundaries as granularly as you like — a boundary per route keeps one broken page from blanking the whole app, and every boundary still reports.

Verify it works

Section titled “Verify it works”
function Crash() { throw new Error('opslane react smoke test'); }
// render <Crash /> inside the boundary once, then remove it

The event should appear in your dashboard (or via the incidents API) within seconds.

Next

Section titled “Next”