Integration React Tanstack Router File Based

PostHogOfficialCreated by PostHog

Skill
Tool integration
Data and AI
MIT
No issues found

Download ZIP

From the author

PostHog integration for React applications using TanStack Router with file-based routing

— the description by PostHog

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a systematic approach to implementing PostHog analytics, session recording, and error tracking in React projects built with TanStack Router. It emphasizes a clean, non-intrusive integration pattern that leverages the PostHogProvider for global access and follows specific React best practices to ensure performance and maintainability. The guide includes a multi-step workflow for setup, configuration, and event tracking, supported by a reference implementation that demonstrates how to handle user identification, event capturing, and exception tracking within a file-based routing architecture.

What it does

Provides a step-by-step workflow for integrating PostHog into React applications.
Demonstrates how to wrap applications with PostHogProvider for global analytics access.
Outlines best practices for event tracking and user identification in client-side code.
Includes patterns for capturing exceptions and errors to improve observability.
Offers guidance on using environment variables for secure configuration.
Provides a reference project structure for file-based routing implementations.

When to use it

When you need to add product analytics to a React application using TanStack Router.
When you want to implement session replay and error tracking in a file-based routing project.
When you need a standardized approach to user identification and event capturing.
When you are setting up a new project and want to follow established PostHog integration patterns.

Advantages

Promotes clean code by avoiding unnecessary useEffect hooks for event tracking.
Ensures consistent implementation through a structured, multi-step workflow.
Leverages native React hooks for efficient feature flag and analytics management.
Provides clear separation between configuration and business logic.

Usage examples

“How do I initialize PostHog in my TanStack Router file-based project?”: The skill directs you to wrap your root route component with the PostHogProvider, passing your project token and host configuration via environment variables.
“Where should I place event tracking code for user actions?”: The skill advises placing capture calls directly within event handlers rather than inside useEffect hooks to ensure accurate tracking of user-initiated actions.

Install

Download the skill as a ZIP:
https://autogineer.com/agent-skills/posthog/integration-react-tanstack-router-file-based/download

Unzip it into the cross-client skills folder of your project:

mkdir -p .agents/skills && unzip integration-react-tanstack-router-file-based.zip -d .agents/skills

Documentation by PostHog

PostHog integration for React with TanStack Router (file-based)

This skill helps you add PostHog analytics to React with TanStack Router (file-based) applications.

Workflow

Follow these steps in order to complete the integration:

basic-integration-1.0-begin.md - PostHog Setup - Begin ← Start here
basic-integration-1.1-edit.md - PostHog Setup - Edit
basic-integration-1.2-revise.md - PostHog Setup - Revise
basic-integration-1.3-conclude.md - PostHog Setup - Conclusion

Reference files

references/EXAMPLE.md - React with TanStack Router (file-based) example project code
references/tanstack-start.md - Tanstack start - docs
references/identify-users.md - Identify users - docs
references/basic-integration-1.0-begin.md - PostHog setup - begin
references/basic-integration-1.1-edit.md - PostHog setup - edit
references/basic-integration-1.2-revise.md - PostHog setup - revise
references/basic-integration-1.3-conclude.md - PostHog setup - conclusion

The example project shows the target implementation pattern. Consult the documentation for API details.

Key principles

Environment variables: Always use environment variables for PostHog keys. Never hardcode them.
Minimal changes: Add PostHog code alongside existing integrations. Don't replace or restructure existing code.
Match the example: Your implementation should follow the example project's patterns as closely as possible.

Framework guidelines

For feature flags, use useFeatureFlagEnabled() or useFeatureFlagPayload() hooks - they handle loading states and external sync automatically
Add analytics capture in event handlers where user actions occur, NOT in useEffect reacting to state changes
Do NOT use useEffect for data transformation - calculate derived values during render instead
Do NOT use useEffect to respond to user events - put that logic in the event handler itself
Do NOT use useEffect to chain state updates - calculate all related updates together in the event handler
Do NOT use useEffect to notify parent components - call the parent callback alongside setState in the event handler
To reset component state when a prop changes, pass the prop as the component's key instead of using useEffect
useEffect is ONLY for synchronizing with external systems (non-React widgets, browser APIs, network subscriptions)
Use TanStack Router's built-in navigation events for pageview tracking instead of useEffect
Use PostHogProvider in the root component defined in either the file-based convention (__root.tsx) or code-based convention (wherever createRootRoute() is called) so all child routes have access to the PostHog client

Identifying users

Identify users during login and signup events. Refer to the example code and documentation for the correct identify pattern for this framework. If both frontend and backend code exist, pass the client-side session and distinct ID using X-POSTHOG-DISTINCT-ID and X-POSTHOG-SESSION-ID headers to maintain correlation.

Error tracking

Add PostHog error tracking to relevant files, particularly around critical user flows and API boundaries.

Files

ATTRIBUTION.mdAdded by AutoGineer1.0 KiB
LICENSELicence file added by AutoGineer1.0 KiB
SKILL.md3.3 KiB
references/EXAMPLE.md18.0 KiB
references/basic-integration-1.0-begin.md2.1 KiB
references/basic-integration-1.1-edit.md2.5 KiB
references/basic-integration-1.2-revise.md937 B
references/basic-integration-1.3-conclude.md1.6 KiB
references/identify-users.md8.1 KiB
references/tanstack-start.md5.1 KiB

references/tanstack-start.md

TanStack Start - Docs

This tutorial shows how to integrate PostHog with a TanStack Start app for both client-side and server-side analytics.

Installation

Install the required packages:

Terminal

PostHog AI

npm install @posthog/react posthog-node

@posthog/react - React package for our JS Web SDK for client-side usage
posthog-node - PostHog Node.js SDK for server-side event capture

Identifying users

Identifying users is required. Call posthog.identify('your-user-id') after login to link events to a known user. This is what connects frontend event captures, session replays, LLM traces, and error tracking to the same person — and lets backend events link back too.
See our guide on identifying users for how to set this up.

Initialize PostHog on the client

Wrap your app with PostHogProvider in your root route with your project token, host, and other options.

src/routes/__root.tsx

PostHog AI

// src/routes/__root.tsx
import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
import { PostHogProvider } from '@posthog/react'
export const Route = createRootRoute({
  head: () => ({
    meta: [
      { charSet: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    ],
  }),
  shellComponent: RootDocument,
})
function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <HeadContent />
      </head>
      <body>
        <PostHogProvider
          apiKey="<ph_project_token>"
          options={{
            api_host: 'https://us.i.posthog.com',
            defaults: '2026-01-30',
            capture_exceptions: true
          }}
        >
          {children}
        </PostHogProvider>
        <Scripts />
      </body>
    </html>
  )
}

Once the provider is in place, PostHog automatically captures pageviews, sessions, and web vitals.

Capture events on the client

Use the usePostHog hook from @posthog/react in any component to capture custom events:

src/routes/checkout.tsx

PostHog AI

import { usePostHog } from '@posthog/react'
function CheckoutButton({ orderId, total }: { orderId: string; total: number }) {
  const posthog = usePostHog()
  const handleClick = () => {
    posthog.capture('checkout_started', {
      order_id: orderId,
      total: total,
    })
  }
  return <button onClick={handleClick}>Checkout</button>
}

Identify users

Call posthog.identify() when a user logs in to link their events to a user ID:

TSX

PostHog AI

import { usePostHog } from '@posthog/react'
function LoginForm() {
  const posthog = usePostHog()
  const handleLogin = async (userId: string, email: string) => {
    // ... your login logic
    posthog.identify(userId, {
      email: email,
    })
    posthog.capture('user_logged_in')
  }
}

Call posthog.reset() on logout to clear the identified user.

Initialize PostHog on the server

Create a server-side PostHog client using posthog-node. Use a singleton pattern so you reuse the same client across requests:

src/utils/posthog-server.ts

PostHog AI

// src/utils/posthog-server.ts
import { PostHog } from 'posthog-node'
let posthogClient: PostHog | null = null
export function getPostHogClient() {
  if (!posthogClient) {
    posthogClient = new PostHog(
      '<ph_project_token>',
      {
        host: 'https://us.i.posthog.com',
        flushAt: 1,
        flushInterval: 0,
      },
    )
  }
  return posthogClient
}

Capture events on the server

Use the server client in TanStack Start API routes to capture events server-side. Server-side capture is useful for tracking events that shouldn't be spoofable from the client, like purchases or authentication:

src/routes/api/checkout.ts

PostHog AI

// src/routes/api/checkout.ts
import { createFileRoute } from '@tanstack/react-router'
import { json } from '@tanstack/react-start'
import { getPostHogClient } from '../../utils/posthog-server'
export const Route = createFileRoute('/api/checkout')({
  server: {
    handlers: {
      POST: async ({ request }) => {
        const body = await request.json()
        const posthog = getPostHogClient()
        posthog.capture({
          distinctId: body.userId,
          event: 'item_purchased',
          properties: {
            item_id: body.itemId,
            price: body.price,
            source: 'api',
          },
        })
        return json({ success: true })
      },
    },
  },
})

The server-side capture call requires a distinctId (the user identifier), an event name, and optional properties.

Next steps

Installing the JS Web SDK and Node SDK means all of their functionality is available in your TanStack Start project. To learn more about this, have a look at our JS Web SDK docs and Node SDK docs.

Community questions

Ask a question

Was this page useful?

HelpfulCould be better

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by

PostHog

Publisher

PostHog (Official)

Source

PostHog/skills · skills/posthog/integration/skills/react-tanstack-router-file-based · commit a5d30e7

Licence

MIT License (redistribution allowed)

LICENSE (added by AutoGineer from LICENSE)
ATTRIBUTION.md (written by AutoGineer)

Synced

2026-11-09

Also distributed in

PostHog/skills

AutoGineer is not affiliated with or endorsed by PostHog or PostHog.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download integration-react-tanstack-router-file-based.zip

From the author

AutoGineer summary

What it does

When to use it

Advantages

Usage examples

Install

Documentation by PostHog

PostHog integration for React with TanStack Router (file-based)

Workflow

Reference files

Key principles

Framework guidelines

Identifying users

Error tracking

Files

references/tanstack-start.md

TanStack Start - Docs

Installation

Identifying users

Initialize PostHog on the client

Capture events on the client

Identify users

Initialize PostHog on the server

Capture events on the server

Next steps

Community questions

Was this page useful?

Requirements and compatibility

Security

Attribution and licence

Related skills

Claude API

Transformers

Open Notebook

Vision Sft

LLM Evaluation

Lora Qlora Recipes

Download ZIP