tycho-components 0.2.2-SNAPSHOT-8 → 0.2.2-SNAPSHOT-9

package/dist/Base/ErrorBoundary.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import './style.scss';
+type Props = {
+    children: ReactNode;
+};
+export default function ErrorBoundary({ children }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Base/ErrorBoundary.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { Button } from 'tycho-storybook';
+import CookieStorage from '../configs/CookieStorage';
+import logo from './logo.png';
+import './style.scss';
+export default function ErrorBoundary({ children }) {
+    const navigate = useNavigate();
+    const { t } = useTranslation('base');
+    const [show, setShow] = useState(false);
+    const [state, setState] = useState({
+        hasError: false,
+        error: null,
+    });
+    const handleRedirect = () => {
+        navigate('/', { replace: true });
+    };
+    const handleRetry = () => {
+        const redirectUri = CookieStorage.getRedirectUri();
+        redirectUri ? (window.location.href = redirectUri) : handleRedirect();
+    };
+    // Hook to simulate the behavior of componentDidCatch
+    useEffect(() => {
+        const handleError = (error) => {
+            console.error('Caught by ErrorBoundary:', error);
+            setState({ hasError: true, error });
+        };
+        // Catch unhandled promise rejections globally
+        window.addEventListener('unhandledrejection', (event) => {
+            handleError(event.reason);
+        });
+        // Catch uncaught errors globally
+        window.addEventListener('error', (event) => {
+            handleError(event.error);
+        });
+        return () => {
+            window.removeEventListener('unhandledrejection', (event) => {
+                handleError(event.reason);
+            });
+            window.removeEventListener('error', (event) => {
+                handleError(event.error);
+            });
+        };
+    }, []);
+    if (state.hasError && state.error) {
+        return (_jsx("div", { className: "box-container", children: _jsxs("div", { className: "box", children: [_jsx("img", { src: logo }), _jsx("div", { className: "title", children: t('label.error.found') }), _jsxs("div", { className: "buttons", children: [_jsx(Button, { text: t('label.retry'), size: "small", onClick: handleRetry }), _jsx(Button, { text: t('label.redirect'), size: "small", onClick: handleRedirect }), _jsx(Button, { text: t('label.error.details'), size: "small", onClick: () => setShow(!show) })] }), show && _jsx("pre", { className: "error-stack", children: state.error?.stack })] }) }));
+    }
+    return _jsx(_Fragment, { children: children });
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.2.2-SNAPSHOT-8",
+  "version": "0.2.2-SNAPSHOT-9",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {