@spectra-trace/recorder

The recorder for Spectra, interface intelligence for the web: it tests every real visit in your users' own browsers, finds what they can't use and the errors they hit, names the release that caused them, and keeps the replay as proof.

You need a Spectra account. Your site's API key and site id are on the Sites page of the dashboard.

Install

npm install @spectra-trace/recorder

Start recording

Call record() once, in the browser, as early as your app allows.

import { record } from '@spectra-trace/recorder';

record({
  apiKey: 'sp_live_xxxxxxxx',
  siteId: 'site_xxxxxxxx',
});

record() returns the running recorder. Calling it again returns the same one rather than starting a second.

import { record, current } from '@spectra-trace/recorder';

const spectra = record({ apiKey: 'sp_live_xxxxxxxx', siteId: 'site_xxxxxxxx' });

spectra.identify('user_1234');               // who the visitor is, in your terms
spectra.track('Checkout started', { plan: 'pro' });
spectra.captureError(new Error('Payment form failed to load'));

current()?.getSessionUrl();                  // a link to this visit's replay

Server-rendered apps

Importing the package on the server is safe and records nothing. Start the recorder where code runs in the browser: a client component's effect in Next.js, a .client plugin in Nuxt, onMount in SvelteKit. The documentation has a ready example for each.

Serving from your own domain

Ad blockers refuse requests to analytics hosts they know. Spectra can be served from a path on your own domain with the tunnel option, so the recorder is never blocked:

record({ apiKey: 'sp_live_xxxxxxxx', siteId: 'site_xxxxxxxx', tunnel: '/q4hx' });

The Sites page gives you the path and the forwarding rule for your host.

Documentation

Every option, framework guide, privacy control and the dashboard are documented at https://www.spectra-trace.com/docs.

Licence

Proprietary. Free to use with a Spectra account, under the terms in LICENSE. Support: [email protected].