ErrorBoundary

errorboundary-1779394345556.tsx

'use client'
import { Component } from 'react'

class ErrorBoundaryClass extends Component {
  constructor(props) {
    super(props)
    this.state = { hasError:false, error:null }
  }
  static getDerivedStateFromError(error) { return { hasError:true, error } }
  componentDidCatch(error, info) { console.error('Error caught:', error, info) }
  render() {
    if (this.state.hasError) {
      return (
        <div style={{
          background:'#fff5f5', border:'2px solid #fecaca', borderRadius:'16px',
          padding:'32px', textAlign:'center', maxWidth:'400px',
        }}>
          <div style={{ fontSize:'48px', marginBottom:'16px' }}>😵</div>
          <h2 style={{ color:'#991b1b', margin:'0 0 8px', fontSize:'18px' }}>Something went wrong</h2>
          <p style={{ color:'#b91c1c', fontSize:'13px', marginBottom:'20px', lineHeight:1.6 }}>
            {this.state.error?.message || 'An unexpected error occurred'}
          </p>
          <button onClick={()=>this.setState({hasError:false,error:null})} style={{
            background:'#ef4444', color:'#fff', border:'none', borderRadius:'10px',
            padding:'10px 24px', cursor:'pointer', fontWeight:700, fontSize:'14px',
          }}>Try Again</button>
        </div>
      )
    }
    return this.props.children
  }
}

function BuggyChild() {
  const [crashed, setCrashed] = useState(false)
  if (crashed) throw new Error('Component crashed!')
  return (
    <div style={{ padding:'20px', background:'#f0fdf4', borderRadius:'12px', textAlign:'center' }}>
      <div style={{ fontSize:'32px', marginBottom:'8px' }}>✅</div>
      <p style={{ color:'#15803d', marginBottom:'12px' }}>Component working fine</p>
      <button onClick={()=>setCrashed(true)} style={{ background:'#ef4444', color:'#fff', border:'none', borderRadius:'8px', padding:'8px 16px', cursor:'pointer' }}>Trigger Error</button>
    </div>
  )
}

import { useState } from 'react'
export default function ErrorBoundaryDemo() {
  return (
    <ErrorBoundaryClass>
      <BuggyChild />
    </ErrorBoundaryClass>
  )
}

Component info

CategoryUtility

Frameworkreact

TierFREE

Copies0

About

Error boundary component with fallback UI and retry functionality

More from Utility

'use client'
import { useState, useCallback } from 'react'

interface UploadedFile {
  id: number
  name: string
  size: number
  type: string
  progress: number
  done: boolean
  error?: string
}

const ALLOWED = ['image/png', 'image/jpeg', 'image/w

FileUploadZone

Utility

'use client'
import { useState } from 'react'

interface ClipItem {
  id: number
  content: string
  type: 'text' | 'code' | 'url' | 'email'
  pinned: boolean
  time: number
}

const INITIAL: ClipItem[] = [
  { id: 1, content: 'npx empire-ui-mcp --st

ClipboardManager

Utility

'use client';
import { useState } from 'react';

export default function NeonToggle({ label = "Enable AI Mode", defaultOn = false, color = "#6366f1" }) {
  const [on, setOn] = useState(defaultOn);
  const [pressing, setPressing] = useState(false);

NeonToggle

Utility

'use client'
import { useState } from 'react'

const PRESETS = [
  { name: 'Gold', primary: '#C9A84C', bg: '#0A0A0A', accent: '#6366f1' },
  { name: 'Neon', primary: '#22d3ee', bg: '#030712', accent: '#a78bfa' },
  { name: 'Crimson', primary: '#ef444

ThemeCustomizer

Utility