mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 18:05:11 +03:00
Jordi Enric
ec26943390
When the dashboard hits a DB connection timeout, users currently see a
raw error message with no
path forward. This PR adds an inline troubleshooting system that detects
known error types and
surfaces contextual next steps — restart the DB, read the docs, or debug
with AI.
## Changes
- New ErrorDisplay component (packages/ui-patterns) — styled error card
with a title, monospace error
block, optional troubleshooting slot, and a "Contact support" link that
always renders. Accepts
typed supportFormParams to pre-fill the support form.
- Error classification in handleError (data/fetchers.ts) — on every API
error, the message is tested
against ERROR_PATTERNS. If matched, handleError throws a typed subclass
(ConnectionTimeoutError
extends ResponseError) instead of a plain ResponseError. Stack traces
now show the exact error
class. All existing instanceof ResponseError checks continue to work.
- ErrorMatcher component — reads errorType from the thrown class
instance, does an O(1) lookup into
ERROR_MAPPINGS, and renders the matching troubleshooting accordion as
children of ErrorDisplay.
Falls back to plain ErrorDisplay for unclassified errors.
- Connection timeout mapping — first error type wired up, with three
troubleshooting steps: restart
the database, link to the docs, and "Debug with AI" (opens the AI
assistant sidebar with a
pre-filled prompt).
- Telemetry — three new typed events track when the troubleshooter is
shown, when accordion steps are
toggled, and which CTAs are clicked.
## Adding a new error type
1. Add a class to types/api-errors.ts
2. Add { pattern, ErrorClass } to data/error-patterns.ts
3. Create a troubleshooting component in errorMappings/
4. Add an entry to error-mappings.tsx
52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import { useTrack } from 'lib/telemetry/track'
|
|
import { ErrorDisplay, SupportFormParams } from 'ui-patterns/ErrorDisplay'
|
|
|
|
import { getMappingForError } from './ErrorMatcher.utils'
|
|
|
|
interface ErrorMatcherProps {
|
|
title: string
|
|
error: string | { message: string }
|
|
supportFormParams?: SupportFormParams
|
|
className?: string
|
|
}
|
|
|
|
export function ErrorMatcher({ title, error, supportFormParams, className }: ErrorMatcherProps) {
|
|
const track = useTrack()
|
|
|
|
const message = typeof error === 'string' ? error : error.message
|
|
const mapping = getMappingForError(error)
|
|
const Troubleshooting = mapping?.Troubleshooting
|
|
|
|
return (
|
|
<ErrorDisplay
|
|
title={title}
|
|
errorMessage={message}
|
|
supportFormParams={supportFormParams}
|
|
className={className}
|
|
onRender={() => {
|
|
track('dashboard_error_created', {
|
|
source: 'error_display',
|
|
errorType: mapping?.id,
|
|
hasTroubleshooting: !!mapping,
|
|
})
|
|
if (mapping) {
|
|
track('inline_error_troubleshooter_exposed', { errorType: mapping.id })
|
|
}
|
|
}}
|
|
onSupportClick={
|
|
mapping
|
|
? () =>
|
|
track('inline_error_troubleshooter_action_clicked', {
|
|
errorType: mapping.id,
|
|
ctaType: 'contact_support',
|
|
})
|
|
: undefined
|
|
}
|
|
>
|
|
{Troubleshooting && <Troubleshooting />}
|
|
</ErrorDisplay>
|
|
)
|
|
}
|