[CI] (0ae2102) vue/movies

[wizard-ci-bot]

Automated wizard CI run

Source: wizard-pr
Trigger ID: 0ae2102
App: vue/movies
App directory: apps/vue/movies
Workbench branch: wizard-ci-0ae2102-vue-movies
Wizard branch: release-please--branches--main--components--wizard
Context Mill branch: main
PostHog (MCP) branch: master
Timestamp: 2026-04-15T19:44:58.703Z
Duration: 263.3s

[wizard-ci-bot]

PR Evaluation Report

Summary

This PR integrates PostHog into a Vue 3 movies app by installing posthog-js, initializing it in main.js with environment-variable-based configuration, and adding event tracking across navigation, search, media detail views, authentication flows, and error handling via a global Vue error handler.

Files changed	Lines added	Lines removed
10	+128	-5

Confidence score: 4/5 👍

• posthog.identify() uses raw username as distinct_id: The identify() call in useAuth.ts passes sanitizedUsername (a user-typed string) as the distinct ID. Usernames are not stable, unique database IDs — they're user-generated content that can change, collide, or contain PII. This causes fragmented or incorrectly merged user profiles. Should use a stable user ID from the database/auth system. [CRITICAL]
• PII (username) sent in user_logged_in event properties: The posthog.capture('user_logged_in', { username: sanitizedUsername }) call sends the username as an event property. Usernames should be set as person properties via identify() or setPersonProperties(), not in capture() event properties. [MEDIUM]
• No .env.example committed: The .env file is gitignored (correctly), but no .env.example file is committed to the repo, so other developers won't know which environment variables (VITE_POSTHOG_PROJECT_TOKEN, VITE_POSTHOG_HOST) are required. The report mentions .env was created but it's not in the diff. [MEDIUM]
• No reverse proxy configured: For a client-only SPA, a reverse proxy would prevent ad blockers from blocking PostHog requests. This is missing. [MEDIUM]
• No identify() call on app load for existing sessions: identify() is only called during login. If a user refreshes the page while already logged in (session persisted in localStorage), events will be anonymous until next login. Should check localStorage for existing auth on app init and call identify(). [MEDIUM]

---

File changes

Filename	Score	Description
apps/vue/movies/package.json	5/5	Adds posthog-js ^1.369.0 dependency correctly
apps/vue/movies/.gitignore	5/5	Adds .env to gitignore — appropriate
apps/vue/movies/src/main.js	4/5	Initializes PostHog with env vars, adds defaults option, global error handler. Missing identify on app load for returning users.
apps/vue/movies/src/composables/useAuth.ts	2/5	Adds identify/reset/capture but uses raw username as distinct_id and leaks username into event properties
apps/vue/movies/src/views/LoginView.vue	4/5	Captures login_failed with error context
apps/vue/movies/src/views/MediaDetailView.vue	4/5	Captures media detail views, trailer play/close with good properties
apps/vue/movies/src/views/SearchView.vue	4/5	Captures search events with query and result count
apps/vue/movies/src/components/media/MediaCard.vue	4/5	Captures card clicks with media context
apps/vue/movies/src/components/NavBar.vue	4/5	Captures navigation clicks with section name
apps/vue/movies/posthog-setup-report.md	3/5	Setup report, not code — acceptable wizard artifact

---

App sanity check ⚠️

Criteria	Result	Description
App builds and runs	Yes	No syntax errors; posthog-js added to dependencies; imports are valid
Preserves existing env vars & configs	Yes	Only additive changes; existing functionality preserved
No syntax or type errors	Yes	All changes are valid Vue 3 / TypeScript / JavaScript syntax
Correct imports/exports	Yes	import posthog from 'posthog-js' is the correct browser import
Minimal, focused changes	Yes	All changes directly relate to PostHog integration
Pre-existing issues	None	N/A

Issues

• No .env.example file committed: The .env is correctly gitignored, but no .env.example template is provided for other developers to know what environment variables are needed. [MEDIUM]

Other completed criteria

• All changes are relevant to PostHog integration
• Correct files modified for Vue 3 framework (main.js, composables, views, components)
• No unnecessary modifications or gratuitous reformatting (one whitespace change in useAuth.ts is trivial)
• Code follows existing codebase patterns (Vue 3 Composition API with <script setup>)
• Build configuration (package.json) is valid

---

PostHog implementation ⚠️

Criteria	Result	Description
PostHog SDKs installed	Yes	posthog-js ^1.369.0 added to package.json dependencies
PostHog client initialized	Yes	posthog.init() called in main.js with env vars and defaults: '2026-01-30'
capture()	Yes	10 meaningful capture calls across navigation, search, media, auth, and error flows
identify()	No	Uses raw username string as distinct_id — should use a stable database/auth ID. Also missing identify() on page load for returning users already in localStorage
Error tracking	Yes	Global app.config.errorHandler calls posthog.captureException(err) for uncaught Vue errors
Reverse proxy	No	No reverse proxy configured — client-only SPA would benefit from one to avoid ad blocker interference

Issues

• Username used as distinct_id: posthog.identify(sanitizedUsername) uses a raw user-typed username as the distinct ID. This is fragile — usernames can change, may not be unique across systems, and are essentially PII being used as an identifier. A stable user ID (database primary key, UUID from auth provider) should be used instead. [CRITICAL]
• No identify() on app reload: When a returning user loads the app and their session is restored from localStorage, no identify() call is made. All events until the next login will be anonymous. The app should check for an existing auth user in main.js or a root component and call posthog.identify(). [MEDIUM]
• No reverse proxy: A client-only Vue SPA sends all PostHog requests directly from the browser, making them susceptible to ad blockers. A reverse proxy (e.g., via Vite dev server proxy or Nginx config) should be configured. [MEDIUM]

Other completed criteria

• API key loaded from import.meta.env.VITE_POSTHOG_PROJECT_TOKEN (not hardcoded)
• Host correctly configured via import.meta.env.VITE_POSTHOG_HOST with fallback to https://us.i.posthog.com
• posthog.reset() called on logout — correct pattern
• defaults: '2026-01-30' configuration option included per current SDK docs

---

PostHog insights and events ⚠️

Filename	PostHog events	Description
src/main.js	captureException	Global Vue error handler captures uncaught exceptions
src/composables/useAuth.ts	user_logged_in, user_logged_out	Auth lifecycle events with identify/reset
src/views/LoginView.vue	login_failed	Failed login attempts with error message
src/views/SearchView.vue	search_performed, search_results_empty	Search actions with query and result count
src/views/MediaDetailView.vue	media_detail_viewed, trailer_played, trailer_closed	Content engagement with media context (id, type, title)
src/components/media/MediaCard.vue	media_card_clicked	Content discovery with media id, type, title
src/components/NavBar.vue	nav_section_clicked	Navigation engagement with section name

Issues

• PII in event properties (username): posthog.capture('user_logged_in', { username: sanitizedUsername }) sends a username as an event property. Per PostHog best practices, PII should only be set via person properties (in identify() or setPersonProperties()), not in capture() event properties. [MEDIUM]

Other completed criteria

• Events represent real user actions (login, search, view content, play trailer, navigate)
• Events enable product insights (login funnel, search success rate, content engagement, trailer engagement)
• Events include relevant contextual properties (media_id, media_type, query, result_count)
• Event names are descriptive and follow consistent snake_case convention
• No other PII issues beyond the username in user_logged_in

---

Reviewed by wizard workbench PR evaluator