mirror of
https://github.com/supabase/supabase.git
synced 2026-05-07 17:30:25 -04:00
6bbe2c3297
## 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 Demo: [github.com/user-attachments/assets/60b376db-7440-4ada-82f5-d1bd4af4db3b](https://github.com/user-attachments/assets/60b376db-7440-4ada-82f5-d1bd4af4db3b) Screenshots: <img width="1368" height="972" alt="1" src="https://github.com/user-attachments/assets/d2f20a0c-191f-4118-bb5e-15b25f5a54a9" /> <img width="1423" height="790" alt="2" src="https://github.com/user-attachments/assets/115598e2-7287-49bf-9ed7-71ecc679dee3" /> <img width="1433" height="882" alt="3" src="https://github.com/user-attachments/assets/51f666f2-9efc-410f-baec-378bdee9dbfe" /> <img width="608" height="483" alt="4" src="https://github.com/user-attachments/assets/584d6cf5-1b2f-4cee-9e6a-d55ce2e3bae5" /> <img width="628" height="305" alt="5" src="https://github.com/user-attachments/assets/991a9b39-578a-4565-b110-537a02040a53" /> <img width="659" height="447" alt="6" src="https://github.com/user-attachments/assets/95ef405c-fffa-44af-bf6a-f974b780e3fc" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## 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. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
91 lines
2.8 KiB
TypeScript
91 lines
2.8 KiB
TypeScript
export function getCookie(name: string): string | undefined {
|
|
if (typeof document === 'undefined') return undefined
|
|
const escapedName = name.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&')
|
|
const match = document.cookie.match(new RegExp(`(^| )${escapedName}=([^;]+)`))
|
|
return match ? decodeURIComponent(match[2]) : undefined
|
|
}
|
|
|
|
export function setCookie(name: string, value: string, path: string = '/') {
|
|
if (typeof document === 'undefined') return
|
|
document.cookie = `${name}=${encodeURIComponent(value)}; path=${path}`
|
|
}
|
|
|
|
export function deleteCookie(name: string) {
|
|
if (typeof document === 'undefined') return
|
|
document.cookie = `${name}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT`
|
|
}
|
|
|
|
export function safeJsonParse<T>(value: string | undefined, fallback: T, context?: string): T {
|
|
if (!value) return fallback
|
|
try {
|
|
return JSON.parse(value) as T
|
|
} catch (error) {
|
|
if (process.env.NODE_ENV === 'development') {
|
|
console.warn(`[DevToolbar] Failed to parse JSON${context ? ` for ${context}` : ''}:`, error)
|
|
}
|
|
return fallback
|
|
}
|
|
}
|
|
|
|
export const PH_ORIGINALS_KEY = 'devToolbarFlagOriginals:posthog'
|
|
export const CC_ORIGINALS_KEY = 'devToolbarFlagOriginals:configcat'
|
|
|
|
export function readOriginals(
|
|
key: typeof PH_ORIGINALS_KEY | typeof CC_ORIGINALS_KEY
|
|
): Record<string, unknown> {
|
|
if (typeof window === 'undefined') return {}
|
|
try {
|
|
const stored = window.localStorage.getItem(key)
|
|
return stored ? JSON.parse(stored) : {}
|
|
} catch (error) {
|
|
if (process.env.NODE_ENV === 'development') {
|
|
console.warn(`[DevToolbar] Failed to read originals from ${key}:`, error)
|
|
}
|
|
return {}
|
|
}
|
|
}
|
|
|
|
export function writeOriginals(
|
|
key: typeof PH_ORIGINALS_KEY | typeof CC_ORIGINALS_KEY,
|
|
value: Record<string, unknown>
|
|
) {
|
|
if (typeof window === 'undefined') return
|
|
if (Object.keys(value).length === 0) {
|
|
window.localStorage.removeItem(key)
|
|
return
|
|
}
|
|
window.localStorage.setItem(key, JSON.stringify(value))
|
|
}
|
|
|
|
export function valuesAreEqual(a: unknown, b: unknown): boolean {
|
|
if (a === b) return true
|
|
if (a == null || b == null) return false
|
|
if (typeof a === 'number' || typeof b === 'number') {
|
|
const numA = Number(a)
|
|
const numB = Number(b)
|
|
if (Number.isNaN(numA) || Number.isNaN(numB)) return false
|
|
return numA === numB
|
|
}
|
|
if (typeof a === 'boolean' || typeof b === 'boolean') {
|
|
return a === b
|
|
}
|
|
return String(a) === String(b)
|
|
}
|
|
|
|
export function parseOverrideValue(value: unknown, original: unknown): unknown {
|
|
if (typeof original === 'number') {
|
|
const parsed = Number(value)
|
|
return Number.isNaN(parsed) ? original : parsed
|
|
}
|
|
if (typeof original === 'boolean') {
|
|
if (typeof value === 'string') {
|
|
return value.toLowerCase() === 'true'
|
|
}
|
|
return Boolean(value)
|
|
}
|
|
if (typeof original === 'string') {
|
|
return String(value)
|
|
}
|
|
return value
|
|
}
|