SKILL.md

name: databuddy-react description: Use the Databuddy React SDK for Next.js and React applications. Use when implementing analytics tracking in React components, setting up the Databuddy component in layouts, or using React hooks for event tracking. metadata: author: databuddy version: "2.3"

Databuddy React SDK

The React SDK (@databuddy/sdk/react) provides a drop-in component and hooks for React/Next.js applications.

External Documentation

For the most up-to-date documentation, fetch: https://databuddy.cc/llms.txt

When to Use This Skill

Use this skill when:

Setting up analytics in React or Next.js applications
Need React hooks for tracking events
Implementing the Databuddy component in layouts
Working with SSR-safe tracking in Next.js

Installation

bun add @databuddy/sdk

Databuddy Component

The <Databuddy /> component injects the tracking script. Place it in your root layout.

Next.js App Router

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

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Databuddy
          clientId={process.env.NEXT_PUBLIC_DATABUDDY_CLIENT_ID}
          trackWebVitals
          trackErrors
          trackPerformance
        />
      </body>
    </html>
  );
}

Next.js Pages Router

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

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Databuddy
        clientId={process.env.NEXT_PUBLIC_DATABUDDY_CLIENT_ID}
        trackWebVitals
        trackErrors
      />
    </>
  );
}

Props

All props from DatabuddyConfig are supported. See Core SDK Reference for full options.

Key props:

Prop	Type	Default	Description
`clientId`	`string`	Auto-detect	Your project client ID
`disabled`	`boolean`	`false`	Disable tracking
`trackWebVitals`	`boolean`	`false`	Track Web Vitals
`trackErrors`	`boolean`	`false`	Track JS errors
`trackPerformance`	`boolean`	`true`	Track performance
`trackScrollDepth`	`boolean`	`false`	Track scroll depth
`trackOutgoingLinks`	`boolean`	`false`	Track outgoing clicks
`debug`	`boolean`	`false`	Enable debug logging

Auto-detection

The component auto-detects clientId from NEXT_PUBLIC_DATABUDDY_CLIENT_ID environment variable.

SSR Safety

The component is SSR-safe. It only injects the script on the client side and renders nothing to the DOM.

Exported Functions

Re-exported from core for convenience:

import {
  track,
  trackError,
  flush,
  clear,
  getTracker,
  isTrackerAvailable,
  getAnonymousId,
  getSessionId,
  getTrackingIds,
  getTrackingParams,
} from "@databuddy/sdk/react";

Examples

Disable in Development

<Databuddy
  disabled={process.env.NODE_ENV === "development"}
  clientId="..."
/>

With All Tracking Features

<Databuddy
  clientId="..."
  trackWebVitals
  trackErrors
  trackPerformance
  trackScrollDepth
  trackOutgoingLinks
  trackInteractions
  trackHashChanges
/>

With Filtering

<Databuddy
  clientId="..."
  skipPatterns={["/admin/**", "/_next/**"]}
  maskPatterns={["/users/*", "/orders/*"]}
  filter={(event) => !event.path?.includes("/internal")}
/>

With Batching Configuration

<Databuddy
  clientId="..."
  enableBatching
  batchSize={20}
  batchTimeout={5000}
/>

With Sampling

<Databuddy
  clientId="..."
  samplingRate={0.5} // Track 50% of sessions
/>

Custom Event Tracking

Use the track function or window.databuddy.track:

import { track } from "@databuddy/sdk/react";

function PurchaseButton({ product }) {
  const handlePurchase = async () => {
    await completePurchase(product);
    
    track("purchase", {
      product_id: product.id,
      product_name: product.name,
      amount: product.price,
      currency: "USD",
    });
  };

  return <button onClick={handlePurchase}>Buy Now</button>;
}

Error Tracking

import { trackError } from "@databuddy/sdk/react";

function ErrorBoundary({ children }) {
  return (
    <ReactErrorBoundary
      onError={(error, errorInfo) => {
        trackError({
          message: error.message,
          stack: error.stack,
          componentStack: errorInfo.componentStack,
        });
      }}
    >
      {children}
    </ReactErrorBoundary>
  );
}

スコア

総合スコア

45/100

リポジトリの品質指標に基づく評価

✓SKILL.md

SKILL.mdファイルが含まれている

+20

○LICENSE

ライセンスが設定されている

0/10

○説明文

100文字以上の説明がある

0/10

○人気

GitHub Stars 100以上

0/15

○最近の活動

3ヶ月以内に更新がある

0/10

○フォーク

10回以上フォークされている

0/5

✓Issue管理

オープンIssueが50未満

+5

○言語

プログラミング言語が設定されている

0/5

○タグ

1つ以上のタグが設定されている

0/5

レビュー

💬

レビュー機能は近日公開予定です