SDK Reference

Configuration Reference

This page documents all configuration options across the Databuddy SDK platforms: React, Vue, vanilla JavaScript, Node.js, and AI integrations.

React / Next.js

tsx
import { Databuddy } from "@databuddy/sdk/react";

<Databuddy
// Required
clientId="your-client-id"

// API endpoints
apiUrl="https://basket.databuddy.cc"
scriptUrl="https://cdn.databuddy.cc/databuddy.js"

// Core tracking
trackPerformance        // default: true
trackWebVitals          // default: false
trackErrors             // default: false
trackOutgoingLinks      // default: false
trackScrollDepth        // default: false
trackInteractions       // default: false
trackAttributes         // default: false
trackHashChanges        // default: false

// Batching
enableBatching          // default: false
batchSize={10}          // 1-50
batchTimeout={2000}     // ms

// Retries
enableRetries           // default: true
maxRetries={3}
initialRetryDelay={500} // ms

// Sampling
samplingRate={1.0}      // 0.0-1.0

// Privacy
skipPatterns={["/admin/**", "/private/*"]}
maskPatterns={["/users/*", "/orders/**"]}

// Control
disabled={false}
debug={false}
waitForProfile={false}
/>

React Props Reference

PropTypeDefaultDescription
clientIdstringAuto-detectClient ID (auto-detects from NEXT_PUBLIC_DATABUDDY_CLIENT_ID)
apiUrlstringhttps://basket.databuddy.ccAPI endpoint
scriptUrlstringhttps://cdn.databuddy.cc/databuddy.jsScript URL
disabledbooleanfalseDisable all tracking
debugbooleanfalseEnable debug logging

Tracking Features

PropTypeDefaultDescription
trackPerformancebooleantruePage load times and navigation
trackWebVitalsbooleanfalseCore Web Vitals (LCP, FID, CLS, TTFB)
trackErrorsbooleanfalseJavaScript errors
trackOutgoingLinksbooleanfalseExternal link clicks
trackScrollDepthbooleanfalseScroll milestones (25%, 50%, 75%, 100%)
trackInteractionsbooleanfalseButton clicks and form submissions
trackAttributesbooleanfalseElements with data-track attributes
trackHashChangesbooleanfalseURL hash changes

Batching & Performance

PropTypeDefaultDescription
enableBatchingbooleanfalseGroup events into batches
batchSizenumber10Events per batch (1-50)
batchTimeoutnumber2000Batch timeout in ms
enableRetriesbooleantrueRetry failed requests
maxRetriesnumber3Maximum retry attempts
initialRetryDelaynumber500Initial retry delay in ms
samplingRatenumber1.0Event sampling rate (0.0-1.0)

Privacy

PropTypeDescription
skipPatternsstring[]Paths to skip tracking entirely
maskPatternsstring[]Paths to mask in analytics

Vue

html
<script setup>
import { Databuddy } from "@databuddy/sdk/vue";
</script>

<template>
<Databuddy
  :client-id="clientId"
  :track-web-vitals="true"
  :track-errors="true"
  :enable-batching="true"
  :batch-size="20"
  :disabled="isDevelopment"
/>
</template>

Vue uses the same props as React but with kebab-case naming:

  • clientId:client-id
  • trackWebVitals:track-web-vitals
  • enableBatching:enable-batching

Vanilla JavaScript

html
<script
src="https://cdn.databuddy.cc/databuddy.js"
data-client-id="your-client-id"
data-track-web-vitals
data-track-errors
data-track-outgoing-links
data-track-scroll-depth
data-enable-batching
data-batch-size="20"
data-batch-timeout="2000"
data-sampling-rate="1.0"
data-skip-patterns='["/admin/**"]'
data-mask-patterns='["/users/*"]'
async
></script>

Data Attributes Reference

AttributeTypeDefaultDescription
data-client-idstringRequiredYour client ID
data-track-performanceflagtrueTrack page performance
data-track-web-vitalsflagfalseTrack Core Web Vitals
data-track-errorsflagfalseTrack JavaScript errors
data-track-outgoing-linksflagfalseTrack external links
data-track-scroll-depthflagfalseTrack scroll depth
data-track-interactionsflagfalseTrack interactions
data-track-attributesflagfalseTrack data-track elements
data-track-hash-changesflagfalseTrack hash changes
data-enable-batchingflagfalseEnable event batching
data-batch-sizenumber10Batch size
data-batch-timeoutnumber2000Batch timeout (ms)
data-sampling-ratenumber1.0Sampling rate
data-skip-patternsJSON[]Paths to skip
data-mask-patternsJSON[]Paths to mask
data-disabledflagfalseDisable tracking

Node.js

tsx
import { Databuddy } from "@databuddy/sdk/node";

const client = new Databuddy({
// Required
apiKey: process.env.DATABUDDY_API_KEY!,

// Optional: Scope events to a specific website
websiteId: process.env.DATABUDDY_WEBSITE_ID,

// Optional: Logical grouping (e.g., 'billing', 'auth', 'api')
namespace: "api",

// Optional: Source identifier (e.g., 'backend', 'webhook', 'cli')
source: "backend",

// API
apiUrl: "https://basket.databuddy.cc",

// Batching
enableBatching: true,       // default: true
batchSize: 10,              // max: 100
batchTimeout: 2000,         // ms
maxQueueSize: 1000,

// Deduplication
enableDeduplication: true,  // default: true
maxDeduplicationCacheSize: 10_000,

// Middleware
middleware: [
  (event) => {
    event.properties = { ...event.properties, server: true };
    return event;
  }
],

// Logging
debug: false,
logger: customLogger
});

Node.js Options Reference

OptionTypeDefaultDescription
apiKeystringRequiredYour API key for authentication
websiteIdstring-Optional default website ID to scope events
namespacestring-Optional default namespace for logical grouping
sourcestring-Optional default source identifier for events
apiUrlstringhttps://basket.databuddy.ccAPI endpoint
enableBatchingbooleantrueEnable event batching
batchSizenumber10Batch size (max 100)
batchTimeoutnumber2000Batch timeout in ms
maxQueueSizenumber1000Maximum queue size
enableDeduplicationbooleantrueDeduplicate events by ID
maxDeduplicationCacheSizenumber10000Dedup cache size
middlewareMiddleware[][]Event transform functions
debugbooleanfalseEnable debug logging
loggerLogger-Custom logger instance

AI / LLM Analytics

tsx
import { databuddyLLM } from "@databuddy/sdk/ai";

const { track } = databuddyLLM({
// Authentication
apiKey: process.env.DATABUDDY_API_KEY,
apiUrl: "https://basket.databuddy.cc/llm",

// Features
computeCosts: true,      // default: true
privacyMode: false,      // default: false
maxContentSize: 1_048_576,  // 1MB

// Custom transport
transport: async (call) => {
  // Custom logging logic
},

// Callbacks
onSuccess: (call) => console.log("Success:", call.traceId),
onError: (call) => console.error("Error:", call.error)
});

AI Options Reference

OptionTypeDefaultDescription
apiKeystringDATABUDDY_API_KEY envAPI key
apiUrlstringhttps://basket.databuddy.cc/llmAPI endpoint
transportTransportHTTP transportCustom transport function
computeCostsbooleantrueCompute token costs
privacyModebooleanfalseDon't capture content
maxContentSizenumber1048576Max content size (bytes)
onSuccessfunction-Success callback
onErrorfunction-Error callback

Feature Flags (Client)

tsx
import { FlagsProvider } from "@databuddy/sdk/react";

<FlagsProvider
clientId="your-client-id"
apiUrl="https://api.databuddy.cc"
user={{
  userId: "user-123",
  email: "user@example.com",
  organizationId: "org-456",
  teamId: "team-789",
  properties: {
    plan: "premium",
    role: "admin"
  }
}}
isPending={isLoadingSession}
disabled={false}
debug={false}
skipStorage={false}
autoFetch={true}
environment="production"
cacheTtl={60_000}
staleTime={30_000}
>
<App />
</FlagsProvider>

Feature Flags Options Reference

OptionTypeDefaultDescription
clientIdstringRequiredYour client ID
apiUrlstringhttps://api.databuddy.ccAPI endpoint
userUserContext-User context for targeting
isPendingbooleanfalseDefer evaluation
disabledbooleanfalseDisable flag evaluation
debugbooleanfalseEnable debug logging
skipStoragebooleanfalseSkip localStorage caching
autoFetchbooleantrueAuto-fetch on mount
environmentstring-Environment name
cacheTtlnumber60000Cache TTL (ms)
staleTimenumber30000Revalidate after (ms)

User Context

OptionTypeDescription
userIdstringUnique user identifier
emailstringUser email
organizationIdstringOrganization ID for group rollouts
teamIdstringTeam ID for group rollouts
propertiesobjectCustom targeting properties

Feature Flags (Server)

tsx
import { createServerFlagsManager } from "@databuddy/sdk/node";

const flags = createServerFlagsManager({
clientId: process.env.DATABUDDY_CLIENT_ID!,
apiUrl: "https://api.databuddy.cc",
user: {
  userId: "user-123"
},
environment: "production",
cacheTtl: 60_000,
staleTime: 30_000,
autoFetch: false,
debug: false,
disabled: false
});

Server flags use the same options as client flags, but skipStorage is always true.

Environment Variables

Next.js

.env.localbash
NEXT_PUBLIC_DATABUDDY_CLIENT_ID=your-client-id
DATABUDDY_CLIENT_ID=your-client-id
DATABUDDY_API_KEY=your-api-key

Vue / Vite

.envbash
VITE_DATABUDDY_CLIENT_ID=your-client-id

Node.js / Server

.envbash
DATABUDDY_API_KEY=your-api-key
DATABUDDY_WEBSITE_ID=your-website-id  # Optional
DATABUDDY_API_URL=https://basket.databuddy.cc  # Optional

How is this guide?