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

Framework	Package	Status
React	@sailfish-ai/recorder	Full Support
JavaScript (vanilla)	@sailfish-ai/recorder	Full Support
Vue, Angular, etc.	@sailfish-ai/recorder	Should work

Choose Your Framework

• JavaScript/TypeScript - React and other JS frameworks

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.