reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
ErrorBoundary
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

ErrorBoundary

Component

Catch child rendering errors and display fallback UI with a React error boundary.

indicator
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { ErrorBoundary } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

렌더 에러 fallback 처리

자식 트리가 정상적으로 렌더링되고 있습니다.

ErrorBoundary

PropTypeDefaultDescription
childrenRequiredReactNode—에러를 감시할 자식 컴포넌트
fallbackReactNode | ((error: Error) => ReactNode)—에러 발생 시 표시할 UI. 함수 전달 시 에러 객체를 인자로 받음. 미지정 시 Alert error 표시
onError(error: Error, info: ErrorInfo) => void—에러 발생 시 호출되는 콜백 (에러 리포팅용)
View test results

테스트 커버리지

2026년 7월 9일5/5 통과
5성공
0실패
5전체
  • 에러 없이 children을 렌더링한다
  • 에러 발생 시 기본 Alert fallback을 표시한다
  • 커스텀 fallback ReactNode를 표시한다
  • fallback 함수에 에러 객체를 전달한다
  • onError 콜백을 호출한다

Related components

opt-ui

Kbd

Core

Display keyboard shortcuts as inline key badges.

opt-ui

StatCard

Core

Show a metric with its value, change, and supporting description. Omit the change row when no comparison is available.

opt-ui

CompositeZone

Core

Navigate child elements in two dimensions with arrow keys using a Composite container.

opt-ui

Toolbar

Core

Group actions in a toolbar with buttons, separators, and tooltips.

opt-ui

Badge

Core

Display inline status badges with five color variants and an optional status dot.

opt-ui

Spinner

Core

Indicate loading in three sizes, with an aria-hidden mode for decorative use.

PreviousStarRatingNextCommand