mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 19:35:06 +03:00
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 --> [](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>
71 lines
2.0 KiB
TypeScript
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
|
|
}
|