react-native-inapp-inspector 1.0.4 → 1.0.5

package/dist/esm/components/ErrorBoundary.js

@@ -0,0 +1,295 @@
+import React, { Component } from 'react';
+import { StyleSheet, Text, View, ScrollView, TouchableOpacity, Platform } from 'react-native';
+import { AppColors } from '../styles/AppColors';
+import { AppFonts } from '../styles/AppFonts';
+import { copyToClipboard } from '../helpers';
+function parseStackTrace(stack) {
+    if (!stack)
+        return null;
+    const lines = stack.split('\n');
+    for (const line of lines) {
+        if (line.includes('ErrorBoundary') ||
+            line.includes('getDerivedStateFromError') ||
+            line.includes('componentDidCatch')) {
+            continue;
+        }
+        // Matching ios format: method@url:line:col
+        const iosMatch = line.match(/^([^@]+)@(.*):(\d+):(\d+)$/);
+        if (iosMatch) {
+            const [, method, file, lineNum, colNum] = iosMatch;
+            const cleanFile = file.split('?')[0].split('/').pop() || file;
+            return { method: method.trim(), file: cleanFile, line: lineNum, column: colNum };
+        }
+        // Matching android format: at method (url:line:col) or at url:line:col
+        const androidMatch = line.match(/^\s*at\s+(.+)\s+\((.+):(\d+):(\d+)\)$/);
+        if (androidMatch) {
+            const [, method, file, lineNum, colNum] = androidMatch;
+            const cleanFile = file.split('?')[0].split('/').pop() || file;
+            return { method: method.trim(), file: cleanFile, line: lineNum, column: colNum };
+        }
+        const androidMatchSimple = line.match(/^\s*at\s+(.+):(\d+):(\d+)$/);
+        if (androidMatchSimple) {
+            const [, file, lineNum, colNum] = androidMatchSimple;
+            const cleanFile = file.split('?')[0].split('/').pop() || file;
+            return { method: 'anonymous', file: cleanFile, line: lineNum, column: colNum };
+        }
+    }
+    return null;
+}
+export class ErrorBoundary extends Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            hasError: false,
+            error: null,
+        };
+        this.handleReset = () => {
+            this.setState({ hasError: false, error: null });
+            if (this.props.onReset) {
+                this.props.onReset();
+            }
+        };
+        this.handleCopyTrace = () => {
+            const error = this.state.error;
+            if (error) {
+                const isNativeCrash = error.message.includes('Native') || error.message.includes('native') || error.message.includes('Swift') || error.message.includes('Java');
+                const parsed = error.stack ? parseStackTrace(error.stack) : null;
+                const detailStr = `Crash Source: ${isNativeCrash ? 'Native Crash' : 'JavaScript Crash'}
+Message: ${error.message}
+${parsed ? `Method: ${parsed.method}\nFile: ${parsed.file}\nLine: ${parsed.line}:${parsed.column}` : ''}
+Stack Trace:
+${error.stack}`;
+                copyToClipboard(detailStr, 'Crash traceback');
+            }
+        };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error('InAppInspector ErrorBoundary caught a crash:', error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError) {
+            const isInline = this.props.fallbackType === 'inline';
+            if (isInline) {
+                return (<View style={styles.inlineContainer}>
+            <Text style={styles.inlineTitle}>⚠️ Inspector Crash</Text>
+            <TouchableOpacity style={styles.inlineResetBtn} onPress={this.handleReset}>
+              <Text style={styles.inlineResetText}>Reload</Text>
+            </TouchableOpacity>
+          </View>);
+            }
+            const error = this.state.error;
+            const isNativeCrash = error ? (error.message.includes('Native') || error.message.includes('native') || error.message.includes('Swift') || error.message.includes('Java')) : false;
+            const parsed = error && error.stack ? parseStackTrace(error.stack) : null;
+            return (<View style={styles.container}>
+          <View style={styles.card}>
+            <Text style={styles.emoji}>⚠️</Text>
+            <Text style={styles.title}>Something went wrong</Text>
+            
+            <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    backgroundColor: isNativeCrash ? 'rgba(239, 68, 68, 0.1)' : 'rgba(245, 158, 11, 0.1)',
+                    paddingHorizontal: 10,
+                    paddingVertical: 4,
+                    borderRadius: 20,
+                    marginBottom: 12,
+                    gap: 4
+                }}>
+              <Text style={{
+                    fontSize: 10,
+                    fontWeight: 'bold',
+                    color: isNativeCrash ? '#EF4444' : '#F59E0B',
+                    fontFamily: AppFonts.interBold || 'System'
+                }}>
+                {isNativeCrash ? '🔴 NATIVE CRASH' : '🟡 JAVASCRIPT CRASH'}
+              </Text>
+            </View>
+
+            <Text style={styles.subtitle}>
+              The In-App Inspector or active view encountered an error. Traceback details are parsed below:
+            </Text>
+
+            {parsed && (<View style={{
+                        backgroundColor: '#F1F5F9',
+                        borderRadius: 8,
+                        padding: 10,
+                        width: '100%',
+                        marginBottom: 10,
+                        borderWidth: 1,
+                        borderColor: '#E2E8F0',
+                        gap: 4
+                    }}>
+                <Text style={{ fontSize: 11, color: '#475569', fontFamily: AppFonts.interMedium }} numberOfLines={1}>
+                  <Text style={{ fontWeight: 'bold' }}>Method:</Text> {parsed.method}
+                </Text>
+                <Text style={{ fontSize: 11, color: '#475569', fontFamily: AppFonts.interMedium }} numberOfLines={1}>
+                  <Text style={{ fontWeight: 'bold' }}>File:</Text> {parsed.file}
+                </Text>
+                <Text style={{ fontSize: 11, color: '#475569', fontFamily: AppFonts.interMedium }}>
+                  <Text style={{ fontWeight: 'bold' }}>Line:</Text> {parsed.line}  <Text style={{ fontWeight: 'bold' }}>Col:</Text> {parsed.column}
+                </Text>
+              </View>)}
+
+            {error && (<ScrollView style={styles.scroll} contentContainerStyle={styles.scrollContent}>
+                <Text style={styles.code}>
+                  {error.message}
+                  {'\n\n'}
+                  {error.stack}
+                </Text>
+              </ScrollView>)}
+
+            <View style={{ width: '100%', gap: 8, marginBottom: 12 }}>
+              <TouchableOpacity style={{
+                    backgroundColor: '#0F172A',
+                    height: 38,
+                    borderRadius: 8,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    flexDirection: 'row',
+                    gap: 6
+                }} onPress={this.handleCopyTrace}>
+                <Text style={{ color: '#FFFFFF', fontSize: 12, fontWeight: 'bold', fontFamily: AppFonts.interBold || 'System' }}>
+                  📋 Copy Crash Traceback
+                </Text>
+              </TouchableOpacity>
+            </View>
+
+            <View style={styles.btnRow}>
+              <TouchableOpacity style={styles.resetBtn} onPress={this.handleReset}>
+                <Text style={styles.resetBtnText}>Retry / Reload</Text>
+              </TouchableOpacity>
+              
+              {this.props.onClose && (<TouchableOpacity style={styles.closeBtn} onPress={this.props.onClose}>
+                  <Text style={styles.closeBtnText}>Close Inspector</Text>
+                </TouchableOpacity>)}
+            </View>
+          </View>
+        </View>);
+        }
+        return this.props.children;
+    }
+}
+const monoFont = Platform.OS === 'ios' ? 'Menlo' : 'monospace';
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: 'rgba(0,0,0,0.3)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 16,
+    },
+    card: {
+        width: '100%',
+        maxWidth: 400,
+        backgroundColor: '#FFFFFF',
+        borderRadius: 16,
+        padding: 20,
+        alignItems: 'center',
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.1,
+        shadowRadius: 12,
+        elevation: 8,
+    },
+    emoji: {
+        fontSize: 40,
+        marginBottom: 12,
+    },
+    title: {
+        fontFamily: AppFonts.interBold || 'System',
+        fontSize: 18,
+        color: '#0F172A',
+        marginBottom: 8,
+        textAlign: 'center',
+    },
+    subtitle: {
+        fontFamily: AppFonts.interRegular || 'System',
+        fontSize: 12,
+        color: '#64748B',
+        lineHeight: 18,
+        textAlign: 'center',
+        marginBottom: 16,
+    },
+    scroll: {
+        width: '100%',
+        maxHeight: 180,
+        backgroundColor: '#F8FAFC',
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: '#E2E8F0',
+        padding: 10,
+        marginBottom: 20,
+    },
+    scrollContent: {
+        paddingBottom: 10,
+    },
+    code: {
+        fontFamily: monoFont,
+        fontSize: 11,
+        color: '#E11D48',
+    },
+    btnRow: {
+        flexDirection: 'row',
+        gap: 12,
+        width: '100%',
+    },
+    resetBtn: {
+        flex: 1,
+        backgroundColor: AppColors.purple || '#684B9B',
+        height: 40,
+        borderRadius: 8,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    resetBtnText: {
+        fontFamily: AppFonts.interBold || 'System',
+        fontSize: 13,
+        color: '#FFFFFF',
+    },
+    closeBtn: {
+        flex: 1,
+        backgroundColor: '#F1F5F9',
+        borderWidth: 1,
+        borderColor: '#E2E8F0',
+        height: 40,
+        borderRadius: 8,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    closeBtnText: {
+        fontFamily: AppFonts.interBold || 'System',
+        fontSize: 13,
+        color: '#475569',
+    },
+    inlineContainer: {
+        padding: 8,
+        backgroundColor: '#FFE4E6',
+        borderWidth: 1,
+        borderColor: '#FCA5A5',
+        borderRadius: 8,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        margin: 8,
+    },
+    inlineTitle: {
+        fontFamily: AppFonts.interBold || 'System',
+        fontSize: 11,
+        color: '#991B1B',
+    },
+    inlineResetBtn: {
+        backgroundColor: '#991B1B',
+        paddingHorizontal: 10,
+        paddingVertical: 4,
+        borderRadius: 4,
+    },
+    inlineResetText: {
+        fontFamily: AppFonts.interBold || 'System',
+        fontSize: 10,
+        color: '#FFFFFF',
+    },
+});
+export default ErrorBoundary;

package/dist/esm/components/NetworkIcons.d.ts

@@ -29,3 +29,8 @@ export declare const FilterIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const DownloadIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const CloseWhite: ({ color, size }: any) => React.JSX.Element;
 export declare const WhiteBackNavigation: ({ color, size }: any) => React.JSX.Element;
+export declare const AnalyticsIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const InsightsIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const DebugIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const SunIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const MoonIcon: ({ color, size }: any) => React.JSX.Element;

package/dist/esm/components/NetworkIcons.js

@@ -174,3 +174,42 @@ export const WhiteBackNavigation = ({ color = '#FFFFFF', size = 20 }) => {
       <Path d="M19 12H5M12 19l-7-7 7-7" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
     </Svg>);
 };
+export const AnalyticsIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M18 20V10M12 20V4M6 20v-6" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const InsightsIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M2 17l6-6 4 4 10-10M22 12V7h-5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const DebugIcon = ({ color = '#FFFFFF', size = 18 }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      {/* Hammer: diagonal from bottom-left to top-right */}
+      {/* Handle */}
+      <Path d="M6 18l8-8" stroke={color} strokeWidth="2.5" strokeLinecap="round"/>
+      {/* Head */}
+      <Path d="M13.5 10.5l2-2 1.5 1.5-2 2-1.5-1.5z" fill={color}/>
+      <Path d="M15.5 8.5L19 5c.5-.5 1.2-.5 1.7 0s.5 1.2 0 1.7L17.2 10.2" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+
+      {/* Screwdriver: diagonal from bottom-right to top-left */}
+      {/* Handle */}
+      <Path d="M15 15l4 4" stroke={color} strokeWidth="3.5" strokeLinecap="round"/>
+      {/* Shaft */}
+      <Path d="M15 15L8.5 8.5" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      {/* Flat tip */}
+      <Path d="M9 9L5 5M4.5 6.5l2-2" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    </Svg>);
+};
+export const SunIcon = ({ color = '#FFFFFF', size = 16 }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Circle cx="12" cy="12" r="5" stroke={color} strokeWidth="2"/>
+      <Path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    </Svg>);
+};
+export const MoonIcon = ({ color = '#FFFFFF', size = 16 }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" fill={color} stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};

package/dist/esm/customHooks/reduxLogger.d.ts

@@ -0,0 +1,4 @@
+export declare const getReduxState: () => any;
+export declare const setReduxState: (state: any) => void;
+export declare const subscribeReduxState: (cb: () => void) => () => void;
+export declare const connectReduxStore: (store: any) => void;

package/dist/esm/customHooks/reduxLogger.js

@@ -0,0 +1,23 @@
+let currentReduxState = null;
+const listeners = new Set();
+export const getReduxState = () => currentReduxState;
+export const setReduxState = (state) => {
+    currentReduxState = state;
+    listeners.forEach(cb => cb());
+};
+export const subscribeReduxState = (cb) => {
+    listeners.add(cb);
+    return () => {
+        listeners.delete(cb);
+    };
+};
+export const connectReduxStore = (store) => {
+    if (!store || typeof store.getState !== 'function' || typeof store.subscribe !== 'function') {
+        console.warn('[NetworkInspector] Invalid Redux store passed to connectReduxStore.');
+        return;
+    }
+    setReduxState(store.getState());
+    store.subscribe(() => {
+        setReduxState(store.getState());
+    });
+};

package/dist/esm/customHooks/webViewLogger.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export interface WebViewLog {
     id: number;
     type: 'log' | 'info' | 'warn' | 'error';
@@ -9,6 +10,7 @@ export interface WebViewNavState {
     title?: string;
     timestamp: number;
 }
+export declare const WebView: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
 export declare const addWebViewLog: (type: "log" | "info" | "warn" | "error", message: string) => void;
 export declare const addWebViewNav: (url: string, title?: string) => void;
 export declare const addWebViewHtml: (url: string, html: string, css?: string, js?: string) => void;