[TOOL-4673] Dashboard: Enable posthog session recording for nebula app (#7267)

MananTank · MananTank · commit b12725b231a1 · 2025-06-04T04:13:00.000Z
&lt;!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

--&gt;

&lt;!-- start pr-codex --&gt;

---

## PR-Codex overview
This PR focuses on enhancing the `PHProvider` component by introducing a `disable_session_recording` prop, allowing for more control over session recording. Additionally, it renames the `Providers` component to `PayProviders` and `BridgeProviders` in their respective files for clarity.

### Detailed summary
- Added `disable_session_recording` prop to `&lt;PHProvider&gt;` in multiple files.
- Renamed `Providers` to `PayProviders` in `Providers.client.tsx` and `pay/layout.tsx`.
- Renamed `Providers` to `BridgeProviders` in `Providers.client.tsx` and `bridge/layout.tsx`.
- Updated the `PHProvider` function signature to accept `disable_session_recording` as a prop.

&gt; ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

&lt;!-- end pr-codex --&gt;

&lt;!-- This is an auto-generated comment: release notes by coderabbit.ai --&gt;

## Summary by CodeRabbit

- **New Features**
	- Added explicit controls to enable or disable session recording across different sections of the dashboard.
- **Refactor**
	- Renamed provider components for improved clarity in the Bridge and Pay sections.
	- Updated component usage to reflect new provider names.
- **Style**
	- No visual changes introduced.
- **Bug Fixes**
	- None.
- **Documentation**
	- None.

&lt;!-- end of auto-generated comment: release notes by coderabbit.ai --&gt;
diff --git a/apps/dashboard/src/app/(app)/layout.tsx b/apps/dashboard/src/app/(app)/layout.tsx
@@ -63,7 +63,7 @@ export default function RootLayout({
         />
         <PosthogHeadSetup />
       </head>
-      <PHProvider>
+      <PHProvider disable_session_recording={true}>
         <PostHogPageView />
         <body
           className={cn(
diff --git a/apps/dashboard/src/app/bridge/components/client/Providers.client.tsx b/apps/dashboard/src/app/bridge/components/client/Providers.client.tsx
@@ -5,7 +5,7 @@ import { ThirdwebProvider } from "thirdweb/react";
 import { PHProvider } from "../../../../lib/posthog/Posthog";
 import { PostHogPageView } from "../../../../lib/posthog/PosthogPageView";
 
-export function Providers({ children }: { children: React.ReactNode }) {
+export function BridgeProviders({ children }: { children: React.ReactNode }) {
   return (
     <ThirdwebProvider>
       <ThemeProvider
@@ -14,7 +14,7 @@ export function Providers({ children }: { children: React.ReactNode }) {
         enableSystem={false}
         defaultTheme="dark"
       >
-        <PHProvider>
+        <PHProvider disable_session_recording={true}>
           <PostHogPageView />
           {children}
           <Toaster richColors theme="dark" />
diff --git a/apps/dashboard/src/app/bridge/layout.tsx b/apps/dashboard/src/app/bridge/layout.tsx
@@ -1,7 +1,7 @@
 import { cn } from "@/lib/utils";
 import { Inter } from "next/font/google";
 import "../../global.css";
-import { Providers } from "./components/client/Providers.client";
+import { BridgeProviders } from "./components/client/Providers.client";
 
 const fontSans = Inter({
   subsets: ["latin"],
@@ -22,7 +22,7 @@ export default function BridgeLayout({
           fontSans.variable,
         )}
       >
-        <Providers>{children}</Providers>
+        <BridgeProviders>{children}</BridgeProviders>
       </body>
     </html>
   );
diff --git a/apps/dashboard/src/app/nebula-app/layout.tsx b/apps/dashboard/src/app/nebula-app/layout.tsx
@@ -39,7 +39,7 @@ export default function Layout(props: {
         <link rel="icon" href="/assets/nebula/favicon.ico" />
         <PosthogHeadSetup />
       </head>
-      <PHProvider>
+      <PHProvider disable_session_recording={false}>
         <PostHogPageView />
         <body
           className={cn(
diff --git a/apps/dashboard/src/app/pay/components/client/Providers.client.tsx b/apps/dashboard/src/app/pay/components/client/Providers.client.tsx
@@ -4,10 +4,10 @@ import { ThirdwebProvider } from "thirdweb/react";
 import { PHProvider } from "../../../../lib/posthog/Posthog";
 import { PostHogPageView } from "../../../../lib/posthog/PosthogPageView";
 
-export function Providers({ children }: { children: React.ReactNode }) {
+export function PayProviders({ children }: { children: React.ReactNode }) {
   return (
     <ThirdwebProvider>
-      <PHProvider>
+      <PHProvider disable_session_recording={true}>
         <PostHogPageView />
         {children}
         <Toaster richColors theme="dark" />
diff --git a/apps/dashboard/src/app/pay/layout.tsx b/apps/dashboard/src/app/pay/layout.tsx
@@ -2,7 +2,7 @@ import "../../global.css";
 import { cn } from "@/lib/utils";
 import { ThemeProvider } from "next-themes";
 import { Inter } from "next/font/google";
-import { Providers } from "./components/client/Providers.client";
+import { PayProviders } from "./components/client/Providers.client";
 
 const fontSans = Inter({
   subsets: ["latin"],
@@ -23,7 +23,7 @@ export default async function PayLayout({
           fontSans.variable,
         )}
       >
-        <Providers>
+        <PayProviders>
           <ThemeProvider
             attribute="class"
             disableTransitionOnChange
@@ -43,7 +43,7 @@ export default async function PayLayout({
               />
             </div>
           </ThemeProvider>
-        </Providers>
+        </PayProviders>
       </body>
     </html>
   );
diff --git a/apps/dashboard/src/lib/posthog/Posthog.tsx b/apps/dashboard/src/lib/posthog/Posthog.tsx
@@ -7,10 +7,9 @@ import { useEffect } from "react";
 
 const NEXT_PUBLIC_POSTHOG_API_KEY = process.env.NEXT_PUBLIC_POSTHOG_API_KEY;
 
-export function PHProvider({
-  children,
-}: {
+export function PHProvider(props: {
   children: React.ReactNode;
+  disable_session_recording: boolean;
 }) {
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
@@ -19,10 +18,10 @@ export function PHProvider({
         api_host: "https://a.thirdweb.com",
         capture_pageview: false,
         debug: false,
-        disable_session_recording: true,
+        disable_session_recording: props.disable_session_recording,
       });
     }
-  }, []);
+  }, [props.disable_session_recording]);
 
-  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+  return <PostHogProvider client={posthog}>{props.children}</PostHogProvider>;
 }
