Skip to content

feat(telemetry): add dev telemetry toolbar#937

Closed
everettbu wants to merge 13 commits into
masterfrom
feat/growth-591-dev-telemetry-toolbar
Closed

feat(telemetry): add dev telemetry toolbar#937
everettbu wants to merge 13 commits into
masterfrom
feat/growth-591-dev-telemetry-toolbar

Conversation

@everettbu

@everettbu everettbu commented Jan 28, 2026 •
edited
Loading

Copy link
Copy Markdown

Mirror of supabase/supabase#42259
Original author: seanoliver

Problem

We need a local-only UI to inspect client and server telemetry events and override flags during development without touching non-local env behavior. This work is intended to be shared across Studio, Docs, and WWW.

Changes

  • Introduced a shared dev-tools package with the Dev Telemetry Toolbar UI, trigger, and provider.
  • Wired the toolbar into Studio, Docs, and WWW app shells (local-only gating).
  • Added a local-only devTelemetry() opt-in with storage gating and SSE subscription.
  • Wired client PostHog events into a local listener and re-exported types.
  • Added local flag override cookie support in the UI and CODEOWNERS for the new package.
  • Added unit tests covering local/non-local behavior and flag utilities.

Testing

Manual (local only):

  • Start each app locally: pnpm dev:studio, pnpm dev:docs, pnpm dev:www
  • Open the app, run devTelemetry() in the browser console
  • Click around and confirm both client and server events appear (client will be page views only)
  • Verify feature flag overrides (PostHog + ConfigCat) persist and restore correctly
  • Confirm dismissing the toolbar clears local storage and hides the trigger

Unblocked by https://github.com/supabase/platform/pull/29172

Resolves GROWTH-591

Summary by CodeRabbit

  • New Features

    • Developer Toolbar (local only): view client/server telemetry, inspect events, and manage/override feature flags with persistent overrides, filtering, and clear/reload.
    • Client-side telemetry hooks: surface structured events to dev tooling for realtime inspection.

  • Bug Fixes

    • Fixed end-of-file newline in shared code.

  • Chores

    • Added dev-tools package, integrated provider and trigger across Studio, Docs, and marketing sites, and added CODEOWNERS entry.

  • Tests

    • Added comprehensive tests and test setup for the DevToolbar.

@coveralls

coveralls commented Jan 28, 2026 •
edited
Loading

Copy link
Copy Markdown

Pull Request Test Coverage Report for Build 21452986859

Warning: This coverage report may be inaccurate.

This pull request's base commit is no longer the HEAD commit of its target branch. This means it includes changes from outside the original pull request, including, potentially, unrelated coverage changes.

Details

  • 0 of 0 changed or added relevant lines in 0 files are covered.
  • No unchanged relevant lines lost coverage.
  • Overall coverage increased (+0.05%) to 66.787%
Totals Coverage Status
Change from base Build 21449189629: 0.05%
Covered Lines: 2616
Relevant Lines: 4162
💛 - Coveralls

@github-actions

github-actions Bot commented Jan 28, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

🎭 Playwright Test Results

passed  97 passed
flaky  1 flaky
skipped  5 skipped

Details

stats  103 tests across 16 suites
duration  8 minutes, 45 seconds
commit  8ddba72

Flaky tests

Features › database.spec.ts › Database Enumerated Types › actions works as expected

Skipped tests

Features › assistant.spec.ts › AI Assistant › Can send a message to the assistant and receive a response
Features › sql-editor.spec.ts › SQL Editor › snippet favourite works as expected
Features › sql-editor.spec.ts › SQL Editor › share with team works as expected
Features › sql-editor.spec.ts › SQL Editor › folders works as expected
Features › sql-editor.spec.ts › SQL Editor › other SQL snippets actions work as expected

@everettbu everettbu force-pushed the feat/growth-591-dev-telemetry-toolbar branch 2 times, most recently from 17e6bef to 61a1f71 Compare February 2, 2026 17:57
@github-actions github-actions Bot added the documentation Improvements or additions to documentation label Feb 2, 2026
@everettbu everettbu removed the documentation Improvements or additions to documentation label Feb 2, 2026
@github-actions github-actions Bot added the documentation Improvements or additions to documentation label Feb 3, 2026
@everettbu everettbu force-pushed the feat/growth-591-dev-telemetry-toolbar branch from a62d854 to 0ad07c9 Compare February 5, 2026 00:45
@everettbu everettbu removed the documentation Improvements or additions to documentation label Feb 5, 2026
seanoliver and others added 12 commits February 5, 2026 10:24
@seanoliver
feat(telemetry): add dev telemetry toolbar
f7e22dd
@seanoliver
test(toolbar): guard EventSource in jsdom
b3d1f4d
@seanoliver
fix: update console tooltip string
9d39942
@seanoliver
refactor(dev-tools): extract toolbar to shared package with NODE_ENV …
75634d7 
…gating

- Move DevTelemetryToolbar from apps/studio to packages/dev-tools
- Rename to DevToolbar for brevity
- Change gating from NEXT_PUBLIC_ENVIRONMENT to NODE_ENV for tree-shaking
- Add sideEffects: false to package.json for bundler optimization
- Add early return in useDevToolbar() hook when not in development
- Integrate toolbar into Studio, Docs, and WWW apps
- Update tests to use NODE_ENV instead of NEXT_PUBLIC_ENVIRONMENT
@seanoliver
fix(dev-tools): add explicit React type imports
0d0090e 
Import Dispatch and SetStateAction from react instead of using
React.Dispatch/React.SetStateAction to ensure types resolve correctly
regardless of global type configuration.
@seanoliver
feat(dev-tools): stream server events when enabled
e0c94cc
@seanoliver
fix(dev-tools): harden localStorage access and SSE reconnect
a64be44 
- Wrap localStorage calls in try/catch to handle blocked storage
- Clear existing SSE reconnect timer before scheduling new one to
  prevent overlapping timers if onerror fires rapidly
@charislam @seanoliver
fix: add conditionals to dev-tools exports for tree-shaking
8f039f5
@seanoliver
fix(dev-tools): address PR feedback
fe3c2c6 
- Use next-router-mock/navigation for correct App Router mocking
- Add typecheck script to package.json
- Remove redundant IS_LOCAL_DEV check from useDevToolbar (handled at export level)
- Use semantic <button> instead of div with role=button in EventCard
- Wrap tab panels in TabsContent per Radix docs
@seanoliver
fix(dev-tools): add apiUrl to provider stub for type compatibility
c0c20be
@seanoliver
fix(dev-tools): use conditional rendering for tab content to fix layout
ecae9d6 
- Replace Radix TabsContent with conditional rendering based on activeTab/flagsSubTab
- This prevents inactive tab panels from affecting flex layout calculations
- Eliminates empty space gap between tabs and content
- Restores proper scrolling and interactivity in all tabs
@seanoliver
fix(dev-tools): include ui type declarations to fix typecheck
2bb7e1e
@everettbu everettbu force-pushed the feat/growth-591-dev-telemetry-toolbar branch from 0ad07c9 to ecae9d6 Compare February 5, 2026 19:36
@github-actions github-actions Bot added the documentation Improvements or additions to documentation label Feb 5, 2026
@everettbu

everettbu commented Feb 6, 2026

Copy link
Copy Markdown
Author

Upstream PR was closed or merged. Code is synced via branch mirror.

@everettbu everettbu closed this Feb 6, 2026
@everettbu everettbu deleted the feat/growth-591-dev-telemetry-toolbar branch February 6, 2026 19:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

documentation Improvements or additions to documentation

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@everettbu @coveralls @seanoliver @charislam