@tcbs/react-native-mazic-ui 0.1.5 → 0.1.6

package/README.md

@@ -1,5 +1,12 @@
 # @tcbs/react-native-mazic-ui
 
+![npm](https://img.shields.io/npm/v/@tcbs/react-native-mazic-ui)
+![downloads](https://img.shields.io/npm/dw/@tcbs/react-native-mazic-ui)
+![license](https://img.shields.io/npm/l/@tcbs/react-native-mazic-ui)
+[
+  ![Docs](https://img.shields.io/badge/docs-UI%20Docs-blue?logo=readthedocs&logoColor=white&style=flat-square)
+](https://tcbscli.subraatakumar.com/ui-home/)
+
 A customizable React Native UI component library.
 
 ## Installation
@@ -12,6 +19,36 @@ npm install @tcbs/react-native-mazic-ui @tcbs/react-native-exception-handler
 yarn add @tcbs/react-native-mazic-ui @tcbs/react-native-exception-handler
 ```
 
+
+## Error Handling: AppErrorBoundary
+
+`AppErrorBoundary` is a React error boundary component for catching and displaying errors in your app. It supports custom fallback UIs for both development and production modes.
+
+### Quick Usage
+
+```tsx
+import { AppErrorBoundary } from '@tcbs/react-native-mazic-ui';
+
+<AppErrorBoundary>
+  <YourApp/>
+</AppErrorBoundary>
+```
+
+You can also provide custom fallback UIs for dev and prod:
+
+```tsx
+<AppErrorBoundary
+  fallbackDev={<Text>DEV: Something went wrong.</Text>}
+  fallbackProd={<Text>PROD: Please try again later.</Text>}
+>
+  <YourApp/>
+</AppErrorBoundary>
+```
+
+For full details and advanced usage, see [docs](https://tcbscli.subraatakumar.com/ui-home/apperrorboundary).
+
+---
+
 ## Theme Setup Example
 
 ```tsx

package/package.json

@@ -13,7 +13,7 @@
     "react-native-vector-icons"
   ],
   "author": "TechCraft By Subrata <subraatakumar@gmail.com>",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "publishConfig": {
     "access": "public"
   },
@@ -36,8 +36,7 @@
     "@tcbs/react-native-exception-handler": "1.0.0"
   },
   "dependencies": {
-    "react-native-vector-icons": ">=10.2.0",
-    "react-error-boundary": ">=5.0.0"
+    "react-native-vector-icons": ">=10.2.0"
   },  
   "devDependencies": {
     "@types/react": "^17.0.0",

package/src/components/error/AppErrorBoundary.tsx

@@ -12,6 +12,8 @@ setupGlobalExceptionHandlers();
 
 export interface AppErrorBoundaryProps {
   children?: React.ReactNode;
+  fallbackDev?: React.ReactNode;
+  fallbackProd?: React.ReactNode;
 }
 
 export interface AppErrorBoundaryState {
@@ -35,6 +37,15 @@ export class AppErrorBoundary extends React.Component<AppErrorBoundaryProps, App
     errorInfo: null,
   };
 
+  handleReset = () => {
+    this.setState({
+      hasError: false,
+      error: null,
+      reactError: null,
+      errorInfo: null,
+    });
+  };
+
   static getDerivedStateFromError(error: any) {
     return { hasError: true, error };
   }
@@ -57,11 +68,19 @@ export class AppErrorBoundary extends React.Component<AppErrorBoundaryProps, App
 
   renderDevError() {
     const { error, reactError, errorInfo } = this.state;
+    const { fallbackDev } = this.props;
+
+    if (fallbackDev) {
+      // Custom fallback for DEV
+      return typeof fallbackDev === 'function'
+        ? fallbackDev({ error, errorInfo, reset: this.handleReset })
+        : fallbackDev;
+    }
 
     if (!error) return null;
 
     return (
-      <SafeAreaView style={{ flex: 1 }}>
+      <SafeAreaView style={{ flex: 1, marginBottom: 40 }}>
         <ScrollView style={styles.container}>
           <Text style={styles.title}>🚨 Application Error (DEV)</Text>
 
@@ -85,18 +104,39 @@ export class AppErrorBoundary extends React.Component<AppErrorBoundaryProps, App
               {errorInfo?.componentStack}
             </Text>
           </Section>
+          {/* Try Again Button */}
+          <View style={styles.buttonContainer}>
+            <Text style={styles.tryAgainButton} onPress={this.handleReset}>
+              🔄 Try Again
+            </Text>
+          </View>
         </ScrollView>
       </SafeAreaView>
     );
   }
 
   renderProdError() {
+    const { fallbackProd } = this.props;
+    const { error, errorInfo } = this.state;
+
+    if (fallbackProd) {
+      // Custom fallback for PROD
+      return typeof fallbackProd === 'function'
+        ? fallbackProd({ error, errorInfo, reset: this.handleReset })
+        : fallbackProd;
+    }
+
     return (
       <View style={styles.prodContainer}>
         <Text style={styles.prodTitle}>Something went wrong</Text>
         <Text style={styles.prodSubtitle}>
           Please restart the application.
         </Text>
+        <View style={styles.buttonContainer}>
+          <Text style={styles.tryAgainButton} onPress={this.handleReset}>
+            🔄 Try Again
+          </Text>
+        </View>
       </View>
     );
   }
@@ -129,7 +169,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#0f172a',
-    padding: 16,
+    // padding: 36,
   },
   title: {
     fontSize: 18,
@@ -176,4 +216,18 @@ const styles = StyleSheet.create({
     color: '#666',
     textAlign: 'center',
   },
+  buttonContainer: {
+    marginTop: 24,
+    alignItems: 'center',
+  },
+  tryAgainButton: {
+    backgroundColor: '#38bdf8',
+    color: '#fff',
+    paddingVertical: 10,
+    paddingHorizontal: 24,
+    borderRadius: 8,
+    fontWeight: '700',
+    fontSize: 16,
+    overflow: 'hidden',
+  },
 });

package/src/store/globalErrorStore.ts

@@ -0,0 +1,13 @@
+import {create} from 'zustand';
+
+export interface GlobalErrorState {
+  fatalError: null | { error: any };
+  setFatalError: (error: any) => void;
+  clearFatalError: () => void;
+}
+
+export const useGlobalErrorStore = create<GlobalErrorState>((set) => ({
+  fatalError: null,
+  setFatalError: (error) => set({ fatalError: { error } }),
+  clearFatalError: () => set({ fatalError: null }),
+}));