diff --git a/apps/web/core/lib/posthog-provider.tsx b/apps/web/core/lib/posthog-provider.tsx index b9b02a1fe..776d1dee7 100644 --- a/apps/web/core/lib/posthog-provider.tsx +++ b/apps/web/core/lib/posthog-provider.tsx @@ -1,11 +1,11 @@ "use client"; import type { FC, ReactNode } from "react"; -import { lazy, Suspense, useEffect } from "react"; +import { lazy, Suspense, useEffect, useState } from "react"; +import { PostHogProvider as PHProvider } from "@posthog/react"; import { observer } from "mobx-react"; import { useParams } from "next/navigation"; import posthog from "posthog-js"; -import { PostHogProvider as PHProvider } from "posthog-js/react"; // constants import { GROUP_WORKSPACE_TRACKER_EVENT } from "@plane/constants"; // helpers @@ -29,7 +29,9 @@ const PostHogProvider: FC = observer((props) => { const { instance } = useInstance(); const { workspaceSlug, projectId } = useParams(); const { getWorkspaceRoleByWorkspaceSlug, getProjectRoleByWorkspaceSlugAndProjectId } = useUserPermissions(); - + // states + const [hydrated, setHydrated] = useState(false); + // derived values const currentProjectRole = getProjectRoleByWorkspaceSlugAndProjectId( workspaceSlug?.toString(), projectId?.toString() @@ -40,7 +42,7 @@ const PostHogProvider: FC = observer((props) => { process.env.NEXT_PUBLIC_POSTHOG_KEY && process.env.NEXT_PUBLIC_POSTHOG_HOST && is_telemetry_enabled; useEffect(() => { - if (user) { + if (user && hydrated) { // Identify sends an event, so you want may want to limit how often you call it posthog?.identify(user.email, { id: user.id, @@ -57,19 +59,23 @@ const PostHogProvider: FC = observer((props) => { }); } } - }, [user, currentProjectRole, currentWorkspaceRole, currentWorkspace]); + }, [user, currentProjectRole, currentWorkspaceRole, currentWorkspace, hydrated]); useEffect(() => { - if (process.env.NEXT_PUBLIC_POSTHOG_KEY && process.env.NEXT_PUBLIC_POSTHOG_HOST) { - posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, { - api_host: "/ingest", - ui_host: process.env.NEXT_PUBLIC_POSTHOG_HOST, - debug: process.env.NEXT_PUBLIC_POSTHOG_DEBUG === "1", // Debug mode based on the environment variable + const posthogKey = process.env.NEXT_PUBLIC_POSTHOG_KEY; + const posthogHost = process.env.NEXT_PUBLIC_POSTHOG_HOST; + const isDebugMode = process.env.NEXT_PUBLIC_POSTHOG_DEBUG === "1"; + if (posthogKey && posthogHost) { + posthog.init(posthogKey, { + api_host: posthogHost, + ui_host: posthogHost, + debug: isDebugMode, // Debug mode based on the environment variable autocapture: false, capture_pageview: false, // Disable automatic pageview capture, as we capture manually capture_pageleave: true, disable_session_recording: true, }); + setHydrated(true); } }, []); @@ -86,16 +92,16 @@ const PostHogProvider: FC = observer((props) => { } }; - if (is_posthog_enabled) { + if (is_posthog_enabled && hydrated) { document.addEventListener("click", clickHandler); } return () => { document.removeEventListener("click", clickHandler); }; - }, [is_posthog_enabled]); + }, [hydrated, is_posthog_enabled]); - if (is_posthog_enabled) + if (is_posthog_enabled && hydrated) return ( diff --git a/apps/web/package.json b/apps/web/package.json index 795caa86e..3e5484c0e 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -17,9 +17,9 @@ "fix:format": "prettier --write \"**/*.{ts,tsx,md,json,css,scss}\"" }, "dependencies": { + "@atlaskit/pragmatic-drag-and-drop": "catalog:", "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "catalog:", "@atlaskit/pragmatic-drag-and-drop-hitbox": "catalog:", - "@atlaskit/pragmatic-drag-and-drop": "catalog:", "@bprogress/core": "catalog:", "@headlessui/react": "^1.7.19", "@intercom/messenger-js-sdk": "^0.0.12", @@ -34,6 +34,7 @@ "@plane/ui": "workspace:*", "@plane/utils": "workspace:*", "@popperjs/core": "^2.11.8", + "@posthog/react": "^1.4.0", "@react-pdf/renderer": "^3.4.5", "@react-router/node": "^7.9.3", "@tanstack/react-table": "^8.21.3", @@ -48,11 +49,12 @@ "isbot": "^5.1.31", "lodash-es": "catalog:", "lucide-react": "catalog:", + "mobx": "catalog:", "mobx-react": "catalog:", "mobx-utils": "catalog:", - "mobx": "catalog:", "next-themes": "^0.2.1", - "posthog-js": "^1.131.3", + "posthog-js": "^1.255.1", + "react": "catalog:", "react-color": "^2.19.3", "react-dom": "catalog:", "react-dropzone": "^14.2.3", @@ -63,9 +65,8 @@ "react-masonry-component": "^6.3.0", "react-pdf-html": "^2.1.2", "react-popper": "^2.3.0", - "react-router-dom": "^7.9.1", "react-router": "^7.9.1", - "react": "catalog:", + "react-router-dom": "^7.9.1", "recharts": "^2.12.7", "serve": "14.2.5", "smooth-scroll-into-view-if-needed": "^2.0.2", @@ -81,12 +82,12 @@ "@react-router/dev": "^7.9.1", "@types/lodash-es": "catalog:", "@types/node": "catalog:", + "@types/react": "catalog:", "@types/react-color": "^3.0.6", "@types/react-dom": "catalog:", - "@types/react": "catalog:", "prettier": "^3.2.5", "typescript": "catalog:", - "vite-tsconfig-paths": "^5.1.4", - "vite": "catalog:" + "vite": "catalog:", + "vite-tsconfig-paths": "^5.1.4" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 56745c163..9b3347a68 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -135,7 +135,7 @@ importers: version: link:../../packages/utils '@react-router/node': specifier: ^7.9.3 - version: 7.9.4(react-router@7.9.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3) + version: 7.9.4(react-router@7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3) '@tanstack/react-virtual': specifier: ^3.13.12 version: 3.13.12(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -168,7 +168,7 @@ importers: version: 9.1.1(mobx@6.12.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) next-themes: specifier: ^0.2.1 - version: 0.2.1(next@14.2.32(@babel/core@7.28.4)(@opentelemetry/api@1.9.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 0.2.1(next@14.2.32(@opentelemetry/api@1.9.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: specifier: 'catalog:' version: 18.3.1 @@ -180,7 +180,7 @@ importers: version: 7.51.5(react@18.3.1) react-router: specifier: ^7.9.1 - version: 7.9.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react-router-dom: specifier: ^7.9.1 version: 7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -205,7 +205,7 @@ importers: version: link:../../packages/typescript-config '@react-router/dev': specifier: ^7.9.1 - version: 7.9.4(@react-router/serve@7.9.5(react-router@7.9.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3))(@types/node@22.12.0)(babel-plugin-macros@3.1.0)(jiti@2.5.1)(react-router@7.9.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(terser@5.43.1)(typescript@5.8.3)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))(yaml@2.8.1) + version: 7.9.4(@react-router/serve@7.9.5(react-router@7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3))(@types/node@22.12.0)(babel-plugin-macros@3.1.0)(jiti@2.5.1)(react-router@7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(terser@5.43.1)(typescript@5.8.3)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))(yaml@2.8.1) '@types/lodash-es': specifier: 'catalog:' version: 4.17.12 @@ -425,7 +425,7 @@ importers: version: 6.0.8(mobx@6.12.0) next-themes: specifier: ^0.2.1 - version: 0.2.1(next@14.2.32(@babel/core@7.28.4)(@opentelemetry/api@1.9.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 0.2.1(next@14.2.32(@opentelemetry/api@1.9.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: specifier: 'catalog:' version: 18.3.1 @@ -541,6 +541,9 @@ importers: '@popperjs/core': specifier: ^2.11.8 version: 2.11.8 + '@posthog/react': + specifier: ^1.4.0 + version: 1.4.0(@types/react@18.3.11)(posthog-js@1.255.1)(react@18.3.1) '@react-pdf/renderer': specifier: ^3.4.5 version: 3.4.5(react@18.3.1) @@ -594,9 +597,9 @@ importers: version: 6.0.8(mobx@6.12.0) next-themes: specifier: ^0.2.1 - version: 0.2.1(next@14.2.32(@babel/core@7.28.4)(@opentelemetry/api@1.9.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 0.2.1(next@14.2.32(@opentelemetry/api@1.9.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) posthog-js: - specifier: ^1.131.3 + specifier: ^1.255.1 version: 1.255.1 react: specifier: 'catalog:' @@ -2416,6 +2419,16 @@ packages: '@popperjs/core@2.11.8': resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==} + '@posthog/react@1.4.0': + resolution: {integrity: sha512-xzPeZ753fQ0deZzdgY/0YavZvNpmdaxUzLYJYu5XjONNcZ8PwJnNLEK+7D/Cj8UM4Q8nWI7QC5mjum0uLWa4FA==} + peerDependencies: + '@types/react': '>=16.8.0' + posthog-js: '>=1.257.2' + react: '>=16.8.0' + peerDependenciesMeta: + '@types/react': + optional: true + '@prisma/instrumentation@6.13.0': resolution: {integrity: sha512-b97b0sBycGh89RQcqobSgjGl3jwPaC5cQIOFod6EX1v0zIxlXPmL3ckSXxoHpy+Js0QV/tgCzFvqicMJCtezBA==} peerDependencies: @@ -7282,16 +7295,6 @@ packages: react-dom: optional: true - react-router@7.9.4: - resolution: {integrity: sha512-SD3G8HKviFHg9xj7dNODUKDFgpG4xqD5nhyd0mYoB5iISepuZAvzSr8ywxgxKJ52yRzf/HWtVHc9AWwoTbljvA==} - engines: {node: '>=20.0.0'} - peerDependencies: - react: '>=18' - react-dom: '>=18' - peerDependenciesMeta: - react-dom: - optional: true - react-smooth@4.0.4: resolution: {integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==} peerDependencies: @@ -9640,6 +9643,13 @@ snapshots: '@popperjs/core@2.11.8': {} + '@posthog/react@1.4.0(@types/react@18.3.11)(posthog-js@1.255.1)(react@18.3.1)': + dependencies: + posthog-js: 1.255.1 + react: 18.3.1 + optionalDependencies: + '@types/react': 18.3.11 + '@prisma/instrumentation@6.13.0(@opentelemetry/api@1.9.0)': dependencies: '@opentelemetry/api': 1.9.0 @@ -10015,7 +10025,7 @@ snapshots: - tsx - yaml - '@react-router/dev@7.9.4(@react-router/serve@7.9.5(react-router@7.9.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3))(@types/node@22.12.0)(babel-plugin-macros@3.1.0)(jiti@2.5.1)(react-router@7.9.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(terser@5.43.1)(typescript@5.8.3)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))(yaml@2.8.1)': + '@react-router/dev@7.9.4(@react-router/serve@7.9.5(react-router@7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3))(@types/node@22.12.0)(babel-plugin-macros@3.1.0)(jiti@2.5.1)(react-router@7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(terser@5.43.1)(typescript@5.8.3)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))(yaml@2.8.1)': dependencies: '@babel/core': 7.28.4 '@babel/generator': 7.28.3 @@ -10025,7 +10035,7 @@ snapshots: '@babel/traverse': 7.28.4 '@babel/types': 7.28.4 '@npmcli/package-json': 4.0.1 - '@react-router/node': 7.9.4(react-router@7.9.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3) + '@react-router/node': 7.9.4(react-router@7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3) '@remix-run/node-fetch-server': 0.9.0 arg: 5.0.2 babel-dead-code-elimination: 1.0.10 @@ -10040,14 +10050,14 @@ snapshots: picocolors: 1.1.1 prettier: 3.6.2 react-refresh: 0.14.2 - react-router: 7.9.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react-router: 7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) semver: 7.7.2 tinyglobby: 0.2.15 valibot: 1.1.0(typescript@5.8.3) vite: 7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1) vite-node: 3.2.4(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1) optionalDependencies: - '@react-router/serve': 7.9.5(react-router@7.9.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3) + '@react-router/serve': 7.9.5(react-router@7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3) typescript: 5.8.3 transitivePeerDependencies: - '@types/node' @@ -10073,15 +10083,6 @@ snapshots: optionalDependencies: typescript: 5.8.3 - '@react-router/express@7.9.5(express@4.21.2)(react-router@7.9.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)': - dependencies: - '@react-router/node': 7.9.5(react-router@7.9.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3) - express: 4.21.2 - react-router: 7.9.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - optionalDependencies: - typescript: 5.8.3 - optional: true - '@react-router/node@7.9.3(react-router@7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)': dependencies: '@mjackson/node-fetch-server': 0.2.0 @@ -10096,13 +10097,6 @@ snapshots: optionalDependencies: typescript: 5.8.3 - '@react-router/node@7.9.4(react-router@7.9.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)': - dependencies: - '@mjackson/node-fetch-server': 0.2.0 - react-router: 7.9.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - optionalDependencies: - typescript: 5.8.3 - '@react-router/node@7.9.5(react-router@7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)': dependencies: '@mjackson/node-fetch-server': 0.2.0 @@ -10110,14 +10104,6 @@ snapshots: optionalDependencies: typescript: 5.8.3 - '@react-router/node@7.9.5(react-router@7.9.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)': - dependencies: - '@mjackson/node-fetch-server': 0.2.0 - react-router: 7.9.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - optionalDependencies: - typescript: 5.8.3 - optional: true - '@react-router/serve@7.9.5(react-router@7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)': dependencies: '@mjackson/node-fetch-server': 0.2.0 @@ -10133,22 +10119,6 @@ snapshots: - supports-color - typescript - '@react-router/serve@7.9.5(react-router@7.9.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)': - dependencies: - '@mjackson/node-fetch-server': 0.2.0 - '@react-router/express': 7.9.5(express@4.21.2)(react-router@7.9.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3) - '@react-router/node': 7.9.5(react-router@7.9.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3) - compression: 1.8.1 - express: 4.21.2 - get-port: 5.1.1 - morgan: 1.10.1 - react-router: 7.9.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - source-map-support: 0.5.21 - transitivePeerDependencies: - - supports-color - - typescript - optional: true - '@remirror/core-constants@3.0.0': {} '@remix-run/node-fetch-server@0.9.0': {} @@ -14277,7 +14247,7 @@ snapshots: neo-async@2.6.2: {} - next-themes@0.2.1(next@14.2.32(@babel/core@7.28.4)(@opentelemetry/api@1.9.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + next-themes@0.2.1(next@14.2.32(@opentelemetry/api@1.9.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: next: 14.2.32(@babel/core@7.28.4)(@opentelemetry/api@1.9.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 @@ -15112,14 +15082,6 @@ snapshots: optionalDependencies: react-dom: 18.3.1(react@18.3.1) - react-router@7.9.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1): - dependencies: - cookie: 1.0.2 - react: 18.3.1 - set-cookie-parser: 2.7.1 - optionalDependencies: - react-dom: 18.3.1(react@18.3.1) - react-smooth@4.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: fast-equals: 5.2.2