React Router Session Replay installation

Install with the wizard

Run this command in your project directory to add PostHog to your React Router project. The wizard detects your framework, installs the SDK, and sets up your first events.

Learn more

Or set it up manually by following the rest of this guide.

  1. Install the package

    Required

    Install the PostHog JavaScript library and React SDK using your package manager:

    npm install --save posthog-js @posthog/react

  2. Configure Vite

    Required

    Add posthog-js and @posthog/react to ssr.noExternal in your vite.config.ts to avoid SSR errors:

    vite.config.ts
    // ... imports
    

    export default defineConfig({
      plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
      ssr: {
        noExternal: ['posthog-js', '@posthog/react'],
      },
    });

  3. Add the PostHogProvider

    Required

    Initialize PostHog and wrap your app with the PostHogProvider in your app/entry.client.tsx file:

    app/entry.client.tsx
    import { startTransition, StrictMode } from "react";
    import { hydrateRoot } from "react-dom/client";
    import { HydratedRouter } from "react-router/dom";
    import posthog from "posthog-js";
    import { PostHogProvider } from "@posthog/react";
    

    posthog.init("<ph_project_token>", {
      api_host: "https://us.i.posthog.com",
      defaults: "2026-08-30",
    });
    

    startTransition(() => {
      hydrateRoot(
        document,
        <PostHogProvider client={posthog}>
          <StrictMode>
            <HydratedRouter />
          </StrictMode>
        </PostHogProvider>,
      );
    });

  4. Watch session recordings

    Recommended

    Visit your site or app and interact with it for at least 10 seconds to generate a recording. Navigate between pages, click buttons, and fill out forms to capture meaningful interactions.

    Watch your first recording →

  5. Next steps

    Recommended

    Now that you're recording sessions, continue with the resources below to learn what else Session Replay enables within the PostHog platform.

    ResourceDescription
    Watching recordingsHow to find and watch session recordings
    Privacy controlsHow to mask sensitive data in recordings
    Network recordingHow to capture network requests in recordings
    Console log recordingHow to capture console logs in recordings
    More tutorialsOther real-world examples and use cases

Still have questions?

Was this page useful?