feat(web-analytics): Add Web Vitals to the toolbar #28173

rafaeelaudibert · 2025-02-01T03:25:01Z

We can now look at web vitals from our toolbar. It'll display information from the current page run but also from the last 7 days in that specific page.

This is hidden behind a separate FF so this should be pretty safe to merge

greptile-apps

PR Summary

This PR adds Web Vitals monitoring functionality to the PostHog toolbar, enabling users to view performance metrics for both current page loads and historical data from the last 7 days.

Key points to address:

API endpoint /api/web_vitals.py uses CALCULATE_BLOCKING_ALWAYS which could impact performance - consider using non-blocking calculation mode
The web_vitals scope in scopes.py needs proper RBAC implementation with access control restrictions and documentation
Missing validation for required pathname parameter in web vitals API endpoint
The ModelViewSet in web_vitals.py exposes unnecessary HTTP methods since only list() is implemented
Dynamic color class generation in WebVitalsToolbarMenu.tsx using template literals could pose security risks if not properly sanitized

_{34 file(s) reviewed, 19 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

frontend/src/lib/lemon-ui/Spinner/Spinner.scss

frontend/src/lib/lemon-ui/Spinner/Spinner.tsx

frontend/src/lib/constants.tsx

greptile-apps · 2025-02-01T03:27:43Z

frontend/src/scenes/settings/user/personalAPIKeysLogic.tsx

@@ -99,6 +99,7 @@ export const APIScopes: APIScope[] = [
        },
    },
    { key: 'webhook', info: 'Webhook configuration is currently only enabled for the Zapier integration.' },
+    { key: 'web_vitals' },


logic: The web_vitals scope is added without any access control restrictions or documentation. Consider adding disabledActions, description, and potential warnings about data access.

@zlwaterfield that's where I need you. Do I need to do anything here?

I haven't worked much with the api scopes, what is your goal? Does the toolbar load data through personal API keys?

I thought this was RBAC related, so that's why I tagged you, my apologies hahah

It uses the same temporary_token other toolbar stuff is using, so I don't think I'm using personal API Keys

frontend/src/toolbar/ToolbarApp.tsx

posthog/api/__init__.py

posthog/api/web_vitals.py

greptile-apps · 2025-02-01T03:32:36Z

posthog/api/web_vitals.py

+from posthog.hogql_queries.query_runner import get_query_runner, ExecutionMode
+
+
+class WebVitalsViewSet(TeamAndOrgViewSetMixin, viewsets.ModelViewSet):


style: ModelViewSet exposes all CRUD methods but only list() is implemented. Consider using ReadOnlyModelViewSet instead

Question to those with more REST Django knowledge than I have (nil), do I actually need to inherit anything here?

Because you're not actually representing a Django model with this viewset, you should not be inheriting from ModelViewSet – just GenericViewSet

posthog/api/web_vitals.py

github-actions · 2025-02-01T04:53:02Z

Size Change: +5.85 kB (+0.5%)

Total Size: 1.17 MB

Filename	Size	Change
`frontend/dist/toolbar.js`	1.17 MB	+5.85 kB (+0.5%)

_{compressed-size-action}

posthog-bot · 2025-02-01T05:54:59Z

📸 UI snapshots have been updated

10 snapshot changes in total. 0 added, 10 modified, 0 deleted:

chromium: 0 added, 10 modified, 0 deleted (diff for shard 2)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

rafaeelaudibert · 2025-02-01T07:17:46Z

frontend/src/lib/constants.tsx

    WEB_REVENUE_TRACKING: 'web-revenue-tracking', // owner: @robbie-c #team-web-analytics
    LLM_OBSERVABILITY: 'llm-observability', // owner: #team-ai-product-manager
-    ONBOARDING_SESSION_REPLAY_SEPERATE_STEP: 'onboarding-session-replay-separate-step', // owner: @joshsny #team-growth
+    ONBOARDING_SESSION_REPLAY_SEPARATE_STEP: 'onboarding-session-replay-separate-step', // owner: @joshsny #team-growth


@joshsny Updated this because greptile was complaining about it, hope you don't mind

frontend/src/lib/lemon-ui/Spinner/Spinner.scss

posthog/api/__init__.py

Per #28173 (comment)

frontend/src/toolbar/Toolbar.stories.tsx

frontend/src/toolbar/web-vitals/webVitalsToolbarLogic.ts

posthog/api/web_vitals.py

We can customize the spinner speed now, just pass a "${number}s" string, it's 1s by default

We'll be adding a new Web Vitals section to the toolbar, but let's keep it hidden behind a FF

We had some leftovers functions inside `webAnalyticsLogic`, let's keep them inside `nodes/WebVitals/definitions.ts` instead, it makes more sense and simplifies the whole import/export dance

This endpoint can be used to collect information from the most recent 7 days of data for your Web Vitals, this is used in the toolbar

I'm using this locally, it helps with my workflow, let's stop having this in my git stash all the time

We can now look at web vitals from our toolbar. It'll display information from the current page run but also from the last 7 days in that specific page.

After rebasing on master we had to fix this

This will return more reasonable values to the UI

The previous value was better for local testing, but we should use the cached value in production

We never write, so let's remove some endpoints we don't need

This caused our storybook tests to never finish running, see https://github.com/PostHog/posthog/actions/runs/13085431533/job/36515998085?pr=28173

Make some of the metrics yellow/red

Align with the existing `--spinner-color` var

We're not inheriting from a Django model or anything, so let's use the generic viewset instead

Per #28173 (comment)

posthog-bot · 2025-02-03T20:47:47Z

📸 UI snapshots have been updated

1 snapshot changes in total. 0 added, 1 modified, 0 deleted:

chromium: 0 added, 1 modified, 0 deleted (diff for shard 2)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

Addressed

Twixes

I don't see blockers anymore, but gonna let @robbie-c give the final ✅, since you two are much closer working on web analytics 😄

robbie-c · 2025-02-04T12:27:10Z

frontend/src/queries/nodes/WebVitals/definitions.ts

-    threshold: WebVitalsThreshold
-): WebVitalsMetricBand | 'none' => {
+export const getMetricBand = (value: number | undefined, metric: WebVitalsMetric): WebVitalsMetricBand | 'none' => {
+    const threshold = WEB_VITALS_THRESHOLDS[metric]


👍 to moving this lookup here (and below in getThresholdColor), I think it makes everything that calls it feel cleaner

robbie-c · 2025-02-04T12:28:44Z

frontend/src/toolbar/bar/Toolbar.scss

        --toolbar-width-expanded: 334px;
    }

+    &--with-experiments-and-web-vitals {


hmm, this approach is probably fine for now but seems unscalable 😅

Yeah, I agree hahah, but I expect Web Vitals and Experiments to go out of beta eventually, and then we can revert this :)

robbie-c · 2025-02-04T12:34:16Z

posthog/api/web_vitals.py

+
+# This is a simple wrapper around a basic query, so that's why `scope_object = "query"`
+# This `Viewset` does need to exist, however, because we need to support the `TemporaryTokenAuthentication` method
+class WebVitalsViewSet(TeamAndOrgViewSetMixin, viewsets.GenericViewSet):


I don't feel super able to review this part, I've not touched this part of django, but if @Twixes is happy then so am I

robbie-c · 2025-02-04T12:35:40Z

posthog/models/scopes.py

@@ -1,9 +1,3 @@
-## API Scopes


Why get rid of the comment?

It's duplicated below

pauldambra · 2025-02-04T12:44:18Z

this is cool... now i want to be able to get this data for prod while i have the toolbar on my local dev env!

rafaeelaudibert · 2025-02-04T12:52:46Z

this is cool... now i want to be able to get this data for prod while i have the toolbar on my local dev env!

If someone is storing local/prod data in the same PH project then this is going to work :). Not sure it'll interact well with environments tho

sentry-io · 2025-02-04T13:31:05Z

Suspect Issues

This pull request was deployed and Sentry observed the following issues:

‼️ CHQueryErrorIllegalTypeOfArgument: DB::Exception: Illegal type String of argument for aggregate function quantile. Stack trace: /api/environments/{parent_lookup_team_id}/web_v... View Issue
‼️ EOFError: Unexpected EOF while reading bytes /api/environments/{parent_lookup_team_id}/web_v... View Issue
‼️ CHQueryErrorTimeoutExceeded: DB::Exception: Timeout exceeded: elapsed 78.871700516 seconds, maximum: 60. Stack trace: /api/environments/{parent_lookup_team_id}/web_v... View Issue
‼️ SocketTimeoutError: (ch-online.posthog.net:9440) /api/environments/{parent_lookup_team_id}/web_v... View Issue
‼️ NetworkError: Connection refused (ch-online.posthog.net:9440) /api/environments/{parent_lookup_team_id}/web_v... View Issue

_{Did you find this useful? React with a 👍 or 👎}

rafaeelaudibert added the team/web-analytics label Feb 1, 2025

rafaeelaudibert requested review from robbie-c and zlwaterfield February 1, 2025 03:25

rafaeelaudibert force-pushed the web-analytics-on-toolbar branch from b6f5d8e to 0e5f934 Compare February 1, 2025 03:27

greptile-apps bot reviewed Feb 1, 2025

View reviewed changes

rafaeelaudibert force-pushed the web-analytics-on-toolbar branch 2 times, most recently from 35b706b to 662912e Compare February 1, 2025 04:01

PostHog deleted a comment from posthog-bot Feb 1, 2025

rafaeelaudibert force-pushed the web-analytics-on-toolbar branch from 8bdcbb2 to aa73914 Compare February 1, 2025 04:39

rafaeelaudibert commented Feb 1, 2025

View reviewed changes

Twixes previously requested changes Feb 3, 2025

View reviewed changes

frontend/src/lib/lemon-ui/Spinner/Spinner.scss Outdated Show resolved Hide resolved

posthog/api/__init__.py Outdated Show resolved Hide resolved

rafaeelaudibert added a commit that referenced this pull request Feb 3, 2025

fix: Properly register new endpoint under environments_router

b8b6b68

Per #28173 (comment)

rafaeelaudibert requested a review from Twixes February 3, 2025 15:02

Twixes reviewed Feb 3, 2025

View reviewed changes

frontend/src/toolbar/Toolbar.stories.tsx Outdated Show resolved Hide resolved

frontend/src/toolbar/web-vitals/webVitalsToolbarLogic.ts Outdated Show resolved Hide resolved

Twixes reviewed Feb 3, 2025

View reviewed changes

posthog/api/web_vitals.py Outdated Show resolved Hide resolved

rafaeelaudibert added 13 commits February 3, 2025 17:11

feat: Allow spinner speed to be customizable

e2cee3c

We can customize the spinner speed now, just pass a "${number}s" string, it's 1s by default

feat(web-analytics): Add new web-vitals-toolbar FF

85a3fb9

We'll be adding a new Web Vitals section to the toolbar, but let's keep it hidden behind a FF

refactor: Move functions to definitions.ts

11bd0ef

We had some leftovers functions inside `webAnalyticsLogic`, let's keep them inside `nodes/WebVitals/definitions.ts` instead, it makes more sense and simplifies the whole import/export dance

feat: Add new /web_vitals endpoint

9bc971a

This endpoint can be used to collect information from the most recent 7 days of data for your Web Vitals, this is used in the toolbar

chore: Add "no typegen" build for VSCode

521a5dd

I'm using this locally, it helps with my workflow, let's stop having this in my git stash all the time

feat: Add Web Vitals to the toolbar

3dffe2b

We can now look at web vitals from our toolbar. It'll display information from the current page run but also from the last 7 days in that specific page.

fix: Use new version of function

1f71c3a

After rebasing on master we had to fix this

feat: Use cleaned path operator

d7fc300

This will return more reasonable values to the UI

refactor: Use cached value if existent on web_vitals.py

04dcb65

The previous value was better for local testing, but we should use the cached value in production

fix: typo

18c5b61

style: Simplify scss rule

3345b1d

fix: Remove FF inconsistency

d20a8bf

refactor: Use more restrictive viewset

6a574e5

We never write, so let's remove some endpoints we don't need

rafaeelaudibert and others added 14 commits February 3, 2025 17:11

refactor: Throw manual 500 on missing data

653a54b

fix: Import without tsx

0482d9d

tests: Add missing FF for Toolbar snapshots

2ded152

Update query snapshots

205c09c

fix: Avoid rendering Spinner on storybook

e0ec574

This caused our storybook tests to never finish running, see https://github.com/PostHog/posthog/actions/runs/13085431533/job/36515998085?pr=28173

Update UI snapshots for chromium (2)

e534aa7

tests: Add some color to tests

e187304

Make some of the metrics yellow/red

refactor: Rename var to --spinner-speed

726e18f

Align with the existing `--spinner-color` var

fix: Inherit from GenericViewSet

e8ba351

We're not inheriting from a Django model or anything, so let's use the generic viewset instead

fix: Properly register new endpoint under environments_router

5e58551

Per #28173 (comment)

Update query snapshots

1bad7b6

fix: Handle required pathname parameter

538bc41

fix: Use correct /environments endpoint

c5b4fdc

refactor: Use query scope for WebVitals toolbar API endpoint

42d0a43

rafaeelaudibert force-pushed the web-analytics-on-toolbar branch from 8d3b3b3 to 42d0a43 Compare February 3, 2025 20:29

rafaeelaudibert requested a review from Twixes February 3, 2025 20:29

github-actions bot added 2 commits February 3, 2025 20:43

Update query snapshots

422fa24

Update UI snapshots for chromium (2)

647ee02

rafaeelaudibert requested a review from pauldambra February 3, 2025 21:40

Twixes reviewed Feb 4, 2025

View reviewed changes

robbie-c approved these changes Feb 4, 2025

View reviewed changes

rafaeelaudibert merged commit c8cd8f8 into master Feb 4, 2025
101 checks passed

rafaeelaudibert deleted the web-analytics-on-toolbar branch February 4, 2025 13:11

rafaeelaudibert mentioned this pull request Feb 5, 2025

Sprint - Feb 10 - Feb 21 #28311

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(web-analytics): Add Web Vitals to the toolbar #28173

feat(web-analytics): Add Web Vitals to the toolbar #28173

rafaeelaudibert commented Feb 1, 2025 •

edited

Loading

greptile-apps bot left a comment

greptile-apps bot Feb 1, 2025

rafaeelaudibert Feb 1, 2025

zlwaterfield Feb 3, 2025

rafaeelaudibert Feb 3, 2025

greptile-apps bot Feb 1, 2025

rafaeelaudibert Feb 1, 2025

Twixes Feb 3, 2025

github-actions bot commented Feb 1, 2025 •

edited

Loading

posthog-bot commented Feb 1, 2025

rafaeelaudibert Feb 1, 2025

posthog-bot commented Feb 3, 2025

Twixes left a comment

robbie-c Feb 4, 2025

robbie-c Feb 4, 2025

rafaeelaudibert Feb 4, 2025

robbie-c Feb 4, 2025

robbie-c Feb 4, 2025

rafaeelaudibert Feb 4, 2025

pauldambra commented Feb 4, 2025

rafaeelaudibert commented Feb 4, 2025

sentry-io bot commented Feb 4, 2025 •

edited

Loading

		from posthog.hogql_queries.query_runner import get_query_runner, ExecutionMode


		class WebVitalsViewSet(TeamAndOrgViewSetMixin, viewsets.ModelViewSet):

feat(web-analytics): Add Web Vitals to the toolbar #28173

feat(web-analytics): Add Web Vitals to the toolbar #28173

Conversation

rafaeelaudibert commented Feb 1, 2025 • edited Loading

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

greptile-apps bot Feb 1, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

greptile-apps bot Feb 1, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Feb 1, 2025 • edited Loading

posthog-bot commented Feb 1, 2025

📸 UI snapshots have been updated

Choose a reason for hiding this comment

posthog-bot commented Feb 3, 2025

📸 UI snapshots have been updated

Twixes left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pauldambra commented Feb 4, 2025

rafaeelaudibert commented Feb 4, 2025

sentry-io bot commented Feb 4, 2025 • edited Loading

Suspect Issues

rafaeelaudibert commented Feb 1, 2025 •

edited

Loading

github-actions bot commented Feb 1, 2025 •

edited

Loading

sentry-io bot commented Feb 4, 2025 •

edited

Loading