chore: add desktop app analytics (#978)

web/containers/Providers/index.tsx

@@ -6,6 +6,8 @@ import { Toaster } from 'react-hot-toast'
 
 import { TooltipProvider } from '@janhq/uikit'
 
+import { PostHogProvider } from 'posthog-js/react'
+
 import EventListenerWrapper from '@/containers/Providers/EventListener'
 import JotaiWrapper from '@/containers/Providers/Jotai'
 import ThemeWrapper from '@/containers/Providers/Theme'
@@ -18,6 +20,8 @@ import {
   setupBaseExtensions,
 } from '@/services/extensionService'
 
+import { instance } from '@/utils/posthog'
+
 import { extensionManager } from '@/extension'
 
 const Providers = (props: PropsWithChildren) => {
@@ -63,18 +67,20 @@ const Providers = (props: PropsWithChildren) => {
   }, [setupCore])
 
   return (
-    <JotaiWrapper>
+    <PostHogProvider client={instance}>
-      <ThemeWrapper>
+      <JotaiWrapper>
-        {setupCore && activated && (
+        <ThemeWrapper>
-          <FeatureToggleWrapper>
+          {setupCore && activated && (
-            <EventListenerWrapper>
+            <FeatureToggleWrapper>
-              <TooltipProvider>{children}</TooltipProvider>
+              <EventListenerWrapper>
-            </EventListenerWrapper>
+                <TooltipProvider>{children}</TooltipProvider>
-            <Toaster position="top-right" />
+              </EventListenerWrapper>
-          </FeatureToggleWrapper>
+              <Toaster position="top-right" />
-        )}
+            </FeatureToggleWrapper>
-      </ThemeWrapper>
+          )}
-    </JotaiWrapper>
+        </ThemeWrapper>
+      </JotaiWrapper>
+    </PostHogProvider>
   )
 }
 

web/next.config.js

@@ -28,6 +28,12 @@ const nextConfig = {
           'https://cdn.jsdelivr.net/npm/@janhq/plugin-catalog@latest/dist/index.js'
         ),
         VERSION: JSON.stringify(packageJson.version),
+        ANALYTICS_ID:
+          process.env.ANALYTICS_ID ??
+          JSON.stringify('phc_cJ95zWbMwdef6nVasPCoSNOvV8lUcL5IykIYOoyGXVm'),
+        ANALYTICS_HOST:
+          process.env.ANALYTICS_HOST ??
+          JSON.stringify('https://app.posthog.com'),
       }),
     ]
     return config

web/package.json

@@ -29,6 +29,7 @@
     "next": "14.0.1",
     "next-themes": "^0.2.1",
     "postcss": "8.4.31",
+    "posthog-js": "^1.95.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.47.0",

web/types/index.d.ts

@@ -6,6 +6,8 @@ export {}
 declare global {
   declare const PLUGIN_CATALOG: string
   declare const VERSION: string
+  declare const ANALYTICS_ID: string
+  declare const ANALYTICS_HOST: string
   interface Core {
     api: APIFunctions
     events: EventEmitter

web/utils/posthog.ts

@@ -0,0 +1,15 @@
+import posthog, { Properties } from 'posthog-js'
+
+posthog.init(ANALYTICS_ID, {
+  api_host: ANALYTICS_HOST,
+})
+
+export const instance = posthog
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const trackEvent = (name: string, properties?: Properties) => {
+  posthog.capture(name, properties)
+}
+
+export enum AnalyticsEvent {
+}