Frontend Application Setup

Instrument your frontend application to capture browser logs, user interactions, and errors in the Sailfish dashboard.

Auto-Installation

If you connected GitHub and received Auto-Installation PRs, the API key, service identifier, and graphql endpoint are already configured for you. Merge the PR and you're done.

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. 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. Have a Sailfish Enterprise account and API key (get your key)
2. Your frontend should be deployed to an environment that can reach https://api-service.sailfish.ai

Architecture

Quick Verification

After setup, verify instrumentation is working:

1. Deploy your frontend with the recorder configured
2. Open your app in the browser and trigger some activity
3. Open the Sailfish dashboard
4. You should see telemetry appearing in your project

---

Local Development

Looking to set up Sailfish for local development only? See the Desktop App frontend setup guide.