Frontend Application Setup

Instrument your frontend application to capture browser logs, user interactions, and errors in the SF Veritas Console.

Supported Frameworks

Sailfish has two distinct frontend capabilities, and their framework support is not the same. Read the column that matches what you need:

• Recording (console logs, errors, interactions, network) is framework-agnostic — it instruments the browser, not your component tree.
• Click-to-Code comes in two flavors with different framework support:
  • DOM elements (clicking a button/div in a replay → its source line) relies on build-time JSX stamping and is React/JSX (and TSX) only in v1.
  • Canvas (clicking a 2D / WebGL / WebGPU draw, or a three.js / Fabric / Konva / Pixi / Chart.js object) is framework-agnostic — it stamps canvas draw calls and new framework objects, not JSX, so it works in vanilla JS and any framework. It is on by default once canvas recording (recordCanvas) and the build plugin are both present — no extra flag.

Framework	Recording (@sailfish-ai/recorder)	Click-to-Code: DOM elements	Click-to-Code: Canvas
React / React + TypeScript (JSX/TSX)	Full Support	Supported	Supported
JavaScript / TypeScript (vanilla)	Full Support	N/A (no JSX to stamp)	Supported
Vue, Svelte, Angular, Astro, Solid, Qwik, Web Components	Should work	Not supported (v1)	Supported
React Native	Not applicable (no DOM)	Not applicable	Not applicable

DOM-element Click-to-Code is React/JSX only (v1)

DOM-element click-to-code stamping runs at build time over JSX/TSX. Non-React component models (Vue, Svelte, Angular templates, .astro, Solid, Qwik, Web Components) are not stamped, so clicking a DOM element in those apps will not resolve to source in the Console. Canvas click-to-code is unaffected — it works across all frameworks (and vanilla JS) once canvas recording and the build plugin are on. Recording still works for those frameworks. See the Build Plugin "Supported frameworks" section for the full in/out scope and the Known-unsupported list.

Choose Your Framework

• JavaScript/TypeScript - React and other JS frameworks
• Build Plugin (Source Maps + Click-to-Code) - de-minify exceptions and map clicks in replays back to source, via @sailfish-ai/sf-map-utils

What Gets Captured

Frontend instrumentation captures:

• Browser Console: All console.log, console.info, console.warn, console.error calls
• JavaScript Errors: Uncaught exceptions and promise rejections
• User Interactions: Clicks, form submissions, navigation
• Network Requests: Fetch and XHR requests with timing

Requirements

Before instrumenting your frontend:

1. Ensure the SF Veritas Desktop App is installed and running
2. Verify the local server is started
3. Your frontend should be able to reach localhost:6776 (or your configured port)

Architecture

Quick Verification

After setup, verify instrumentation is working:

1. Start your frontend development server
2. Open your app in the browser
3. Open the SF Veritas Console in the Desktop App
4. Trigger some console.log statements or errors
5. You should see the logs appear in the Console panel