React Setup

Get started with Cluebase in any React app (Vite, CRA, etc.) in under 2 minutes.

Install the SDK

Install the cluebase-react package.

bash

npm install cluebase-react

Add the Provider

Wrap your app with CluebaseProvider and add your API key.

That's all you need!

Cluebase automatically sends errors to our hosted backend. No server setup required.

src/main.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { CluebaseProvider } from 'cluebase-react';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <CluebaseProvider apiKey={import.meta.env.VITE_Cluebase_API_KEY ?? ''}>
      <App />
    </CluebaseProvider>
  </React.StrictMode>,
);

Add Your API Key

Add your API key to your environment file:

Vite

.env

VITE_Cluebase_API_KEY=lum_your_api_key_here

Create React App

.env

REACT_APP_Cluebase_API_KEY=lum_your_api_key_here

Get your API key from your Cluebase Dashboard.

Test It

Trigger an error to verify everything is working:

tsx

<button onClick={() => { throw new Error('Test Cluebase!') }}>
  Trigger Error
</button>

You're all set!

If you see the Cluebase overlay, errors are being captured and sent to your dashboard.