added posthog (#68)

2026-06-04 21:04:37 +08:00 · 2024-06-09 09:16:53 +02:00 · 2024-06-09 09:16:53 +02:00 · 99da7b8677
commit 99da7b8677
parent 3b9e54712c
5 changed files with 96 additions and 73 deletions
--- a/packages/stack-server/.env
+++ b/packages/stack-server/.env
@ -31,6 +31,6 @@ EMAIL_SENDER=# for local inbucket: noreply@test.com
 DATABASE_CONNECTION_STRING=# enter your connection string here. For local development: `postgres://postgres:password@localhost:5432/stack`
 DIRECT_DATABASE_CONNECTION_STRING=# enter your direct (unpooled or session mode) database connection string here. For local development: same as above

-# Misc
+# Misc, optional
 STACK_ACCESS_TOKEN_EXPIRATION_TIME=# enter the expiration time for the access token here. Optional, don't specify it for default value
-NEXT_PUBLIC_STACK_HEAD_TAGS=[{ "tagName": "script", "attributes": {}, "innerHTML": "// insert head tags here" }]
+NEXT_PUBLIC_STACK_HEAD_TAGS=[{ "tagName": "script", "attributes": {}, "innerHTML": "// insert head tags here" }]
--- a/packages/stack-server/package.json
+++ b/packages/stack-server/package.json
@ -85,6 +85,7 @@
    "nodemailer": "^6.9.10",
    "openid-client": "^5.6.4",
    "pg": "^8.11.3",
+    "posthog-js": "^1.138.1",
    "prettier": "^3.2.5",
    "react": "^18.2",
    "react-colorful": "^5.6.1",
@ -107,7 +108,6 @@
    "zustand": "^4.5.2"
  },
  "devDependencies": {
-    "rimraf": "^5.0.5",
    "@types/bcrypt": "^5.0.2",
    "@types/canvas-confetti": "^1.6.4",
    "@types/lodash": "^4.17.4",
@ -118,6 +118,7 @@
    "autoprefixer": "^10.4.17",
    "postcss": "^8.4.38",
    "prisma": "^5.9.1",
+    "rimraf": "^5.0.5",
    "tailwindcss": "^3.4.1",
    "tsx": "^4.7.2"
  }
--- a/packages/stack-server/src/app/layout.tsx
+++ b/packages/stack-server/src/app/layout.tsx
@ -15,6 +15,7 @@ import { Toaster } from '@/components/ui/toaster';
 import { ThemeProvider } from '@/components/theme-provider';
 import { DevErrorNotifier } from '@/components/dev-error-notifier';
 import { RouterProvider } from '@/components/router';
+import { CSPostHogProvider, UserIdentity } from './providers';

 export const metadata: Metadata = {
  title: {
@ -58,26 +59,29 @@ export default function RootLayout({
          });
        })}
      </head>
-      <body 
-        className={cn(
+      <CSPostHogProvider>
+        <body 
+          className={cn(
          "min-h-screen bg-background font-sans antialiased",
          fontSans.variable
        )}
-        suppressHydrationWarning
-      >
-        <Analytics />
-        <ThemeProvider>
-          <StackProvider app={stackServerApp}>
-            <StackTheme>
-              <RouterProvider>
-                {children}
-              </RouterProvider>
-            </StackTheme>
-          </StackProvider>
-        </ThemeProvider>
-        <DevErrorNotifier />
-        <Toaster />
-      </body>
+          suppressHydrationWarning
+        >
+          <Analytics />
+          <ThemeProvider>
+            <StackProvider app={stackServerApp}>
+              <StackTheme>
+                <RouterProvider>
+                  <UserIdentity />
+                  {children}
+                </RouterProvider>
+              </StackTheme>
+            </StackProvider>
+          </ThemeProvider>
+          <DevErrorNotifier />
+          <Toaster />
+        </body>
+      </CSPostHogProvider>
    </html>
  );
 }
--- a/packages/stack-server/src/app/providers.tsx
+++ b/packages/stack-server/src/app/providers.tsx
@ -0,0 +1,40 @@
+'use client';
+import { useUser } from '@stackframe/stack';
+import posthog from 'posthog-js';
+import { PostHogProvider } from 'posthog-js/react';
+import { Suspense, useEffect, useState } from 'react';
+
+if (typeof window !== 'undefined') {
+  if (process.env.NEXT_PUBLIC_POSTHOG_KEY) {
+    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
+      api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+      person_profiles: 'identified_only',
+    });
+  }
+}
+export function CSPostHogProvider({ children }: { children: React.ReactNode }) {
+  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+}
+
+export function UserIdentity() {
+  return <Suspense fallback={null}><UserIdentityInner /></Suspense>;
+}
+
+function UserIdentityInner() {
+  const [lastUserId, setLastUserId] = useState<string | null>(null);
+  const user = useUser();
+
+  useEffect(() => {
+    if (user && user.id !== lastUserId) {
+      posthog.identify(user.id, {
+        primaryEmail: user.primaryEmail,
+        displayName: user.displayName,
+      });
+      setLastUserId(user.id);
+    } else if (!user && lastUserId) {
+      posthog.reset();
+      setLastUserId(null);
+    }
+  }, [user, lastUserId]);
+  return null;
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -469,7 +469,7 @@ importers:
        version: 3.3.4(react-hook-form@7.51.4(react@18.2.0))
      '@mdx-js/loader':
        specifier: ^3
-        version: 3.0.0(webpack@5.90.1(@swc/core@1.3.101)(esbuild@0.19.11))
+        version: 3.0.0(webpack@5.90.1(@swc/core@1.3.101(@swc/helpers@0.5.11))(esbuild@0.19.11))
      '@mdx-js/react':
        specifier: ^3.0.0
        version: 3.0.0(@types/react@18.2.66)(react@18.2.0)
@ -478,7 +478,7 @@ importers:
        version: 14.1.0
      '@next/mdx':
        specifier: ^14
-        version: 14.1.0(@mdx-js/loader@3.0.0(webpack@5.90.1(@swc/core@1.3.101)(esbuild@0.19.11)))(@mdx-js/react@3.0.0(@types/react@18.2.66)(react@18.2.0))
+        version: 14.1.0(@mdx-js/loader@3.0.0(webpack@5.90.1(@swc/core@1.3.101(@swc/helpers@0.5.11))(esbuild@0.19.11)))(@mdx-js/react@3.0.0(@types/react@18.2.66)(react@18.2.0))
      '@node-oauth/oauth2-server':
        specifier: ^5.1.0
        version: 5.1.0
@ -580,7 +580,7 @@ importers:
        version: 0.0.14(react@18.2.0)
      '@sentry/nextjs':
        specifier: ^7.105.0
-        version: 7.110.0(next@14.1.0(@babel/core@7.24.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)(webpack@5.90.1(@swc/core@1.3.101)(esbuild@0.19.11))
+        version: 7.110.0(next@14.1.0(@babel/core@7.24.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)(webpack@5.90.1(@swc/core@1.3.101(@swc/helpers@0.5.11))(esbuild@0.19.11))
      '@stackframe/stack':
        specifier: workspace:*
        version: link:../stack
@ -656,6 +656,9 @@ importers:
      pg:
        specifier: ^8.11.3
        version: 8.11.3
+      posthog-js:
+        specifier: ^1.138.1
+        version: 1.138.1
      prettier:
        specifier: ^3.2.5
        version: 3.2.5
@ -6058,6 +6061,9 @@ packages:
    resolution: {integrity: sha512-u5/sxGfiMfZNtJ3OvQpXcvotFpYkL0n9u9mM2vkui2nGo8b4wvDkJ8gAkYqbA8QpGyFCv3RK0Z+Iv+9veCS9bQ==}
    engines: {node: '>=0.4.0'}

+  fflate@0.4.8:
+    resolution: {integrity: sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==}
+
  file-entry-cache@6.0.1:
    resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
    engines: {node: ^10.12.0 || >=12.0.0}
@ -8404,6 +8410,12 @@ packages:
    resolution: {integrity: sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==}
    engines: {node: '>=0.10.0'}

+  posthog-js@1.138.1:
+    resolution: {integrity: sha512-hLahTznM0/iSM3vl6QGcmdG/zgCcW2DaQqPf7OtXCoqxNdYCWTNp6/sqepd6CxtDmJfm1S5Cbu1tD9TSksOYcA==}
+
+  preact@10.22.0:
+    resolution: {integrity: sha512-RRurnSjJPj4rp5K6XoP45Ui33ncb7e4H7WiOHVpjbkvqvA3U+N8Z6Qbo0AE6leGYBV66n8EhEaFixvIu3SkxFw==}
+
  prebuild-install@7.1.1:
    resolution: {integrity: sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==}
    engines: {node: '>=10'}
@ -12606,11 +12618,11 @@ snapshots:
      - encoding
      - supports-color

-  '@mdx-js/loader@3.0.0(webpack@5.90.1(@swc/core@1.3.101)(esbuild@0.19.11))':
+  '@mdx-js/loader@3.0.0(webpack@5.90.1(@swc/core@1.3.101(@swc/helpers@0.5.11))(esbuild@0.19.11))':
    dependencies:
      '@mdx-js/mdx': 3.0.0
      source-map: 0.7.4
-      webpack: 5.90.1(@swc/core@1.3.101(@swc/helpers@0.5.11))(esbuild@0.19.11)
+      webpack: 5.90.1(@swc/core@1.3.101)(esbuild@0.19.11)
    transitivePeerDependencies:
      - supports-color

@ -12916,11 +12928,11 @@ snapshots:
    dependencies:
      glob: 10.3.10

-  '@next/mdx@14.1.0(@mdx-js/loader@3.0.0(webpack@5.90.1(@swc/core@1.3.101)(esbuild@0.19.11)))(@mdx-js/react@3.0.0(@types/react@18.2.66)(react@18.2.0))':
+  '@next/mdx@14.1.0(@mdx-js/loader@3.0.0(webpack@5.90.1(@swc/core@1.3.101(@swc/helpers@0.5.11))(esbuild@0.19.11)))(@mdx-js/react@3.0.0(@types/react@18.2.66)(react@18.2.0))':
    dependencies:
      source-map: 0.7.4
    optionalDependencies:
-      '@mdx-js/loader': 3.0.0(webpack@5.90.1(@swc/core@1.3.101)(esbuild@0.19.11))
+      '@mdx-js/loader': 3.0.0(webpack@5.90.1(@swc/core@1.3.101(@swc/helpers@0.5.11))(esbuild@0.19.11))
      '@mdx-js/react': 3.0.0(@types/react@18.2.66)(react@18.2.0)

  '@next/swc-darwin-arm64@14.1.0':
@ -14833,7 +14845,7 @@ snapshots:
      '@sentry/utils': 7.110.0
      localforage: 1.10.0

-  '@sentry/nextjs@7.110.0(next@14.1.0(@babel/core@7.24.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)(webpack@5.90.1(@swc/core@1.3.101)(esbuild@0.19.11))':
+  '@sentry/nextjs@7.110.0(next@14.1.0(@babel/core@7.24.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)(webpack@5.90.1(@swc/core@1.3.101(@swc/helpers@0.5.11))(esbuild@0.19.11))':
    dependencies:
      '@rollup/plugin-commonjs': 24.0.0(rollup@2.78.0)
      '@sentry/core': 7.110.0
@ -14851,7 +14863,7 @@ snapshots:
      rollup: 2.78.0
      stacktrace-parser: 0.1.10
    optionalDependencies:
-      webpack: 5.90.1(@swc/core@1.3.101(@swc/helpers@0.5.11))(esbuild@0.19.11)
+      webpack: 5.90.1(@swc/core@1.3.101)(esbuild@0.19.11)
    transitivePeerDependencies:
      - encoding
      - supports-color
@ -15391,7 +15403,7 @@ snapshots:
    dependencies:
      '@types/node': 20.11.18
      tapable: 2.2.1
-      webpack: 5.90.1(@swc/core@1.3.101(@swc/helpers@0.5.11))(esbuild@0.19.11)
+      webpack: 5.90.1(@swc/core@1.3.101)(esbuild@0.19.11)
    transitivePeerDependencies:
      - '@swc/core'
      - esbuild
@ -17588,6 +17600,8 @@ snapshots:
    dependencies:
      xml-js: 1.6.11

+  fflate@0.4.8: {}
+
  file-entry-cache@6.0.1:
    dependencies:
      flat-cache: 3.2.0
@ -20420,6 +20434,13 @@ snapshots:
    dependencies:
      xtend: 4.0.2

+  posthog-js@1.138.1:
+    dependencies:
+      fflate: 0.4.8
+      preact: 10.22.0
+
+  preact@10.22.0: {}
+
  prebuild-install@7.1.1:
    dependencies:
      detect-libc: 2.0.2
@ -21965,18 +21986,6 @@ snapshots:

  term-size@2.2.1: {}

-  terser-webpack-plugin@5.3.10(@swc/core@1.3.101(@swc/helpers@0.5.11))(esbuild@0.19.11)(webpack@5.90.1(@swc/core@1.3.101)(esbuild@0.19.11)):
-    dependencies:
-      '@jridgewell/trace-mapping': 0.3.22
-      jest-worker: 27.5.1
-      schema-utils: 3.3.0
-      serialize-javascript: 6.0.2
-      terser: 5.27.1
-      webpack: 5.90.1(@swc/core@1.3.101(@swc/helpers@0.5.11))(esbuild@0.19.11)
-    optionalDependencies:
-      '@swc/core': 1.3.101(@swc/helpers@0.5.11)
-      esbuild: 0.19.11
-
  terser-webpack-plugin@5.3.10(@swc/core@1.3.101)(esbuild@0.19.11)(webpack@5.90.1(@swc/core@1.3.101)(esbuild@0.19.11)):
    dependencies:
      '@jridgewell/trace-mapping': 0.3.22
@ -22628,37 +22637,6 @@ snapshots:

  webpack-sources@3.2.3: {}

-  webpack@5.90.1(@swc/core@1.3.101(@swc/helpers@0.5.11))(esbuild@0.19.11):
-    dependencies:
-      '@types/eslint-scope': 3.7.7
-      '@types/estree': 1.0.5
-      '@webassemblyjs/ast': 1.11.6
-      '@webassemblyjs/wasm-edit': 1.11.6
-      '@webassemblyjs/wasm-parser': 1.11.6
-      acorn: 8.11.3
-      acorn-import-assertions: 1.9.0(acorn@8.11.3)
-      browserslist: 4.23.0
-      chrome-trace-event: 1.0.3
-      enhanced-resolve: 5.15.0
-      es-module-lexer: 1.4.1
-      eslint-scope: 5.1.1
-      events: 3.3.0
-      glob-to-regexp: 0.4.1
-      graceful-fs: 4.2.11
-      json-parse-even-better-errors: 2.3.1
-      loader-runner: 4.3.0
-      mime-types: 2.1.35
-      neo-async: 2.6.2
-      schema-utils: 3.3.0
-      tapable: 2.2.1
-      terser-webpack-plugin: 5.3.10(@swc/core@1.3.101(@swc/helpers@0.5.11))(esbuild@0.19.11)(webpack@5.90.1(@swc/core@1.3.101)(esbuild@0.19.11))
-      watchpack: 2.4.0
-      webpack-sources: 3.2.3
-    transitivePeerDependencies:
-      - '@swc/core'
-      - esbuild
-      - uglify-js
-
  webpack@5.90.1(@swc/core@1.3.101)(esbuild@0.19.11):
    dependencies:
      '@types/eslint-scope': 3.7.7