Chore: Add OpenReplay to docs

docusaurus.config.ts

@@ -77,6 +77,8 @@ const config: Config = {
     })(),
     hasuraVersion: 3,
     DEV_TOKEN: process.env.DEV_TOKEN,
+    openReplayIngestPoint: process.env.OPENREPLAY_INGEST_POINT,
+    openReplayProjectKey: process.env.OPENREPLAY_PROJECT_KEY,
   },
 
   presets: [

package.json

@@ -26,6 +26,7 @@
     "@docusaurus/preset-classic": "3.4.0",
     "@docusaurus/theme-mermaid": "3.4.0",
     "@mdx-js/react": "^3.0.0",
+    "@openreplay/tracker": "^15.0.3",
     "autoprefixer": "^10.4.16",
     "clsx": "^1.2.1",
     "dompurify": "^3.1.5",

src/components/OpenReplay/OpenReplay.ts

@@ -0,0 +1,42 @@
+import siteConfig from '@generated/docusaurus.config';
+import Tracker from '@openreplay/tracker';
+
+const OPENREPLAY_SESSION_COOKIE = 'openReplaySessionHash';
+const OPENREPLAY_INGEST_POINT = siteConfig.customFields.openReplayIngestPoint as string;
+const OPENREPLAY_PROJECT_KEY = siteConfig.customFields.openReplayProjectKey as string;
+
+let tracker: Tracker | null = null;
+
+export const initOpenReplay = async () => {
+  const { default: Tracker } = await import('@openreplay/tracker');
+  tracker = new Tracker({
+    projectKey: OPENREPLAY_PROJECT_KEY,
+    ingestPoint: OPENREPLAY_INGEST_POINT,
+    __DISABLE_SECURE_MODE: true,
+  });
+};
+
+export const startOpenReplayTracking = (userId?: string) => {
+  if (tracker) {
+    const cookies = document.cookie.split('; ');
+    const cookie = cookies.find(c => c.startsWith(`${OPENREPLAY_SESSION_COOKIE}=`));
+    const existingSessionHash = cookie ? cookie.split('=')[1] : null;
+
+    if (existingSessionHash) {
+      // Resume existing session
+      tracker.start({ sessionHash: existingSessionHash });
+    } else {
+      // Start a new session
+      tracker.start();
+      const newSessionHash = tracker.getSessionToken();
+      if (newSessionHash) {
+        document.cookie = `${OPENREPLAY_SESSION_COOKIE}=${newSessionHash};`;
+      }
+    }
+
+    // Set the user ID in both cases
+    tracker.setUserID(userId);
+  } else {
+    console.warn('OpenReplay tracker is not initialized');
+  }
+};

src/theme/DocRoot/Layout/index.js

@@ -10,16 +10,27 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
 import { AiChatBot } from '@site/src/components/AiChatBot/AiChatBot';
 import fetchUser from '@theme/DocRoot/Layout/FetchUser';
 import posthog from 'posthog-js';
+import { initOpenReplay, startOpenReplayTracking } from '@site/src/components/OpenReplay/OpenReplay';
 
 export default function DocRootLayout({ children }) {
   const sidebar = useDocsSidebar();
   const location = useLocation();
   const isBrowser = useIsBrowser();
   const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
   const [hasInitialized, setHasInitialized] = useState(false);
+  const [hasInitializedOpenReplay, setHasInitializedOpenReplay] = useState(false);
 
   useEffect(() => {
     if (isBrowser && !hasInitialized) {
+      (async () => {
+        try {
+          await initOpenReplay();
+          setHasInitializedOpenReplay(true);
+        } catch (error) {
+          console.error('Failed to initialize OpenReplay:', error);
+        }
+      })();
+
       posthog.init('phc_MZpdcQLGf57lyfOUT0XA93R3jaCxGsqftVt4iI4MyUY', {
         api_host: 'https://analytics-posthog.hasura-app.io',
       });
@@ -28,6 +39,12 @@ export default function DocRootLayout({ children }) {
     }
   }, [isBrowser, hasInitialized]);
 
+  useEffect(() => {
+    if (isBrowser && hasInitializedOpenReplay) {
+      startOpenReplayTracking();
+    }
+  }, [hasInitializedOpenReplay]);
+
   useEffect(() => {
     if (isBrowser && hasInitialized) {
       posthog.capture('$pageview');

yarn.lock

@@ -3701,6 +3701,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@medv/finder@npm:^3.2.0":
+  version: 3.2.0
+  resolution: "@medv/finder@npm:3.2.0"
+  checksum: 3301690b94531f2ba8c06fe7d58663a6c6ba2a2293f06133f236f7d5d0c2aac59ac6700691e16d21e5269026b38915a87f55b789351607556e778a303158bea3
+  languageName: node
+  linkType: hard
+
 "@motionone/animation@npm:^10.12.0":
   version: 10.17.0
   resolution: "@motionone/animation@npm:10.17.0"
@@ -3822,6 +3829,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@openreplay/network-proxy@npm:^1.0.5":
+  version: 1.0.5
+  resolution: "@openreplay/network-proxy@npm:1.0.5"
+  checksum: aca41c617896f8c5d7f006924cc0c66213823191102dcedc31970b47b921f7c153884425560af4e0fce372001d55499cd30336c15a902c1ea54eddf3da48719a
+  languageName: node
+  linkType: hard
+
+"@openreplay/tracker@npm:^15.0.3":
+  version: 15.0.3
+  resolution: "@openreplay/tracker@npm:15.0.3"
+  dependencies:
+    "@medv/finder": "npm:^3.2.0"
+    "@openreplay/network-proxy": "npm:^1.0.5"
+    error-stack-parser: "npm:^2.0.6"
+    error-stack-parser-es: "npm:^0.1.5"
+    fflate: "npm:^0.8.2"
+    web-vitals: "npm:^4.2.3"
+  checksum: 8abbe2ed0821dfda90d66bd69321d4b212e01b7965258d1830ee91b08b0f9fa5626f5efb2741242237d1037b6385fe542946a1f47a07a93b8e671eb72b6cf96c
+  languageName: node
+  linkType: hard
+
 "@pkgjs/parseargs@npm:^0.11.0":
   version: 0.11.0
   resolution: "@pkgjs/parseargs@npm:0.11.0"
@@ -7458,6 +7486,7 @@ __metadata:
     "@docusaurus/tsconfig": "npm:3.4.0"
     "@docusaurus/types": "npm:3.4.0"
     "@mdx-js/react": "npm:^3.0.0"
+    "@openreplay/tracker": "npm:^15.0.3"
     "@types/dompurify": "npm:^3"
     "@types/punycode": "npm:^2"
     "@types/react-transition-group": "npm:^4"
@@ -7744,6 +7773,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"error-stack-parser-es@npm:^0.1.5":
+  version: 0.1.5
+  resolution: "error-stack-parser-es@npm:0.1.5"
+  checksum: 7231f7040a0146c50b2bf75c7d03690557e78353f231fe53d4d5bcd9f925ed46517dd2f6f8d88c7214f9af27af3f251faa135e32b531515100847f21793ae924
+  languageName: node
+  linkType: hard
+
+"error-stack-parser@npm:^2.0.6":
+  version: 2.1.4
+  resolution: "error-stack-parser@npm:2.1.4"
+  dependencies:
+    stackframe: "npm:^1.3.4"
+  checksum: 23db33135bfc6ba701e5eee45e1bb9bd2fe33c5d4f9927440d9a499c7ac538f91f455fcd878611361269893c56734419252c40d8105eb3b023cf8b0fc2ebb64e
+  languageName: node
+  linkType: hard
+
 "es-define-property@npm:^1.0.0":
   version: 1.0.0
   resolution: "es-define-property@npm:1.0.0"
@@ -8123,6 +8168,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fflate@npm:^0.8.2":
+  version: 0.8.2
+  resolution: "fflate@npm:0.8.2"
+  checksum: 2bd26ba6d235d428de793c6a0cd1aaa96a06269ebd4e21b46c8fd1bd136abc631acf27e188d47c3936db090bf3e1ede11d15ce9eae9bffdc4bfe1b9dc66ca9cb
+  languageName: node
+  linkType: hard
+
 "file-loader@npm:^6.2.0":
   version: 6.2.0
   resolution: "file-loader@npm:6.2.0"
@@ -14023,6 +14075,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stackframe@npm:^1.3.4":
+  version: 1.3.4
+  resolution: "stackframe@npm:1.3.4"
+  checksum: 29ca71c1fd17974c1c178df0236b1407bc65f6ea389cc43dec000def6e42ff548d4453de9a85b76469e2ae2b2abdd802c6b6f3db947c05794efbd740d1cf4121
+  languageName: node
+  linkType: hard
+
 "statuses@npm:2.0.1":
   version: 2.0.1
   resolution: "statuses@npm:2.0.1"
@@ -14968,6 +15027,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"web-vitals@npm:^4.2.3":
+  version: 4.2.4
+  resolution: "web-vitals@npm:4.2.4"
+  checksum: 68cd1c2625a04b26e7eab67110623396afc6c9ef8c3a76f4e780aefe5b7d4ca1691737a0b99119e1d1ca9a463c4d468c0f0090b1875b6d784589d3a4a8503313
+  languageName: node
+  linkType: hard
+
 "web-worker@npm:^1.2.0":
   version: 1.3.0
   resolution: "web-worker@npm:1.3.0"