ErrorFallback.js

/**
 * Error Fallback Component
 * This component is displayed when there's a critical error during app initialization
 */

// CRITICAL FIX: Use require instead of import to avoid Hermes issues
const React = require('react');
const ReactNative = require('react-native');
const {
  SafeAreaView,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  ScrollView,
  Platform,
} = ReactNative;

class ErrorFallback extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      errorInfo: null,
      logs: [],
    };

    // Capture console logs
    this.originalConsoleLog = console.log;
    this.originalConsoleError = console.error;
    this.originalConsoleWarn = console.warn;

    console.log = (...args) => {
      this.captureLog('log', args);
      this.originalConsoleLog(...args);
    };

    console.error = (...args) => {
      this.captureLog('error', args);
      this.originalConsoleError(...args);
    };

    console.warn = (...args) => {
      this.captureLog('warn', args);
      this.originalConsoleWarn(...args);
    };
  }

  captureLog(type, args) {
    const log = {
      type,
      message: args.map(arg =>
        typeof arg === 'object' ? JSON.stringify(arg) : String(arg)
      ).join(' '),
      timestamp: new Date().toISOString(),
    };

    this.setState(prevState => ({
      logs: [...prevState.logs.slice(-50), log], // Keep only the last 50 logs
    }));
  }

  componentDidCatch(error, errorInfo) {
    this.setState({
      error,
      errorInfo,
    });
  }

  handleRestart = () => {
    // Attempt to reload the app
    if (Platform.OS === 'web') {
      window.location.reload();
    } else {
      // For native platforms, we can only suggest restarting the app
      alert('Please close and restart the app manually.');
    }
  };

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <View style={styles.header}>
          <Text style={styles.title}>DarkGridAI</Text>
        </View>

        <View style={styles.errorContainer}>
          <Text style={styles.errorTitle}>Initialization Error</Text>
          <Text style={styles.errorMessage}>
            The app encountered an error during initialization. This is likely due to a native module loading issue.
          </Text>

          <Text style={styles.errorDetails}>
            Error: {this.state.error ? this.state.error.toString() : 'Unknown error'}
          </Text>

          <TouchableOpacity style={styles.button} onPress={this.handleRestart}>
            <Text style={styles.buttonText}>Restart App</Text>
          </TouchableOpacity>
        </View>

        <View style={styles.logsContainer}>
          <Text style={styles.logsTitle}>Debug Logs:</Text>
          <ScrollView style={styles.logs}>
            {this.state.logs.map((log, index) => (
              <Text
                key={index}
                style={[
                  styles.logEntry,
                  log.type === 'error' && styles.errorLog,
                  log.type === 'warn' && styles.warnLog,
                ]}
              >
                {log.message}
              </Text>
            ))}
          </ScrollView>
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8f9fa',
  },
  header: {
    padding: 16,
    backgroundColor: '#4a6da7',
    alignItems: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    color: 'white',
  },
  errorContainer: {
    padding: 20,
    alignItems: 'center',
  },
  errorTitle: {
    fontSize: 22,
    fontWeight: 'bold',
    color: '#dc3545',
    marginBottom: 10,
  },
  errorMessage: {
    fontSize: 16,
    color: '#343a40',
    textAlign: 'center',
    marginBottom: 20,
  },
  errorDetails: {
    fontSize: 14,
    color: '#721c24',
    backgroundColor: '#f8d7da',
    padding: 10,
    borderRadius: 5,
    marginBottom: 20,
    width: '100%',
  },
  button: {
    backgroundColor: '#007bff',
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 5,
    marginTop: 10,
  },
  buttonText: {
    color: '#ffffff',
    fontSize: 16,
    fontWeight: 'bold',
  },
  logsContainer: {
    flex: 1,
    padding: 10,
    backgroundColor: '#343a40',
  },
  logsTitle: {
    color: '#ffffff',
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  logs: {
    flex: 1,
  },
  logEntry: {
    color: '#cccccc',
    fontSize: 12,
    fontFamily: 'monospace',
    marginBottom: 2,
  },
  errorLog: {
    color: '#ff6b6b',
  },
  warnLog: {
    color: '#ffd166',
  },
});

// Export the component using CommonJS
module.exports = ErrorFallback;