The framework-agnostic web SDK. Call init() once from Vue, Svelte, Angular, Astro or a plain page, wire your own trigger, and every report ships an annotated screenshot, the last 30 seconds of replay, console, network and device — signed. Crash reports and two-way replies come with it.
Three steps
1Install
npm i @traceitx/web
2Initialise once
import { init } from '@traceitx/web';
const traceitx = init({
apiKey: 'txx_live_…',
appVersion: '2.4.0',
}); 3Open it from your own button
const result = await traceitx.open();
// result.status: 'submitted' | 'queued' | 'cancelled'
// ⌘/Ctrl+Shift+B opens it too, by default
What it captures
Screenshot In-browser render of the viewport, WebP, with the reporter's annotations
Session replay rrweb rolling buffer — 15 / 30 / 60 s off by default; enable per app in the dashboard, the client can only turn it off
Console Last 100 lines, all five levels console.levels narrows it
Network Last 100 fetch / XHR requests with status and duration bodies off by default; enable per app in the dashboard, the client can only veto
Breadcrumbs Clicks, route changes (pushState / popstate) and requests before the report automatic
Focused element The DOM element in focus — tag, selector, attributes component names are the React SDK
Crash reports Uncaught errors and unhandled rejections file a report on their own on by default
Device and app Browser, OS, viewport, locale, timezone, your appName and appVersion
What you wire yourself
- The trigger. No floating bubble is installed; the hotkey ⌘/Ctrl+Shift+B is on by default and your own button calls open().
- Sensitive regions. Add data-traceitx-sensitive to an element and it is blacked out in the screenshot and the replay.
- Who the user is, with setUser(), so a report is recognisable without asking.
- appName and appVersion. Nothing is detected for you; wire them to your build.
When to pick it
Anything on the web that is not React, and React apps that would rather own the wiring than take a provider. It runs from a framework’s client-side lifecycle hook or from a script tag on a page with no build step at all; either way the envelope is identical to every other TraceItX SDK, so webhooks and triage rules do not care which one filed the report.
What is different about the web
The screenshot is rendered in the browser from the live DOM, so there is no permission prompt and nothing is captured that the page itself cannot see. Replay is the DOM re-rendered from rrweb events, not video. Route changes are recorded for every client-side router, with one caveat: hash routing needs a named screen, which the screen tracking doc covers. Two-way replies let your team answer a reporter inside the app, without email; see replies.
Questions
Is this the same as the React SDK?
Same capture core, same envelope. @traceitx/react adds a provider and a hook and resolves the focused element to a React component name. @traceitx/web is the imperative API underneath, for Vue, Svelte, Angular, Astro or no framework at all.
Do I need a bundler?
No. Apps with a bundler use the ESM entry. Pages without a build step import the browser build from a version-pinned jsDelivr URL in one script tag of type module; it inlines its dependencies and still code-splits, so the reporter UI, rrweb and the screenshot engine load only when someone opens the reporter.
Does it know my component names?
Only the React SDK does, because it reads React's tree. Here the focused element is described at the DOM level: tag name, selector, attributes.
