Files
supabase/apps/studio/lib/telemetry/track.ts
Alaister YoungandAlaister Young 7959948005 fix(studio): make useTrack stable across renders (#46412)
Follow-up to #46140 — the returned `track` function was re-created on
every router change or selected project/org refetch, which made it
unstable for consumers that depend on referential equality (e.g. effect
deps, memoized children).

**Changed:**
- Read `project?.ref`, `org?.slug`, and `router.pathname` through
`useLatest` so the values inside `track` stay current without being deps
of the `useCallback`
- Drop the deps from the `useCallback` — `track` is now stable for the
lifetime of the component

## To test

- Verify telemetry events still send with correct `project` /
`organization` groups and `pathname`
- Confirm any consumers that put `track` in `useEffect` deps no longer
re-run unnecessarily on route or project changes

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Refactor**
* Improved telemetry event tracking to capture more accurate context
information at the time events are sent, ensuring data reflects current
application state.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46412?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
2026-05-27 16:20:43 +08:00

71 lines
2.0 KiB
TypeScript

import { sendTelemetryEvent } from 'common'
import { TelemetryEvent, TelemetryGroups } from 'common/telemetry-constants'
import { useRouter } from 'next/router'
import { useCallback } from 'react'
import useLatest from '@/hooks/misc/useLatest'
import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { API_URL } from '@/lib/constants'
type EventMap = {
[E in TelemetryEvent as E['action']]: E
}
type PropertiesForAction<A extends keyof EventMap> = EventMap[A] extends { properties: infer P }
? P
: never
type HasProperties<A extends keyof EventMap> = EventMap[A] extends { properties: any }
? true
: false
/**
* Hook for type-safe telemetry event tracking with automatic project/org context injection.
*
* @example
* const track = useTrack()
* track('table_created', { method: 'sql_editor', schema_name: 'public' })
* track('help_button_clicked')
*/
export const useTrack = () => {
const { data: project } = useSelectedProjectQuery()
const { data: org } = useSelectedOrganizationQuery()
const router = useRouter()
const latest = useLatest({
projectRef: project?.ref,
orgSlug: org?.slug,
pathname: router.pathname,
})
const track = useCallback(
<A extends keyof EventMap>(
action: A,
...args: HasProperties<A> extends true
? [properties: PropertiesForAction<A>, groupOverrides?: Partial<TelemetryGroups>]
: [properties?: undefined, groupOverrides?: Partial<TelemetryGroups>]
) => {
const { projectRef, orgSlug, pathname } = latest.current
const [properties, groupOverrides] = args
const groups = {
...(projectRef && { project: projectRef }),
...(orgSlug && { organization: orgSlug }),
...groupOverrides,
}
const event = {
action,
...(properties && { properties }),
...(groups && { groups }),
} as EventMap[A]
sendTelemetryEvent(API_URL, event, pathname)
},
[]
)
return track
}