Studio Error Handling

Studio Error Handling Pattern

Full docs and code examples: apps/studio/components/interfaces/ErrorHandling/README.md

How it works

Classification happens in the data layer: handleError in data/fetchers.ts tests the error message against ERROR_PATTERNS and throws the matching error subclass (e.g. ConnectionTimeoutError extends ResponseError). The component (ErrorMatcher) reads errorType from the instance and does an O(1) lookup — it never does regex matching.

handleError() → throws ConnectionTimeoutError → React Query catches → ErrorMatcher reads errorType → renders troubleshooting

Key files

| File | Purpose |

| ------------------------------------- | ---------------------------------------------------------------- |

| data/error-patterns.ts | Array of { pattern, ErrorClass } — the regex lives here |

| types/api-errors.ts | Error classes, KnownErrorType union, ClassifiedError type |

| ErrorMatcher.tsx | Component — reads errorType, looks up mapping, renders |

| error-mappings.tsx | Record<KnownErrorType, { id, Troubleshooting: ComponentType }> |

| errorMappings/ConnectionTimeout.tsx | Reference troubleshooting component |

| TroubleshootingSections.tsx | Reusable accordion section components |

| TroubleshootingAccordion.tsx | Accordion wrapper with telemetry |

Usage

Pass the full error object from React Query — not error.message:

{
  isError && (
    <ErrorMatcher title="Failed to load tables" error={error} supportFormParams={{ projectRef }} />
  )
}

What NOT to do

• Do not pass error.message to ErrorMatcher — pass the full error object so the class is preserved.
• Do not put regex patterns in error-mappings.tsx — they belong in data/error-patterns.ts.
• Do not use Object.assign to stamp errorType — throw a proper subclass instead.
• Do not pass a raw URL string for support — use supportFormParams={{ projectRef }}.
• Do not put the page title inside the error mapping — it belongs on the <ErrorMatcher> caller.
• Do not add callback props (onDebugWithAI, onRestartProject) to troubleshooting components — use hooks inside them instead.