wizard-ci-bot · Oct 28, 2026
@@ -0,0 +1,2 @@
+NUXT_PUBLIC_POSTHOG_PROJECT_TOKEN=
+NUXT_PUBLIC_POSTHOG_HOST=
@@ -1,5 +1,11 @@
 <script setup lang="ts">
 const { user, logout } = useAuth()
+const { $posthog } = useNuxtApp()
+
+async function handleLogout() {
+  await logout()
+  $posthog?.capture('logout_completed')
+}
 </script>
 
 <template>
@@ -37,9 +43,9 @@ const { user, logout } = useAuth()
     <div v-if="user" class="flex items-center gap-2">
       <span class="text-sm text-gray-400">{{ user }}</span>
       <button
-        @click="logout"
         class="i-ph-sign-out text-2xl hover:text-primary cursor-pointer"
         title="Logout"
+        @click="handleLogout"
       />
     </div>
   </div>

@@ -5,11 +5,20 @@ defineProps<{
   type: MediaType
   item: Media
 }>()
+
+const { $posthog } = useNuxtApp()
+
+function trackMediaSelection(mediaType: MediaType) {
+  $posthog?.capture('media_selected', {
+    media_type: mediaType,
+  })
+}
 </script>
 
 <template>
   <NuxtLink
     :to="`/${item.media_type || type}/${item.id}`" pb2
+    @click="trackMediaSelection(item.media_type || type)"
   >
     <div
       block bg-gray4:10 p1

@@ -6,7 +6,12 @@ const props = defineProps<{
 }>()
 
 const showModal = useIframeModal()
+const { $posthog } = useNuxtApp()
+
 function play() {
+  $posthog?.capture('video_playback_opened', {
+    video_type: props.item.type,
+  })
   return showModal(getVideoLink(props.item)!)
 }
 </script>

@@ -21,6 +21,10 @@ export default defineNuxtConfig({
   runtimeConfig: {
     public: {
       apiBaseUrl,
+      posthog: {
+        publicKey: process.env.NUXT_PUBLIC_POSTHOG_PROJECT_TOKEN,
+        host: process.env.NUXT_PUBLIC_POSTHOG_HOST,
+      },
     },
   },
   devtools: {

@@ -10,6 +10,15 @@
     "lint": "eslint .",
     "typecheck": "vue-tsc --noEmit"
   },
+  "dependencies": {
+    "@opentelemetry/api-logs": "^0.223.0",
+    "@opentelemetry/exporter-logs-otlp-http": "^0.300.0",
+    "@opentelemetry/resources": "^3.0.0",
+    "@opentelemetry/sdk-logs": "^3.0.0",
+    "@opentelemetry/sdk-node": "^0.300.0",
+    "posthog-js": "^1.441.2",
+    "posthog-node": "^5.58.0"
+  },
   "devDependencies": {
     "@antfu/eslint-config": "^0.39.5",
     "@iconify-json/carbon": "^1.1.17",

@@ -4,16 +4,23 @@ const password = ref('')
 const error = ref('')
 const loading = ref(false)
 const { login } = useAuth()
+const { $posthog } = useNuxtApp()
 
-const handleLogin = async () => {
+async function handleLogin() {
   error.value = ''
   loading.value = true
 
   try {
     await login(username.value, password.value)
-  } catch (e: any) {
+    $posthog?.capture('login_succeeded')
+    $posthog?.logger.info('Login completed', { source: 'login_form' })
+  }
+  catch (e: any) {
     error.value = e.message || 'Login failed'
-  } finally {
+    $posthog?.capture('login_failed')
+    $posthog?.logger.warn('Login rejected', { source: 'login_form' })
+  }
+  finally {
     loading.value = false
   }
 }
@@ -48,7 +55,7 @@ const handleLogin = async () => {
               :disabled="loading"
             />
           </div>
-          
+
           <div>
             <label for="password" class="block text-sm font-medium text-gray-300 mb-2">
               Password

@@ -9,12 +9,19 @@ const count = ref<undefined | number>()
 
 const items = ref<Media[]>([])
 const currentSearch = ref(input.value)
+const { $posthog } = useNuxtApp()
 
 function search() {
   if (currentSearch.value === input.value)
     return
 
   currentSearch.value = input.value.toString()
+  $posthog?.capture('search_submitted', {
+    query_length: currentSearch.value.length,
+  })
+  $posthog?.logger.info('Search submitted', {
+    query_length: currentSearch.value.length,
+  })
   count.value = undefined
   items.value = []
   router.replace({ query: { s: input.value } })

@@ -0,0 +1,43 @@
+import posthog from 'posthog-js'
+import type { PostHog, PostHogInterface } from 'posthog-js'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const runtimeConfig = useRuntimeConfig()
+  const projectToken = runtimeConfig.public.posthog?.publicKey
+  const host = runtimeConfig.public.posthog?.host
+  const isDev = process.env.NODE_ENV === 'development'
+
+  if (!projectToken || !host) {
+    if (isDev) {
+      if (!projectToken)
+        console.error('NUXT_PUBLIC_POSTHOG_PROJECT_TOKEN variable required by PostHog is missing or un-configured, this causes events to be silently missed. This error stops appearing once NUXT_PUBLIC_POSTHOG_PROJECT_TOKEN is configured')
+
+      if (!host)
+        console.error('NUXT_PUBLIC_POSTHOG_HOST variable required by PostHog is missing or un-configured, this causes events to be silently missed. This error stops appearing once NUXT_PUBLIC_POSTHOG_HOST is configured')
+    }
+
+    return
+  }
+
+  const posthogClient = posthog.init(projectToken, {
+    api_host: host,
+    logs: {
+      serviceName: 'nuxt-movies-web',
+      environment: isDev ? 'development' : 'production',
+    },
+    loaded: (client: PostHogInterface) => {
+      if (isDev)
+        client.debug()
+    },
+  })
+
+  nuxtApp.hook('vue:error', (error) => {
+    posthogClient.captureException(error)
+  })
+
+  return {
+    provide: {
+      posthog: posthogClient as PostHog,
+    },
+  }
+})
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		NUXT_PUBLIC_POSTHOG_PROJECT_TOKEN=
		NUXT_PUBLIC_POSTHOG_HOST=