[CI] (6fb03e7) vue/movies

[wizard-ci-bot]

Automated wizard CI run

Source: scheduled
Trigger ID: 6fb03e7
App: vue/movies
App directory: apps/vue/movies
Workbench branch: wizard-ci-6fb03e7-vue-movies
Wizard branch: main
Context Mill branch: main
PostHog (MCP) branch: master
Timestamp: 2026-05-13T17:50:29.574Z
Duration: 266.1s

[wizard-ci-bot]

Now I have everything I need. Let me produce the evaluation.

---

PR Evaluation Report

Summary

This PR integrates PostHog analytics into a Vue 3 movies app. It adds posthog-js as a dependency, initializes it in main.js with env-var-based configuration, instruments 7 custom events across authentication, search, and content views, sets up user identification on login with reset() on logout, and adds error tracking via Vue's global error handler.

Files changed	Lines added	Lines removed
9	+90	-5

Confidence score: 4/5 👍

• username used as distinct_id: posthog.identify(sanitizedUsername) uses a raw username string as the distinct ID. In this fake-auth app any user can type any string, producing fragmented, unreliable identity data. A stable user ID (e.g., from a database) would be appropriate for a real app — though given the fake auth, this is the only identifier available. [MEDIUM]
• username in event properties is PII: posthog.capture('user_logged_in', { username: sanitizedUsername }) sends a username (which may be a real name) as an event property. PII should be set via person properties in identify(), not in capture() calls. [MEDIUM]
• No .env.example file: The .env is gitignored but no .env.example documents the required VITE_POSTHOG_PROJECT_TOKEN and VITE_POSTHOG_HOST variables for other developers. [MEDIUM]
• No reverse proxy configured: The client-only app sends analytics directly to us.i.posthog.com, making it susceptible to ad blockers. [MEDIUM]

---

File changes

Filename	Score	Description
src/main.js	4/5	PostHog initialization with env vars and Vue error handler for exception tracking
src/composables/useAuth.ts	3/5	Identify on login, reset on logout, but username as distinct_id and PII in capture
src/views/LoginView.vue	4/5	login_failed event with error message
src/views/SearchView.vue	4/5	search_performed event with query and result count
src/views/MediaDetailView.vue	4/5	media_detail_viewed and trailer_played events with rich properties
src/components/media/MediaCard.vue	4/5	media_card_clicked event on card navigation
package.json	5/5	posthog-js dependency added
.gitignore	5/5	.env excluded from version control
posthog-setup-report.md	N/A	Setup report, not code

---

App sanity check ⚠️

Criteria	Result	Description
App builds and runs	Yes	posthog-js added to dependencies, imports valid, no syntax issues
Preserves existing env vars & configs	Yes	Only additive changes; existing code preserved
No syntax or type errors	Yes	All Vue SFC and TS files are syntactically correct
Correct imports/exports	Yes	posthog-js imported correctly in all client-side files
Minimal, focused changes	Yes	All changes relate to PostHog integration
Pre-existing issues	None	—

Issues

• No .env.example file: The required env vars VITE_POSTHOG_PROJECT_TOKEN and VITE_POSTHOG_HOST are not documented in any committed file. A .env.example should be added. [MEDIUM]

Other completed criteria

• Build configuration (package.json) is valid with posthog-js added correctly
• .gitignore properly updated to exclude .env
• No unnecessary formatting changes (minor whitespace normalization on two lines is negligible)

---

PostHog implementation ⚠️

Criteria	Result	Description
PostHog SDKs installed	Yes	posthog-js@^1.373.4 added to package.json
PostHog client initialized	Yes	posthog.init() in main.js with env vars and defaults: '2026-01-30'
capture()	Yes	7 meaningful capture calls across 5 files
identify()	Yes (with issues)	Called on login with sanitizedUsername; reset() on logout. However, uses raw username as distinct_id which can produce fragmented data
Error tracking	Yes	posthog.captureException(err) in Vue global app.config.errorHandler
Reverse proxy	No	No reverse proxy configured; direct calls to us.i.posthog.com are susceptible to ad blockers

Issues

• No reverse proxy: Client-only app sends requests directly to PostHog, which ad blockers can intercept. A Vite proxy or server-level reverse proxy should be configured to route /ingest to PostHog's API. [MEDIUM]
• Raw username as distinct_id: posthog.identify(sanitizedUsername) uses an arbitrary user-typed string. In a real app this should be a stable database ID. Given the fake auth system, there's no better option, but this is fragile. [MEDIUM]
• No re-identification on page load: If a user refreshes the page while still "logged in" (username in localStorage), identify() is not called again, so the session may not be linked to the user until next login. [MEDIUM]

Other completed criteria

• API key loaded from import.meta.env.VITE_POSTHOG_PROJECT_TOKEN (not hardcoded)
• API host loaded from import.meta.env.VITE_POSTHOG_HOST with correct fallback
• posthog.reset() correctly called on logout before clearing state
• posthog.captureException() correctly used for error tracking
• defaults: '2026-01-30' included per current SDK best practices

---

PostHog insights and events ⚠️

Filename	PostHog events	Description
src/composables/useAuth.ts	user_logged_in, user_logged_out	Auth lifecycle events; login includes username (PII concern)
src/views/LoginView.vue	login_failed	Failed login attempts with error message
src/views/SearchView.vue	search_performed	Search with query text and result count
src/views/MediaDetailView.vue	media_detail_viewed, trailer_played	Content engagement with media_id, type, title, genres
src/components/media/MediaCard.vue	media_card_clicked	Navigation tracking with media_id, type, title
src/main.js	captureException	Uncaught Vue component errors

Issues

• PII in capture properties: user_logged_in event includes { username: sanitizedUsername } — usernames can be PII (real names, emails). This should be set as a person property via identify() (which is already called), not as an event property. [MEDIUM]

Other completed criteria

• Events represent real user actions (login, logout, search, view detail, play trailer, click card)
• Events enable product insights (login→view→trailer funnel, search success rates, content popularity)
• Events include relevant enrichment properties (media_id, media_type, title, genres, query, result_count)
• Event names are descriptive and use consistent snake_case convention

---

Reviewed by wizard workbench PR evaluator