Integrate with Your Code

To use the SF Veritas IDE Extension or Desktop App, you need to instrument your applications with the Sailfish SDK. This enables your code to send telemetry data to the local collector, which is then displayed in the Console and Flamechart views.

Overview

The setup involves installing Sailfish packages in your application and adding a few lines of initialization code. The process differs slightly between backend and frontend applications.

Backend vs Frontend

Backend Applications

Backend instrumentation captures:

• Console logs (debug, info, warn, error)
• Exceptions and stack traces
• Function execution traces (for Flamechart)
• Print statements

Supported Languages:

• JavaScript/TypeScript (Node.js)
• Python (Django, FastAPI, Flask)

Set up Backend Application →

Frontend Applications

Frontend instrumentation captures:

• Browser console logs
• User interactions
• Network requests
• Frontend errors

Supported Frameworks:

• React
• Any JavaScript/TypeScript frontend

Set up Frontend Application →

Quick Start

Minimal Backend Setup (Node.js)

// At the entry point of your application (e.g., index.ts)

// Only load in development - zero overhead in production
if (process.env.NODE_ENV === 'development') {
  import('@sailfish-ai/sf-veritas').then(({ setupInterceptors }) => {
    setupInterceptors({
      apiKey: 'sf-vscode-extension',
      apiGraphqlEndpoint: 'http://localhost:6776/graphql/',
      serviceIdentifier: 'my-backend-service',
      serviceVersion: '1.0.0',
    });
  });
}

// Your application code continues below...

Minimal Backend Setup (Python)

# At the entry point of your application (e.g., main.py)
import os

# Only load in development - zero overhead in production
if os.environ.get('DEBUG') == 'true':
    from sf_veritas import setup_interceptors
    setup_interceptors(
        api_key='sf-vscode-extension',
        graphql_endpoint='http://localhost:6776/graphql/',
        service_identifier='my-python-service',
        service_version='1.0.0',
    )

# Your application code continues below...

Minimal Frontend Setup

// At the entry point of your frontend (e.g., index.tsx)

// Only load in development - zero overhead in production
if (process.env.NODE_ENV === 'development') {
  import('@sailfish-ai/recorder').then(({ initRecorder }) => {
    initRecorder({
      apiEndpoint: 'http://localhost:6776/graphql/',
      captureConsole: true,
      captureErrors: true,
      captureNetwork: true,
    });
  });
}

Vite Projects

For Vite-based projects, use import.meta.env.DEV instead of process.env.NODE_ENV === 'development'.

Configuration File

For more control, create a .sailfish configuration file in your project root:

{
  "capture": {
    "console": true,
    "exceptions": true,
    "functions": true
  },
  "sampling": {
    "rate": 1.0
  }
}

Architecture

How It Works

Environment variables control when SF Veritas is loaded:

Node.js:

Command	Environment	SF Veritas
npm run dev	development	✅ Active
npm run build	production	❌ Not bundled
npm start (production)	production	❌ Not loaded

Python:

Command	Environment	SF Veritas
DEBUG=true python manage.py runserver	development	✅ Active
DEBUG=true uvicorn main:app --reload	development	✅ Active
Production deploy	production	❌ Not loaded

Why conditional imports? Using environment checks with imports ensures:

• Zero overhead in production builds
• No network requests to localhost in production
• The package won't be loaded or bundled in production

Next Steps

1. Set up your backend application:
   • JavaScript/TypeScript (Node.js)
   • Python (Django, FastAPI, Flask)
2. Set up your frontend application (optional)
3. Learn how to use the Console and Flamechart