OverviewMetrics() — supabase Function Reference
Architecture documentation for the OverviewMetrics() function in OverviewMetrics.tsx from the supabase codebase.
Entity Profile
Dependency Diagram
graph TD 88c80fb7_c47a_15ef_1c36_847eec2754b1["OverviewMetrics()"] c9ff8bc0_a9f2_076e_e024_e7b17460223c["getMetricValues()"] 88c80fb7_c47a_15ef_1c36_847eec2754b1 -->|calls| c9ff8bc0_a9f2_076e_e024_e7b17460223c 152d4ab8_b0c2_d35e_d68c_37814e1a7e7b["calculatePercentageChange()"] 88c80fb7_c47a_15ef_1c36_847eec2754b1 -->|calls| 152d4ab8_b0c2_d35e_d68c_37814e1a7e7b 61e6b128_7a7d_7016_dbc0_a296809883c8["getApiSuccessRates()"] 88c80fb7_c47a_15ef_1c36_847eec2754b1 -->|calls| 61e6b128_7a7d_7016_dbc0_a296809883c8 ac80f377_96a4_a8c8_cc58_26d97a63c7fb["getAuthSuccessRates()"] 88c80fb7_c47a_15ef_1c36_847eec2754b1 -->|calls| ac80f377_96a4_a8c8_cc58_26d97a63c7fb 481f629d_1d14_04c2_f399_700ec66fd6cd["fetchTopResponseErrors()"] 88c80fb7_c47a_15ef_1c36_847eec2754b1 -->|calls| 481f629d_1d14_04c2_f399_700ec66fd6cd 48c77bae_54bd_021b_f1ba_3a3eb7ccee63["fetchTopAuthErrorCodes()"] 88c80fb7_c47a_15ef_1c36_847eec2754b1 -->|calls| 48c77bae_54bd_021b_f1ba_3a3eb7ccee63 style 88c80fb7_c47a_15ef_1c36_847eec2754b1 fill:#6366f1,stroke:#818cf8,color:#fff
Relationship Graph
Source Code
apps/studio/components/interfaces/Auth/Overview/OverviewMetrics.tsx lines 144–427
export const OverviewMetrics = ({ metrics, isLoading, error }: OverviewMetricsProps) => {
const { ref } = useParams()
const endDate = dayjs().toISOString()
const startDate = dayjs().subtract(24, 'hour').toISOString()
const aiSnap = useAiAssistantStateSnapshot()
const { openSidebar } = useSidebarManagerSnapshot()
const { current: activeUsersCurrent, previous: activeUsersPrevious } = getMetricValues(
metrics,
'activeUsers'
)
const { current: signUpsCurrent, previous: signUpsPrevious } = getMetricValues(
metrics,
'signUpCount'
)
const activeUsersChange = calculatePercentageChange(activeUsersCurrent, activeUsersPrevious)
const signUpsChange = calculatePercentageChange(signUpsCurrent, signUpsPrevious)
const { current: apiSuccessRateCurrent, previous: apiSuccessRatePrevious } =
getApiSuccessRates(metrics)
const { current: authSuccessRateCurrent, previous: authSuccessRatePrevious } =
getAuthSuccessRates(metrics)
const apiSuccessRateChange = calculatePercentageChange(
apiSuccessRateCurrent,
apiSuccessRatePrevious
)
const authSuccessRateChange = calculatePercentageChange(
authSuccessRateCurrent,
authSuccessRatePrevious
)
const { data: respErrData, isPending: isLoadingResp } = useQuery({
queryKey: ['auth-overview', ref, 'top-response-errors'],
queryFn: () => fetchTopResponseErrors(ref as string),
enabled: !!ref,
})
const { data: codeErrData, isPending: isLoadingCodes } = useQuery({
queryKey: ['auth-overview', ref, 'top-auth-error-codes'],
queryFn: () => fetchTopAuthErrorCodes(ref as string),
enabled: !!ref,
})
const responseErrors: ResponseErrorRow[] = Array.isArray(respErrData?.result)
? (respErrData?.result as unknown[]).filter(isResponseErrorRow)
: []
const errorCodes: AuthErrorCodeRow[] = Array.isArray(codeErrData?.result)
? (codeErrData?.result as unknown[]).filter(isAuthErrorCodeRow)
: []
const errorCodesActions = [
{
label: 'Ask Assistant about Error Codes',
icon: <AiIconAnimation size={12} />,
onClick: () => {
openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
aiSnap.newChat({
name: 'Auth Help',
initialInput: `Can you explain to me what the authentication error codes mean?`,
})
},
},
]
return (
<>
<PageSection>
{!!error && (
<AlertError
className="mb-4"
subject="Error fetching auth metrics"
error={{
message: 'There was an error fetching the auth metrics.',
}}
/>
)}
<PageSectionMeta>
<PageSectionSummary>
<div className="flex items-center justify-between">
<PageSectionTitle>Usage</PageSectionTitle>
<Link
href={`/project/${ref}/reports/auth?its=${startDate}&ite=${endDate}&isHelper=true&helperText=Last+24+hours`}
className="text-foreground underline underline-offset-2 decoration-foreground-muted hover:decoration-foreground transition-all text-sm inline-flex items-center gap-x-1.5"
>
<Telescope size={14} className="text-foreground-lighter" />
<span>Go to observability</span>
<ChevronRight size={14} className="text-foreground-lighter" />
</Link>
</div>
</PageSectionSummary>
</PageSectionMeta>
<PageSectionContent>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
<StatCard
title="Auth Activity"
current={activeUsersCurrent}
previous={activeUsersChange}
loading={isLoading}
href={`/project/${ref}/reports/auth?its=${startDate}&ite=${endDate}#usage`}
tooltip="Users who generated any Auth event in this period. This metric tracks authentication activity, not total product usage. Some active users won't appear here if their session stayed valid."
/>
<StatCard
title="Sign ups"
current={signUpsCurrent}
previous={signUpsChange}
loading={isLoading}
href={`/project/${ref}/reports/auth?its=${startDate}&ite=${endDate}#usage`}
/>
</div>
</PageSectionContent>
</PageSection>
<PageSection>
<PageSectionMeta>
<PageSectionSummary>
<PageSectionTitle>Monitoring</PageSectionTitle>
</PageSectionSummary>
</PageSectionMeta>
<PageSectionContent>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4">
<StatCard
title="Auth API Success Rate"
current={apiSuccessRateCurrent}
previous={apiSuccessRateChange}
loading={isLoading}
suffix="%"
href={`/project/${ref}/reports/auth?its=${startDate}&ite=${endDate}#monitoring`}
/>
<StatCard
title="Auth Server Success Rate"
current={authSuccessRateCurrent}
previous={authSuccessRateChange}
loading={isLoading}
suffix="%"
href={`/project/${ref}/reports/auth?its=${startDate}&ite=${endDate}#monitoring`}
/>
</div>
<div className="grid grid-cols-1 gap-4">
<Chart isLoading={isLoadingResp}>
<ChartCard>
<ChartHeader>
<ChartTitle>Auth API Errors</ChartTitle>
</ChartHeader>
<ChartContent
className="p-0"
isEmpty={responseErrors.length === 0}
emptyState={
<div className="p-6">
<ChartEmptyState
icon={<BarChart2 size={16} />}
title="No data to show"
description="It may take up to 24 hours for data to refresh"
/>
</div>
}
loadingState={
<div className="p-6">
<ChartLoadingState />
</div>
}
>
<OverviewTable<ResponseErrorRow>
isLoading={isLoadingResp}
data={responseErrors}
columns={[
{
key: 'request',
header: 'Request',
className: 'w-auto !pr-0',
render: (row) => {
const level = getStatusLevel(row.status_code)
const colors = getStatusColor(level)
return (
<div className="flex items-center gap-2">
<span className="flex-shrink-0 flex items-center text-xs font-mono">
<span className="select-text py-0.5 px-2 text-center rounded-l rounded-r-none bg-surface-75 text-foreground-light border border-r-0">
{row.method}
</span>
<span
className={cn(
'py-0.5 px-2 border rounded-l-0 rounded-r tabular-nums',
colors.text,
colors.bg,
colors.border
)}
>
{row.status_code}
</span>
</span>
</div>
)
},
},
{
key: 'path',
header: 'Path',
className: 'w-full',
render: (row) => (
<span className="line-clamp-1 font-mono text-foreground-light text-xs">
{row.path}
</span>
),
},
{
key: 'count',
header: 'Count',
className: 'text-right flex-shrink-0 ml-auto justify-end',
render: (row) => (
<div className="flex justify-end items-center gap-2">
<div className="text-right text-xs tabular-nums">{row.count}</div>
<LogsLink href={`/project/${ref}/logs/edge-logs?s=${row.path}`} />
</div>
),
},
]}
/>
</ChartContent>
</ChartCard>
</Chart>
<Chart isLoading={isLoadingCodes}>
<ChartCard>
<ChartHeader>
<ChartTitle>Auth Server Errors</ChartTitle>
<ChartActions actions={errorCodesActions} />
</ChartHeader>
<ChartContent
className="p-0"
isEmpty={errorCodes.length === 0}
emptyState={
<div className="p-6">
<ChartEmptyState
icon={<BarChart2 size={16} />}
title="No data to show"
description="It may take up to 24 hours for data to refresh"
/>
</div>
}
loadingState={
<div className="p-6">
<ChartLoadingState />
</div>
}
>
<OverviewTable<AuthErrorCodeRow>
isLoading={isLoadingCodes}
data={errorCodes}
columns={[
{
key: 'error_code',
header: 'Error code',
className: 'w-full',
render: (row) => (
<span className="line-clamp-1 font-mono uppercase text-xs inline-flex text-foreground-light">
{row.error_code}
</span>
),
},
{
key: 'count',
header: 'Count',
className: 'text-right',
render: (row) => (
<div className="flex justify-end items-center gap-2">
<div className="text-right text-xs tabular-nums">{row.count}</div>
<LogsLink href={`/project/${ref}/logs/auth-logs?s=${row.error_code}`} />
</div>
),
},
]}
/>
</ChartContent>
</ChartCard>
</Chart>
</div>
</PageSectionContent>
</PageSection>
</>
)
}Domain
Subdomains
Calls
Source
Frequently Asked Questions
What does OverviewMetrics() do?
OverviewMetrics() is a function in the supabase codebase.
What does OverviewMetrics() call?
OverviewMetrics() calls 6 function(s): calculatePercentageChange, fetchTopAuthErrorCodes, fetchTopResponseErrors, getApiSuccessRates, getAuthSuccessRates, getMetricValues.
Analyze Your Own Codebase
Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.
Try Supermodel Free