mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
Jordi Enric
6434c48999
## Problem Auth observability charts always queried the legacy logs.all endpoint, even when the OTEL reports rollout was enabled. The existing OTEL SQL also had ClickHouse correctness and parity gaps around timestamp aliasing, JSON types, provider paths, missing values, and error-code attributes. ## Fix Route the ten Auth-specific charts through the OTEL query builders and logs.all.otel endpoint when otelReports is enabled. Preserve the BigQuery fallback, partition React Query caches by backend, and leave the shared API gateway charts on the legacy endpoint. Correct the OTEL queries by qualifying source timestamps, using typed and nullable JSON extraction, preserving missing actor and duration semantics, selecting the right provider path for each event shape, preferring the canonical Auth error-code attribute with a legacy fallback, and applying bounded result limits. Two-minute report intervals now use minute-level SQL buckets instead of falling through to hourly buckets. ## How to test - Run `CI=1 pnpm --filter studio exec vitest run data/reports/v2/auth.config.otel.test.ts hooks/misc/__tests__/useReportDateRange.test.ts` - Run `pnpm --filter studio run lint:ratchet` - Run `pnpm --filter studio run typecheck` - Expected result: all checks pass and generated OTEL SQL preserves legacy report semantics. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Auth observability charts can now use OpenTelemetry data when enabled, while retaining the existing reporting source otherwise. - Switching the data source automatically refreshes the relevant charts. - **Bug Fixes** - Improved Auth observability accuracy for provider, duration, actor, and error-code reporting. - Added safeguards to keep report queries within the supported result limit. - Corrected minute-level grouping for two-minute analytics intervals and three-hour date ranges. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
Writing pages
Rough guidelines
- Try to break down your pages into smaller building blocks - components which are tightly coupled to a page can be placed within the folder
components/interfaces/xxx/...(Refer to the README.md under the components folder) - Keep to using
useStatehooks for any UI related logic, do not create MobX local stores to handle UI logic.
Template for building pages
import { NextPage } from 'next'
import { withAuth } from 'hooks/misc/withAuth'
// Import the corresponding layout based on the page
import { Layout } from 'components/layouts'
// Import the main building blocks of the page
import { ... } from 'components/interfaces/xxx'
// Import reusable UI components if needed
import { ... } from 'components/ui/xxx'
// Name your page accordingly
const Page: NextPage = () => {
return (
<Layout>
<div>Page content</div>
</Layout>
)
}
export default withAuth(Page)