4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:Tb8b,"use client"; import { Component, type ErrorInfo, type ReactNode } from "react"; export interface ErrorBoundaryProps { children: ReactNode; /** Render prop called when an error is caught. Return the fallback UI. */ fallback: (error: Error, resetErrorBoundary: () => void) => ReactNode; /** Optional callback when an error is caught. */ onError?: (error: Error, errorInfo: ErrorInfo) => void; /** * When any value in this array changes, the error state is automatically * cleared and the children are re-rendered. Use this to recover from * errors when the underlying data changes (e.g., cell re-execution, * new output data, widget state update). */ resetKeys?: readonly unknown[]; } interface ErrorBoundaryState { error: Error | null; prevResetKeys: readonly unknown[] | undefined; } /** * Reusable React error boundary. * * Catches render errors in child components and displays a fallback UI * via the `fallback` render prop. Provides a `resetErrorBoundary` function * to retry rendering. * * Supports automatic recovery via `resetKeys` — when any key changes, * the error state is cleared and children re-render. * * @example * ```tsx * ( *

Something went wrong: {error.message}

* *

* )} * resetKeys={[executionCount]} * > * * * ``` */ export class ErrorBoundary extends Component< ErrorBoundaryProps, ErrorBoundaryState > { constructor(props: ErrorBoundaryProps) { super(props); this.state = { error: null, prevResetKeys: props.resetKeys }; } static getDerivedStateFromError(error: Error): Partial { return { error }; } static getDerivedStateFromProps( props: ErrorBoundaryProps, state: ErrorBoundaryState, ): Partial | null { if ( state.error && state.prevResetKeys !== undefined && props.resetKeys !== undefined ) { const changed = props.resetKeys.length !== state.prevResetKeys.length || props.resetKeys.some( (key, i) => !Object.is(key, state.prevResetKeys![i]), ); if (changed) { return { error: null, prevResetKeys: props.resetKeys }; } } // Always track latest resetKeys even when not in error state if (props.resetKeys !== state.prevResetKeys) { return { prevResetKeys: props.resetKeys }; } return null; } componentDidCatch(error: Error, errorInfo: ErrorInfo) { console.error("[ErrorBoundary]", error, errorInfo.componentStack); this.props.onError?.(error, errorInfo); } resetErrorBoundary = () => { this.setState({ error: null }); }; render() { if (this.state.error) { return this.props.fallback(this.state.error, this.resetErrorBoundary); } return this.props.children; } } 52:T5dd,"use client"; import { cn } from "@/lib/utils"; export interface OutputErrorFallbackProps { /** The error that was caught */ error: Error; /** Optional index of the output (0-based) for display */ outputIndex?: number; /** Callback to retry rendering */ onRetry?: () => void; } /** * Fallback UI for output rendering errors. * * Displays an error message with optional retry button. * Styled to match AnsiErrorOutput patterns. */ export function OutputErrorFallback({ error, outputIndex, onRetry, }: OutputErrorFallbackProps) { return (

Output rendering failed {outputIndex !== undefined && ` (output ${outputIndex + 1})`}

{error.message}

{onRetry && ( )}

); } 53:T5e1,import { cn } from "@/lib/utils"; export interface WidgetErrorFallbackProps { /** The error that was caught */ error: Error; /** The widget model ID */ modelId: string; /** Optional widget model name for display */ modelName?: string; /** Callback to retry rendering */ onRetry?: () => void; } /** * Fallback UI for widget rendering errors. * * Displays an error message with optional retry button. * Styled to match UnsupportedWidget patterns. */ export function WidgetErrorFallback({ error, modelId, modelName, onRetry, }: WidgetErrorFallbackProps) { return (

Widget error{modelName && `: ${modelName}`}

{error.message}

{onRetry && ( )}

); } 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4e",null,{"registryDependencies":[]}]]}],["$","$L4f",null,{"sourceUrl":"https://nteract-elements.vercel.app/r/error-boundary.json","proxyUrl":"https://shadcnregistry.com/r/nteract/error-boundary","itemId":"@nteract/error-boundary"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"registry/lib/error-boundary.tsx","content":"$51","type":"registry:lib","target":"lib/error-boundary.tsx"},{"path":"registry/lib/output-error-fallback.tsx","content":"$52","type":"registry:lib","target":"lib/output-error-fallback.tsx"},{"path":"registry/lib/widget-error-fallback.tsx","content":"$53","type":"registry:lib","target":"lib/widget-error-fallback.tsx"}]}]]}],"$L54"]}]

Error Boundary

Installation

Files

lib

Styles