react-session.manager.sk 2.0.0 → 2.0.2

package/dist/index.js.LICENSE.txt

@@ -17,3 +17,12 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-session.manager.sk",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "A react component used to manage token sessions with flask backend",
   "main": "./dist/index.js",
   "scripts": {

package/src/components/ErrorBoundary.js

@@ -0,0 +1,143 @@
+import React from "react";
+import { toast } from "react-toastify";
+import { Error as ErrorIcon } from "@mui/icons-material";
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null, errorInfo: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error("ErrorBoundary caught an error:", error, errorInfo);
+
+    this.setState({
+      error: error,
+      errorInfo: errorInfo,
+    });
+
+    // Check if this is a theme-related error
+    const isThemeError =
+      error?.message?.includes("Cannot convert undefined or null to object") &&
+      (error?.stack?.includes("Object.entries") ||
+        error?.stack?.includes("theme") ||
+        error?.stack?.includes("Styled"));
+
+    const errorMessage = isThemeError
+      ? "A theme error occurred. This might be due to connection issues. Please refresh the page."
+      : "Something went wrong. Please refresh the page or try again later.";
+
+    // Show a toast notification for the error
+    toast.error(errorMessage, {
+      toastId: "error-boundary",
+      icon: <ErrorIcon />,
+      autoClose: 10000,
+    });
+
+    // Log error to external service if needed
+    if (this.props.onError) {
+      this.props.onError(error, errorInfo);
+    }
+  }
+
+  handleRetry = () => {
+    this.setState({ hasError: false, error: null, errorInfo: null });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      // Custom error UI
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <div
+          style={{
+            padding: "20px",
+            textAlign: "center",
+            backgroundColor: "#f8f9fa",
+            border: "1px solid #dee2e6",
+            borderRadius: "8px",
+            margin: "20px",
+            minHeight: "200px",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <div style={{ fontSize: "48px", marginBottom: "16px" }}>⚠️</div>
+          <h2 style={{ color: "#343a40", marginBottom: "16px" }}>
+            Something went wrong
+          </h2>
+          <p style={{ color: "#6c757d", marginBottom: "20px" }}>
+            An unexpected error occurred. Please try refreshing the page.
+          </p>
+          <button
+            onClick={this.handleRetry}
+            style={{
+              backgroundColor: "#007bff",
+              color: "white",
+              border: "none",
+              padding: "10px 20px",
+              borderRadius: "4px",
+              cursor: "pointer",
+              marginRight: "10px",
+            }}
+          >
+            Try Again
+          </button>
+          <button
+            onClick={() => window.location.reload()}
+            style={{
+              backgroundColor: "#28a745",
+              color: "white",
+              border: "none",
+              padding: "10px 20px",
+              borderRadius: "4px",
+              cursor: "pointer",
+            }}
+          >
+            Refresh Page
+          </button>
+
+          {process.env.NODE_ENV === "development" && this.state.error && (
+            <details
+              style={{ marginTop: "20px", textAlign: "left", width: "100%" }}
+            >
+              <summary style={{ cursor: "pointer", fontWeight: "bold" }}>
+                Error Details (Development)
+              </summary>
+              <pre
+                style={{
+                  backgroundColor: "#f8f9fa",
+                  padding: "10px",
+                  borderRadius: "4px",
+                  overflow: "auto",
+                  fontSize: "12px",
+                  marginTop: "10px",
+                  maxHeight: "300px",
+                  textAlign: "left",
+                }}
+              >
+                {this.state.error && this.state.error.toString()}
+                <br />
+                {this.state.errorInfo?.componentStack}
+              </pre>
+            </details>
+          )}
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

package/src/components/ThemeWrapper.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+
+// Fallback theme for when the main app theme is not available
+const fallbackTheme = createTheme({
+  palette: {
+    mode: "light",
+    primary: {
+      main: "#1976d2",
+    },
+    secondary: {
+      main: "#dc3545",
+    },
+    error: {
+      main: "#d32f2f",
+    },
+    warning: {
+      main: "#ed6c02",
+    },
+    info: {
+      main: "#0288d1",
+    },
+    success: {
+      main: "#2e7d32",
+    },
+  },
+});
+
+const ThemeWrapper = ({ children, theme }) => {
+  // Use the provided theme or fallback theme
+  const safeTheme = theme || fallbackTheme;
+
+  return <ThemeProvider theme={safeTheme}>{children}</ThemeProvider>;
+};
+
+export default ThemeWrapper;