React

Setup

Install @reliableapp/react and wrap your app with <ReliableProvider>. Includes the full core API plus React-specific primitives.

Install#

Only one package is needed — @reliableapp/react bundles and re-exports everything from the core SDK.

bash

npm install @reliableapp/react

React 18 or later is required. The package marks react as a peer dependency, so it uses the same React instance as the rest of your app.

<ReliableProvider> calls init() exactly once on first render and exposes the client through React context. Place it at the very top of your app — outside any router, outside any error boundary you care about, outside any conditional rendering.

About the release field

Every example below passes a release alongside the public key. It's a build identifier (commit SHA, version tag — whatever's unique per deploy) that tags every event and lets the backend resolve minified stacks against the matching sourcemap. Skip it for now if you haven't set up source maps yet — the SDK works without it. See the Source Maps guide for end-to-end setup.

Next.js App Router#

tsx

// app/layout.tsx
import { ReliableProvider } from '@reliableapp/react';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <ReliableProvider
          config={{
            publicKey: 'pk_live_rl_...',
            release:   process.env.NEXT_PUBLIC_GIT_SHA, // or NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA on Vercel
          }}
        >
          {children}
        </ReliableProvider>
      </body>
    </html>
  );
}

Server vs. client

<ReliableProvider> is a Client Component (it uses hooks and browser-only APIs). In the App Router, you can render it inside a Server Component layout — Next.js handles the boundary automatically. Just don't add "use client" to your layout file unless you have other reasons to.

Next.js Pages Router#

tsx

// pages/_app.tsx
import { ReliableProvider } from '@reliableapp/react';

export default function MyApp({ Component, pageProps }) {
  return (
    <ReliableProvider
      config={{
        publicKey: 'pk_live_rl_...',
        release:   process.env.NEXT_PUBLIC_GIT_SHA,
      }}
    >
      <Component {...pageProps} />
    </ReliableProvider>
  );
}

Vite / CRA / any other React app#

tsx

// src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { ReliableProvider } from '@reliableapp/react';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ReliableProvider
      config={{
        publicKey: 'pk_live_rl_...',
        release:   import.meta.env.VITE_GIT_SHA,    // for Vite
        // release: process.env.REACT_APP_GIT_SHA,  // for Create React App
      }}
    >
      <App />
    </ReliableProvider>
  </React.StrictMode>,
);

StrictMode is safe

React 18 StrictMode mounts components twice in development. <ReliableProvider> guards against this — init() is only called the first time, second-mount is a no-op.

Props#

Name	Type	Default	Description
config*	ReliableConfig	—	The same config you'd pass to init() — publicKey, sampleRate, capture flags, beforeSend, etc. See Configuration.
children*	ReactNode	—	Your app tree.

Make production stacks readable (recommended)#

The 30-second SDK setup above is enough to start collecting errors — but production stack traces will be minified gibberish until you wire source maps. It's a one-line addition to your build script, not an advanced topic — most React apps need it before going live.

json

{
  "scripts": {
    "build": "next build && npx --yes @reliableapp/frontend-cli sourcemaps upload --dist=./.next/static --url-prefix=https://YOUR_DOMAIN/_next/static/"
  }
}

Plus one env var (RELIABLE_TOKEN) in your CI / Vercel / Railway settings. That's it. Full guide has per-bundler recipes (Vite, CRA, Remix, SvelteKit, Astro, Nuxt) and explains how the release tag works end-to-end.

Install once for faster repeat builds

The example above uses npx --yes so it works without any prior install. If you want faster builds on repeat runs, do npm install --save-dev @reliableapp/frontend-cli once and drop the npx --yes prefix.

What's next#

Wrap risky subtrees with <ReliableErrorBoundary> to catch render-phase crashes.
Use hooks for ergonomic access to identify, capture, breadcrumbs, and tags.
Add router adapters for cleaner navigation breadcrumbs in some routers.
Wire source maps so production errors resolve to real file/line/function names.

flush & lifecycle

API Reference

Error Boundary

React