Docs / QuickstartBrowse

Quickstart

One install, one function call. From an empty dashboard to your first event in about two minutes.

1. Get your API key

Sign in to perfbit and create an app. The onboarding flow shows your API key straight away; afterwards you can find it under Settings → API Key for that app. Each app has its own key.

See API keys & plans for rotation and plan limits.

2. Install the SDK

npm install @perfbitapp/rn-sdk

The package is pure JavaScript, so there is no pod install and no rebuild step. If you use Expo, this works in the managed workflow without ejecting.

3. Initialise it

Call PerfSDK.init() at the top level of your entry file — App.tsx or index.js — outside your component, so it runs as early as possible. Startup timing is measured from when the SDK module is first evaluated, so the earlier it is imported, the more accurate your cold start numbers.

App.tsx
import { PerfSDK } from '@perfbitapp/rn-sdk';

PerfSDK.init({
  apiKey: 'YOUR_API_KEY',
  appVersion: '1.0.0',
});

That is enough to start collecting cold starts, frames, crashes and network timing. To also get per-screen load times, pass your React Navigation ref:

App.tsx
import { PerfSDK } from '@perfbitapp/rn-sdk';
import { NavigationContainer, createNavigationContainerRef } from '@react-navigation/native';

const navigationRef = createNavigationContainerRef();

PerfSDK.init({
  apiKey: 'YOUR_API_KEY',
  appVersion: '1.0.0',
  environment: 'production',
  navigationRef,
});

export default function App() {
  return (
    <NavigationContainer ref={navigationRef}>
      {/* your app */}
    </NavigationContainer>
  );
}

Screen tracking covers this in more detail, including apps that don't use React Navigation.

4. Set appVersion from your real version

appVersion is the dimension every dashboard comparison is built on, so it should change when you ship. Read it from your app config rather than hard-coding a literal — for example from expo-constants, react-native-device-info, or a value your build pipeline injects.

Note

If every build reports "1.0.0", the Builds view has nothing to compare and regressions will average away into a single bucket.

5. Verify your first event

Run your app. Events are queued and flushed every 30 seconds, or immediately once 50 events accumulate, or when the app goes to the background — so the fastest way to force a flush is to background the app.

If you are still on the onboarding screen, it polls for you and advances automatically once the first event lands. Otherwise, open your dashboard: the Overview page fills in as soon as data arrives.

Heads up

The dashboard only displays production data. Events sent with environment set to 'staging' or 'development' are accepted and stored, but every dashboard query filters to production, so they will never appear. The default is 'production' — this only bites if you set it explicitly.

And if you want to test from a development build, note that environment: 'development' disables the SDK entirely unless you also pass debug: true:

PerfSDK.init({
  apiKey: 'YOUR_API_KEY',
  appVersion: '1.0.0',
  environment: 'development',
  debug: true, // required, or the SDK stays disabled in development
});

With debug: true the SDK also logs every event it queues to the console, prefixed with [perfbit].

Next steps