# React Router Session Replay installation - Docs

1.  1

    ## Install the package

    Required

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

    PostHog AI

    ### npm

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

    ### yarn

    ```bash
    yarn add posthog-js @posthog/react
    ```

    ### pnpm

    ```bash
    pnpm add posthog-js @posthog/react
    ```

2.  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

    PostHog AI

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

3.  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

    PostHog AI

    ```typescript
    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-01-30",
    });
    startTransition(() => {
      hydrateRoot(
        document,
        <PostHogProvider client={posthog}>
          <StrictMode>
            <HydratedRouter />
          </StrictMode>
        </PostHogProvider>,
      );
    });
    ```

4.  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 →](/replay/home.md)

5.  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.

    | Resource | Description |
    | --- | --- |
    | [Watching recordings](/docs/session-replay/how-to-watch-recordings.md) | How to find and watch session recordings |
    | [Privacy controls](/docs/session-replay/privacy.md) | How to mask sensitive data in recordings |
    | [Network recording](/docs/session-replay/network-recording.md) | How to capture network requests in recordings |
    | [Console log recording](/docs/session-replay/console-log-recording.md) | How to capture console logs in recordings |
    | [More tutorials](/docs/session-replay/tutorials.md) | Other real-world examples and use cases |

### Community questions

Ask a question

### Was this page useful?

HelpfulCould be better