Error Boundary

import { ErrorBoundary } from "@/components/ui/error-boundary";

export default function Example() {
  return <ErrorBoundary />;
}

"use client";

import { Component } from "react";

class ErrorBoundary extends Component {
  constructor(props) { super(props); this.state = { hasError: false, error: null }; }
  static getDerivedStateFromError(error) { return { hasError: true, error }; }
  componentDidCatch(error, info) { this.props.onError?.(error, info); }
  render() {
    if (this.state.hasError) {
      if (this.props.fallback) return this.props.fallback;
      return (
        <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-6 text-center">
          <h3 className="font-semibold text-destructive">Something went wrong</h3>
          <p className="mt-1 text-sm text-muted-foreground">{this.state.error?.message}</p>
          <button onClick={() => this.setState({ hasError: false, error: null })}
            className="mt-3 rounded-md border px-3 py-1.5 text-sm hover:bg-accent"
          >Try Again</button>
        </div>
      );
    }
    return this.props.children;
  }
}

export { ErrorBoundary };