Render Error Boundary

One block, isolated: a render that throws falls back to plain text instead of unmounting the message around it, and retries when its inputs change.

Open in

Drew: graph TD; A-->B

Add a ! to break the render.

Installation

npx shadcn@latest add miskibin/chat-components/render-error-boundary

Usage

import { RenderErrorBoundary } from "@/components/ui/render-error-boundary"

export function Fence({ code }: { code: string }) {
  return (
    <RenderErrorBoundary resetKeys={[code]} fallback={<pre>{code}</pre>}>
      <HighlightedCode code={code} />
    </RenderErrorBoundary>
  )
}

Notes

Where the message family already uses it

MessageMarkdown wraps every block, MessageCode wraps its highlighted body and its mermaid branch. All of them key the boundary on the source, so the next streamed chunk is a fresh attempt rather than a permanent fallback. It catches render errors only — an async failure inside a diagram library is still that library’s to report.

API reference

RenderErrorBoundary

children*React.ReactNode: The render to isolate.
fallback*React.ReactNode: What replaces the children once one of them throws. Keep it dumb — a <pre> of the source the failed render was given.
resetKeysreadonly unknown[]: Inputs the failed render depended on. When any of them changes by Object.is the boundary tries again, without remounting healthy siblings or losing the scroll position of the row it sits in.