mirror of
https://github.com/supabase/supabase.git
synced 2026-10-07 10:25:06 +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
49 lines
1.8 KiB
TypeScript
49 lines
1.8 KiB
TypeScript
import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
|
|
import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
|
|
import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
|
|
|
|
import { TroubleshootingAccordion } from '../TroubleshootingAccordion'
|
|
import {
|
|
FixWithAITroubleshootingSection,
|
|
RestartDatabaseTroubleshootingSection,
|
|
TroubleshootingGuideSection,
|
|
} from '../TroubleshootingSections'
|
|
|
|
const ERROR_TYPE = 'connection-timeout'
|
|
|
|
const BUILD_PROMPT = () =>
|
|
`The user is encountering connection timeout errors. The error message is: "CONNECTION TERMINATED DUE TO CONNECTION TIMEOUT". What are the most likely causes of this issue and how can the user resolve it?`
|
|
|
|
export function ConnectionTimeoutTroubleshooting() {
|
|
const { openSidebar } = useSidebarManagerSnapshot()
|
|
const aiSnap = useAiAssistantStateSnapshot()
|
|
|
|
return (
|
|
<TroubleshootingAccordion
|
|
errorType={ERROR_TYPE}
|
|
stepTitles={{
|
|
1: 'Try restarting your project',
|
|
2: 'Try our troubleshooting guide',
|
|
3: 'Debug with AI',
|
|
}}
|
|
>
|
|
<RestartDatabaseTroubleshootingSection number={1} errorType={ERROR_TYPE} />
|
|
<TroubleshootingGuideSection
|
|
number={2}
|
|
errorType={ERROR_TYPE}
|
|
href="https://supabase.com/docs/guides/troubleshooting/failed-to-run-sql-query-connection-terminated-due-to-connection-timeout"
|
|
description="Follow step-by-step instructions for diagnosing connection timeout issues."
|
|
/>
|
|
<FixWithAITroubleshootingSection
|
|
number={3}
|
|
errorType={ERROR_TYPE}
|
|
onDebugWithAI={(prompt) => {
|
|
openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
|
|
aiSnap.newChat({ initialMessage: prompt })
|
|
}}
|
|
buildPrompt={BUILD_PROMPT}
|
|
/>
|
|
</TroubleshootingAccordion>
|
|
)
|
|
}
|