Biomimicry-AI/Nexus

1import React from "react";2import { IconButton } from "./button";3import GithubIcon from "../icons/github.svg";4import ResetIcon from "../icons/reload.svg";5import { ISSUE_URL } from "../constant";6import Locale from "../locales";7import { showConfirm } from "./ui-lib";8import { useSyncStore } from "../store/sync";9 10interface IErrorBoundaryState {11  hasError: boolean;12  error: Error | null;13  info: React.ErrorInfo | null;14}15 16export class ErrorBoundary extends React.Component<any, IErrorBoundaryState> {17  constructor(props: any) {18    super(props);19    this.state = { hasError: false, error: null, info: null };20  }21 22  componentDidCatch(error: Error, info: React.ErrorInfo) {23    // Update state with error details24    this.setState({ hasError: true, error, info });25  }26 27  clearAndSaveData() {28    try {29      useSyncStore.getState().export();30    } finally {31      localStorage.clear();32      location.reload();33    }34  }35 36  render() {37    if (this.state.hasError) {38      // Render error message39      return (40        <div className="error">41          <h2>Oops, something went wrong!</h2>42          <pre>43            <code>{this.state.error?.toString()}</code>44            <code>{this.state.info?.componentStack}</code>45          </pre>46 47          <div style={{ display: "flex", justifyContent: "space-between" }}>48            {/* Commented out GitHub icon and link49            <a href={ISSUE_URL} className="report">50              <IconButton51                text="Report This Error"52                icon={<GithubIcon />}53                bordered54              />55            </a>56            */}57            <IconButton58              icon={<ResetIcon />}59              text="Clear All Data"60              onClick={async () => {61                if (await showConfirm(Locale.Settings.Danger.Reset.Confirm)) {62                  this.clearAndSaveData();63                }64              }}65              bordered66            />67          </div>68        </div>69      );70    }71    // if no error occurred, render children72    return this.props.children;73  }74}75