aura-glass/dist/esm/components/GlassErrorBoundary.js

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

'use client';
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
import { Component } from 'react';
import { GlassAdvanced } from '../primitives/glass/GlassAdvanced.js';

/**
 * Glass-styled Error Boundary
 * Catches errors and displays beautiful glass error UI
 */
class GlassErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.handleReset = () => {
      this.setState({
        hasError: false,
        error: null,
        errorInfo: null
      });
    };
    this.state = {
      hasError: false,
      error: null,
      errorInfo: null
    };
  }
  static getDerivedStateFromError(error) {
    return {
      hasError: true,
      error,
      errorInfo: null
    };
  }
  componentDidCatch(error, errorInfo) {
    // Log to error reporting service
    console.error("Glass Error Boundary caught:", error, errorInfo);
    // Call custom error handler
    this.props.onError?.(error, errorInfo);
    // Update state with error info
    this.setState({
      error,
      errorInfo
    });
    // Send to analytics
    if (typeof window !== "undefined" && window.gtag) {
      window.gtag("event", "exception", {
        description: error.toString(),
        fatal: false
      });
    }
  }
  render() {
    if (this.state.hasError) {
      // Custom fallback
      if (this.props.fallback) {
        return jsx(Fragment, {
          children: this.props.fallback
        });
      }
      // Default glass error UI
      return jsx(GlassAdvanced, {
        "data-glass-component": true,
        elev: 3,
        variant: "danger",
        className: "glass-p-8 glass-m-4",
        role: "alert",
        "aria-live": "assertive",
        children: jsxs("div", {
          className: "glass-stack glass-gap-4",
          children: [jsx("div", {
            className: 'glass-text-2xl font-bold glass-text-balance',
            children: "\u26A0\uFE0F Something went wrong"
          }), jsx("p", {
            className: "glass-text-secondary glass-text-balance",
            children: "We encountered an unexpected error. The issue has been logged and our team will investigate."
          }), process.env.NODE_ENV === "development" && this.state.error && jsxs("details", {
            className: "glass-mt-4",
            children: [jsx("summary", {
              className: 'font-semibold cursor-pointer glass-focus',
              children: "Error Details (Development Only)"
            }), jsxs("pre", {
              className: 'glass-mt-2 glass-p-4 glass-radius-md glass-text-xs overflow-auto glass-surface-danger',
              children: [this.state.error.toString(), this.state.errorInfo?.componentStack]
            })]
          }), jsxs("div", {
            className: "glass-gap-4 glass-flex",
            children: [jsx("button", {
              onClick: this.handleReset,
              className: "glass-button glass-touch-target glass-focus glass-touch-target glass-contrast-guard glass-focus glass-touch-target glass-contrast-guard",
              "aria-label": "Try again",
              children: "Try Again"
            }), jsx("button", {
              onClick: e => window.location.href = "/",
              className: "glass-button glass-subtle glass-touch-target",
              "aria-label": "Go to homepage",
              children: "Go Home"
            })]
          })]
        })
      });
    }
    return this.props.children;
  }
}

export { GlassErrorBoundary };
//# sourceMappingURL=GlassErrorBoundary.js.map