Framework adapters

Every adapter is published on npm alongside the core SDK (`@browsonic/react` 1.5.0, `@browsonic/vue` 1.6.0, `@browsonic/svelte` 1.3.0, `@browsonic/angular` 2.17.0, `@browsonic/nextjs` 1.5.0, `@browsonic/remix` 1.3.0, `@browsonic/astro` 1.3.0, `@browsonic/cli` 1.3.0, `@browsonic/build-tools` 1.4.0). They share a single instance: call getBrowsonic() once, init()it, and hand that same object to the adapter. A hand-constructednew Browsonic() is invisible to the hooks and boundaries below — they look the singleton up on window.Browsonic — and will silently report nothing.

npm install @browsonic/sdk @browsonic/react

import { getBrowsonic } from '@browsonic/sdk';
import { BrowsonicErrorBoundary } from '@browsonic/react';

// Use getBrowsonic(), not `new Browsonic()`: it publishes the singleton on
// `window.Browsonic`, which is where this adapter's hooks — and a
// <BrowsonicErrorBoundary> with no `sdk` prop — look it up. A hand-constructed
// instance is invisible to them and they silently report nothing.
const sdk = getBrowsonic();
sdk.init({
  // Origin only — the SDK appends `/v1/events` itself.
  apiEndpoint: 'https://api.browsonic.com',
  appKey: 'your-app-key',
  // Publishable key, safe in the browser. NOT optional in practice: page-view
  // tracking is on by default and `init()` returns false with
  // "apiKey is required for page view tracking" unless you also set
  // `trackPageViews: false`.
  apiKey: 'pk_live_...',
});

function App() {
  return (
    <BrowsonicErrorBoundary
      sdk={sdk}
      fallback={(error, reset) => (
        <div role="alert">
          <p>Something went wrong: {error.message}</p>
// …

npm install @browsonic/sdk @browsonic/vue

import { createApp } from 'vue';
import { getBrowsonic } from '@browsonic/sdk';
import { browsonicPlugin, BrowsonicErrorBoundary } from '@browsonic/vue';
import App from './App.vue';

const sdk = getBrowsonic();
sdk.init({
  apiEndpoint: 'https://api.browsonic.com', // origin only — the SDK appends /v1/events,
  appKey: 'web',
  apiKey: 'pk_live_...', // publishable key — safe to ship in the browser
});

const app = createApp(App);
app.use(browsonicPlugin, { sdk });
app.component('BrowsonicErrorBoundary', BrowsonicErrorBoundary);
app.mount('#app');

npm install @browsonic/sdk @browsonic/svelte

// src/hooks.client.ts
import { handleErrorWithBrowsonic } from '@browsonic/svelte';
import { getBrowsonic } from '@browsonic/sdk';

const sdk = getBrowsonic();
sdk.init({
  apiEndpoint: 'https://api.browsonic.com', // origin only — the SDK appends /v1/events
  appKey: 'web',
  apiKey: 'pk_live_...', // publishable key — safe to ship in the browser
});

export const handleError = handleErrorWithBrowsonic();

npm install @browsonic/sdk @browsonic/react @browsonic/nextjs

// app/error.tsx
'use client';
import { BrowsonicErrorPage } from '@browsonic/nextjs';
export default BrowsonicErrorPage;

npm install @browsonic/sdk @browsonic/astro

// astro.config.mjs
import { defineConfig } from 'astro/config';
import { browsonicIntegration } from '@browsonic/astro';

export default defineConfig({
  integrations: [
    browsonicIntegration({
      apiEndpoint: 'https://api.browsonic.com', // origin only — the SDK appends /v1/events,
      appKey: 'your-app-key', // required — the SDK sends it as X-APP-KEY
      apiKey: 'your-publishable-ingest-key', // sent as X-API-KEY; POST /v1/events requires an ingest-role key
      environment: 'production',
      includeIntent: true, // emit `phase: 'intent'` breadcrumb on `astro:before-preparation`
    }),
  ],
});

npm install @browsonic/sdk @browsonic/angular

// src/main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { ErrorHandler } from '@angular/core';
import { getBrowsonic } from '@browsonic/sdk';
import { provideBrowsonic, BrowsonicErrorHandler } from '@browsonic/angular';
import { AppComponent } from './app/app.component';

const sdk = getBrowsonic();
sdk.init({
  apiEndpoint: 'https://api.browsonic.com', // origin only — the SDK appends /v1/events,
  appKey: 'web',
  apiKey: 'pk_live_...', // publishable key — safe to ship in the browser
});

bootstrapApplication(AppComponent, {
  providers: [
    ...provideBrowsonic({ sdk }),
    { provide: ErrorHandler, useExisting: BrowsonicErrorHandler },
  ],
});

npm install @browsonic/sdk @browsonic/react @browsonic/remix

// app/routes/some-route.tsx
import { useRouteError } from '@remix-run/react';
import { BrowsonicRouteErrorBoundary } from '@browsonic/remix';

export function ErrorBoundary() {
  const error = useRouteError();
  // Pass the error through; the boundary captures + renders fallback
  return <BrowsonicRouteErrorBoundary error={error} />;
}

export default function Page() {
  return <div>...</div>;
}

Beyond the quick start

The SDK documentation covers everything that is the same in every framework — configuration, event types, the telemetry timeline, session replay, web vitals, source maps and the privacy controls. Each package also ships its own full API reference, which npm renders on the package page.