Getting Started

Quick Start

Get Reliable running in your app in under two minutes. This walkthrough assumes you've already installed the SDK.

Just want to try it first?

Skip integration entirely and use the live sandbox at reliablesandbox.ziloris.com. Paste your public key, trigger errors / vitals / replays from the in-page controls, and watch them land in your dashboard in real time. No code changes needed.

1. Get your public key#

Open the Reliable dashboard, create a project (or pick an existing one), and copy the public key from Settings → API Keys. Public keys start with pk_live_rl_ for production projects and pk_test_rl_ for test projects.

Public, not secret

Public keys are safe to expose in client-side bundles. Never use a server-side secret key in a browser SDK — those grant full project access.

2. Initialize the SDK#

Call init() as early as possible in your app's bootstrap. Doing this first means errors that fire during initial render are still captured.

typescript

// app entry — main.ts, index.ts, src/index.tsx, etc.
import { init } from '@reliableapp/frontend-core';

init({
  publicKey: 'pk_live_rl_xxxxxxxxxxxxxxxx',
});

That's it. The SDK is now capturing JavaScript errors, unhandled promise rejections, Core Web Vitals, failed network requests, click events, and route changes — all attributed to the current session.

React apps#

For React, wrap your root with <ReliableProvider> instead. It calls init() once on mount and exposes the client through context for hooks and the error boundary.

tsx

// app/layout.tsx (Next.js App Router)
// or _app.tsx (Pages Router) / src/main.tsx (Vite)
import { ReliableProvider } from '@reliableapp/react';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ReliableProvider config={{ publicKey: 'pk_live_rl_xxxxxxxxxxxxxxxx' }}>
          {children}
        </ReliableProvider>
      </body>
    </html>
  );
}

3. Identify your users (optional)#

Tying events to a user is what turns "239 errors today" into "Jane Doe at acme.com hit 4 errors at checkout." Call identify() after the user logs in.

typescript

import { identify } from '@reliableapp/frontend-core';

identify({
  externalId: 'user_abc123',
  email: 'jane@acme.com',
  name: 'Jane Doe',
  traits: { plan: 'pro', signupDate: '2025-01-12' },
});

In React, prefer the useIdentify hook — it handles re-identification when the user changes (e.g. after switching accounts).

4. Verify it's working#

Open your app in a browser.
Open DevTools → Network tab. Filter by reliable.
You should see a POST /sessions request fire on page load.
Throw a test error in the console: throw new Error('hello reliable').
You'll see a POST /errors request fire moments later.
Switch back to the Reliable dashboard — the error appears in Frontend Health → Errors.

You're done

Reliable is now live in your app. Move on to Configuration to fine-tune what gets captured, or jump to Error Tracking to learn how the error pipeline works.

Not seeing events?

Verify your project is healthy by hitting the public sandbox at reliablesandbox.ziloris.com with the same public key. If errors land there but not from your app, the issue is integration-side (allowed origins, sample rate, ad-blockers). If they don't land in the sandbox either, the project itself is misconfigured.

Manually reporting errors#

Auto-capture handles uncaught errors. For caught errors (try/catch branches, validation failures, business logic errors) use captureException:

typescript

import { captureException } from '@reliableapp/frontend-core';

try {
  await processPayment();
} catch (err) {
  captureException(err, {
    severity: 'high',
    tags: { flow: 'checkout', step: 'payment' },
  });
  showErrorToast(err.message);
}

Installation

Getting Started

Configuration

Getting Started