Web quick start

webDeveloper

Install the Web SDK, initialise it with your client key, and confirm your first browser session reaches the dashboard — in about five minutes.

Updated August 12, 2026Reviewed August 7, 2026

This takes about five minutes and ends with a session visible in the dashboard. For a React Native app, use the React Native quick start instead.

1. Install the package#

Terminal

npm i @scalebun/web

Terminal

pnpm add @scalebun/web

Terminal

yarn add @scalebun/web

No build step? There is a script tag and a Google Tag Manager template — see Plain JavaScript, CDN & GTM.

2. Then follow these steps#

Create an app and get credentials
In the dashboard, create an Organization → Project → App. Each app has environments (development, staging, production), and each environment issues its own key pair under Workspace → SDK & API keys.
The Web SDK needs two values, both shown in the app's SDK setup panel: the client key (skb_live_ck_…) and the API base URL. Read the base URL from the panel rather than hard-coding a host — it differs per deployment.

Initialise on the client, as early as possible

The config is the same everywhere; where the call goes depends on your framework. Pick yours — getting this wrong is the most common reason a first integration reports no data at all.

src/main.tsTypeScript

import ScaleBun from '@scalebun/web';
await ScaleBun.init({ clientKey: '<YOUR_CLIENT_KEY>', apiBaseUrl: '<YOUR_API_BASE_URL>' });

src/main.tsxTSX

import { ScaleBunProvider } from '@scalebun/web-react';
<ScaleBunProvider config={{ clientKey: '<YOUR_CLIENT_KEY>', apiBaseUrl: '<YOUR_API_BASE_URL>' }}>  <App /></ScaleBunProvider>;

One component: init, render-error boundary and the in-app client.

app/layout.tsxTSX

import { ScaleBunProvider } from '@scalebun/web-next';
<ScaleBunProvider config={{ clientKey: '<YOUR_CLIENT_KEY>', apiBaseUrl: '<YOUR_API_BASE_URL>' }}>  {children}</ScaleBunProvider>;

Goes straight into your Server Component layout — the provider carries its own 'use client'. Routes are tracked automatically.

src/main.tsTypeScript

import { ScaleBunPlugin } from '@scalebun/web-vue';
createApp(App).use(ScaleBunPlugin, { clientKey: '<YOUR_CLIENT_KEY>', apiBaseUrl: '<YOUR_API_BASE_URL>' }).mount('#app');

src/routes/+layout.svelteSVELTE

<script>  import { onMount } from 'svelte';  import { setupScaleBun } from '@scalebun/web-svelte';  const scalebun = setupScaleBun({ clientKey: '<YOUR_CLIENT_KEY>', apiBaseUrl: '<YOUR_API_BASE_URL>' });  onMount(scalebun.start);</script>

src/app/app.config.tsTypeScript

import { provideScaleBun } from '@scalebun/web-angular';
export const appConfig = {  providers: [provideScaleBun({ clientKey: '<YOUR_CLIENT_KEY>', apiBaseUrl: '<YOUR_API_BASE_URL>' })],};

init() never throws — on a bad config it logs [scalebun] init failed: … and leaves the SDK inert, so it can never take your site down. A second call is a no-op. Route tracking and render-error capture differ per framework too; see Integrations.

3
Identify the user once you know who they are
TypeScript
```
ScaleBun.identify('user_123', { plan: 'pro', email: 'ada@example.com' });
```
Call this after sign-in. Before it, activity is attributed to the browser. Call ScaleBun.reset() on sign-out so a shared device does not attribute one person's activity to another.
4
Verify
Trigger an error, then check Diagnose → Errors in the dashboard. Data typically appears within about a minute.
TypeScript
```
ScaleBun.captureError(new Error('ScaleBun test error'));
```

Confirm it worked#

You should see all of the following:

A session in Monitor → All sessions.
Your test error in Diagnose → Errors.
$pageview events in Analyze → Events, captured without any instrumentation.

If none of that appears, work through Troubleshooting — the first checks there (credentials, base URL, consent, CSP) resolve most cases.

What you get without writing anything else#

From that one init() call, and with no further instrumentation: uncaught errors and unhandled rejections, fetch/XHR/WebSocket/SSE requests, Web Vitals per route, page-load and SPA route transitions, clicks, form interactions, rage and dead clicks, scroll depth and crash recovery.

Session replay, the message inbox, the in-app messaging engine, the watchdog and the profiler are opt-in — see Install & initialize.

Next steps#

Track eventsCustom events, identity, groups and revenue.Install & configureEvery init option, delivery paths, and the opt-in features.IntegrationsReact, Next.js, Vue, Svelte and Angular wiring.Privacy & consentConsent gating, GPC and Content-Security-Policy.