Skip to content

React error boundaries for chat message rendering #63

Description

@ryuhmanov-m

Parent issue: #20

Context

If a single message fails to render (e.g., malformed markdown, unexpected tool output), it can crash the entire chat view. Error boundaries would contain failures to individual messages.

Scope

  1. Create src/components/ui/ErrorBoundary.tsx — a reusable React error boundary component
    • Shows a friendly error message instead of crashing
    • "Retry" button to attempt re-render
    • Logs the error details to console for debugging
  2. Wrap MessageBubble / MessageContent in the error boundary
  3. Wrap ToolCallDisplay in the error boundary (tool results can have unexpected shapes)

Design

Error state should show something like:

"This message couldn't be displayed. [Show details] [Retry]"

Keep the styling consistent with the existing chat theme.

References

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingfrontendNext.js / React frontendgood first issueGood for newcomers

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions