@exabytellc/app/dist/AppBoundary/components/ErrorBoundary.js

EB react app to make everything a little easier!

import React, { Component } from "react";
import PropTypes from "prop-types";
// Example: import * as Sentry from "@sentry/react";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      errorMessage: ""
    };
  }
  static getDerivedStateFromError(error) {
    return {
      hasError: true,
      errorMessage: error.message
    };
  }
  componentDidCatch(error, errorInfo) {
    console.error("Error in ErrorBoundary:", error, errorInfo);

    // Send error to a monitoring service (Example: Sentry)
    // Sentry.captureException(error);

    this.setState({
      hasError: true,
      errorMessage: error.message
    });
  }
  resetError = () => {
    this.setState({
      hasError: false,
      errorMessage: ""
    });
  };
  render() {
    if (this.state.hasError) {
      const Fallback = this.props?.fallback;
      return Fallback ? /*#__PURE__*/_jsx(Fallback, {
        error: this.state.errorMessage
      }) : /*#__PURE__*/_jsxs("div", {
        style: {
          padding: "20px",
          textAlign: "center"
        },
        children: [/*#__PURE__*/_jsx("h2", {
          children: "Something went wrong."
        }), /*#__PURE__*/_jsx("p", {
          children: this.state.errorMessage
        }), /*#__PURE__*/_jsx("button", {
          onClick: this.resetError,
          children: "Try Again"
        })]
      });
    }
    return this.props.children;
  }
}
ErrorBoundary.propTypes = {
  children: PropTypes.node.isRequired,
  fallback: PropTypes.func
};