[CI] (e2f7ab0) vue/movies

[wizard-ci-bot]

Automated wizard CI run

Source: wizard-pr
Trigger ID: e2f7ab0
App: vue/movies
App directory: apps/vue/movies
Workbench branch: wizard-ci-e2f7ab0-vue-movies
Wizard branch: release-please--branches--main--components--wizard
Context Mill branch: main
PostHog (MCP) branch: master
Timestamp: 2026-07-06T22:20:59.372Z
Duration: 287.3s

YARA Scanner

✓ 112 tool calls scanned, 0 violations detected

No violations: ✓ 112 clean scans

[wizard-ci-bot]

Now I have enough context. Let me note the issues:

1. Hardcoded API key in .env — the .env file contains a real API key but it's not committed in this PR (not in the changed files list). However, no .env.example was created.

2. type.value used in template — In MediaDetailView.vue line 219, :query="{ title: 'Recommendations', query: 'recommendations', type: type.value as any }" and :type="type.value as any" — type is a computed() ref, so in the <template> section Vue auto-unwraps refs, meaning type.value should just be type. Using .value in the template will result in undefined.

3. identify uses username as distinct_id — the demo app uses the raw username string as the distinct_id, which in a real app could be problematic, but for this demo app it's the only user identifier available.

4. identify only on LoginView — the onMounted identify call is only in LoginView.vue, not in a root component, so returning users who navigate directly to other pages won't be identified.

5. No reverse proxy configured.

6. No .env.example was created/updated.

---

PR Evaluation Report

Summary

This PR integrates PostHog into a Vue 3 movies app using posthog-js. It initializes PostHog in main.js, adds user identification on login, posthog.reset() on logout, Vue's global errorHandler for exception tracking, and instruments 12 custom events across views and components covering login, search, media browsing, and trailer playback.

Files changed	Lines added	Lines removed
12	+197	-19

Confidence score: 3/5 🤔

• Template .value bug in MediaDetailView: The template uses type.value on a computed ref inside <template>, but Vue auto-unwraps refs in templates. type.value in the template resolves to undefined, breaking the :query and :type props on recommendation MediaCard components. Should be just type. [CRITICAL]
• No .env.example created: The env vars VITE_POSTHOG_PROJECT_TOKEN and VITE_POSTHOG_HOST are not documented in any .env.example file. Only a .env with a real key exists (not committed in this PR). [MEDIUM]
• Identify only on LoginView: The onMounted identify call in LoginView.vue only fires when a user navigates to the login page. Returning users who go directly to other pages will remain on anonymous distinct IDs for their entire session. The identify should be in a root-level component (e.g., App.vue). [MEDIUM]
• No reverse proxy configured: No reverse proxy is set up, making client-side events susceptible to ad blockers. [MEDIUM]

---

File changes

Filename	Score	Description
src/main.js	5/5	Initializes PostHog with env vars, defaults, and Vue global error handler
src/views/LoginView.vue	3/5	Adds identify on login and onMounted, but identify placement is suboptimal
src/components/NavBar.vue	5/5	Captures user_logged_out and calls posthog.reset() correctly
src/views/MediaDetailView.vue	2/5	Good event coverage but has template .value bug breaking recommendation props
src/views/HomeView.vue	5/5	Captures hero click and exception on load failure
src/views/SearchView.vue	5/5	Captures search events with useful properties
src/components/media/MediaCard.vue	4/5	Smart context-aware event naming based on query key
src/components/carousel/CarouselAutoQuery.vue	5/5	Captures carousel exploration and load exceptions
src/views/MediaListView.vue	5/5	Captures list load with result count
src/composables/useAuth.ts	4/5	Minor whitespace cleanup, no functional issues
package.json	5/5	posthog-js added correctly
posthog-setup-report.md	4/5	Good documentation of events and next steps

---

App sanity check ⚠️

Criteria	Result	Description
App builds and runs	No	Template .value bug on computed ref will cause undefined props at runtime for recommendation cards
Preserves existing env vars & configs	Yes	Existing configs preserved, PostHog additions are additive
No syntax or type errors	No	type.value in template is incorrect — Vue auto-unwraps refs in templates
Correct imports/exports	Yes	All posthog-js imports are correct
Minimal, focused changes	Yes	Changes are focused on PostHog integration
Pre-existing issues	None

Issues

• Template .value on computed ref: In MediaDetailView.vue template (line 219-220), :query="{ ... type: type.value as any }" and :type="type.value as any" use .value on a computed ref inside <template>. Vue auto-unwraps refs in templates, so type.value evaluates to undefined. This breaks the :type and :query props on all recommendation MediaCards. Fix: change type.value to just type in the template. [CRITICAL]

Other completed criteria

• All imports are from the correct posthog-js package
• package.json correctly adds posthog-js as a dependency
• Existing app logic (auth, routing, TMDB API) is preserved
• Changes are minimal and focused on PostHog integration
• Minor whitespace cleanup in useAuth.ts and removal of console.log in MediaDetailView.vue are reasonable

---

PostHog implementation ⚠️

Criteria	Result	Description
PostHog SDKs installed	Yes	posthog-js ^1.398.0 added to package.json
PostHog client initialized	Yes	posthog.init() in main.js with VITE_POSTHOG_PROJECT_TOKEN, VITE_POSTHOG_HOST, and defaults: '2026-05-30' — matches Vue.js docs pattern
capture()	Yes	12 meaningful custom events across login, browsing, search, and playback flows
identify()	Yes	posthog.identify() called on login with username; posthog.reset() called on logout
Error tracking	Yes	Vue global errorHandler calls posthog.captureException(), plus inline captureException in catch blocks throughout the app
Reverse proxy	No	No reverse proxy configured

Issues

• Identify only fires on LoginView: The onMounted identify in LoginView.vue only triggers when a user visits the login page. A returning user who navigates directly to / or any other page won't be identified. Move the identify logic to App.vue or a root-level component/router guard so it fires on every app load when the user is already authenticated. [MEDIUM]
• No reverse proxy: No reverse proxy is configured, leaving client-side events vulnerable to ad blockers. Per the Vue.js docs, a reverse proxy is recommended. [MEDIUM]
• No .env.example: The VITE_POSTHOG_PROJECT_TOKEN and VITE_POSTHOG_HOST env vars are not documented in a .env.example file for collaborators. [MEDIUM]

Other completed criteria

• API key loaded from import.meta.env.VITE_POSTHOG_PROJECT_TOKEN environment variable (not hardcoded)
• API host correctly configured via import.meta.env.VITE_POSTHOG_HOST
• Initialization happens before app mount, following Vue.js PostHog docs pattern
• posthog.reset() correctly called on logout
• Global Vue error handler with captureException is the correct pattern per Vue.js docs

---

PostHog insights and events ⚠️

Filename	PostHog events	Description
src/views/LoginView.vue	user_logged_in, login_failed, captureException	Captures successful login with method, failed login with reason and field presence, and login exceptions
src/components/NavBar.vue	user_logged_out	Captures logout with navigation context
src/views/HomeView.vue	hero_media_opened, captureException	Captures hero banner click with media details, exceptions on hero load failure
src/views/MediaListView.vue	media_list_loaded, captureException	Captures list load with result count and query info
src/components/media/MediaCard.vue	media_card_selected, search_result_selected, recommendation_selected	Context-aware event naming based on query key
src/views/MediaDetailView.vue	media_detail_viewed, trailer_played, captureException	Captures detail page views with genre count, trailer plays, and exceptions
src/views/SearchView.vue	search_performed, captureException	Captures search with query length and result count
src/components/carousel/CarouselAutoQuery.vue	carousel_more_clicked, captureException	Captures carousel exploration and load exceptions
src/main.js	captureException (global)	Vue global error handler captures all unhandled component exceptions

Issues

• No critical or medium issues with event quality.

Other completed criteria

• Events represent real user actions (login, search, browse, play trailer) that map to actual product flows
• Events enable product insights — login funnel (login → failed), content engagement funnel (list → card → detail → trailer), search behavior
• Events are enriched with relevant properties (media_id, media_type, result_count, query_length, etc.)
• No PII in event properties — usernames are only used in identify() person properties, not in capture() event properties
• Event names use consistent snake_case convention with descriptive action-oriented names

---

Reviewed by wizard workbench PR evaluator