Production Best Practices

// services/monitoringService.js
import crashlytics from '@react-native-firebase/crashlytics';
import analytics from '@react-native-firebase/analytics';
import perf from '@react-native-firebase/perf';

class MonitoringService {
  constructor() {
    this.isInitialized = false;
    this.init();
  }

  async init() {
    try {
      // Initialize Firebase services
      await this.setupCrashlytics();
      await this.setupAnalytics();
      await this.setupPerformance();
      
      this.isInitialized = true;
      console.log('Monitoring service initialized');
    } catch (error) {
      console.error('Error initializing monitoring:', error);
    }
  }

  // Crash Reporting
  async setupCrashlytics() {
    // Enable crash collection
    await crashlytics().setCrashlyticsCollectionEnabled(true);
    
    // Set user identifier
    crashlytics().setUserId('user123');
    
    // Set custom attributes
    crashlytics().setAttributes({
      app_version: '1.0.0',
      platform: Platform.OS,
      build_number: '1',
    });
  }

  // Analytics
  async setupAnalytics() {
    // Set user properties
    await analytics().setUserProperties({
      user_type: 'premium',
      subscription_status: 'active',
    });
  }

  // Performance Monitoring
  async setupPerformance() {
    // Start app startup trace
    const trace = await perf().startTrace('app_startup');
    
    // End trace when app is ready
    setTimeout(() => {
      trace.stop();
    }, 2000);
  }

  // Log custom events
  async logEvent(eventName, parameters = {}) {
    if (!this.isInitialized) return;

    try {
      await analytics().logEvent(eventName, {
        timestamp: Date.now(),
        platform: Platform.OS,
        ...parameters,
      });
    } catch (error) {
      console.error('Error logging event:', error);
    }
  }

  // Log errors
  async logError(error, context = {}) {
    if (!this.isInitialized) return;

    try {
      crashlytics().recordError(error);
      crashlytics().setAttributes(context);
    } catch (err) {
      console.error('Error logging to crashlytics:', err);
    }
  }

  // Performance monitoring
  async startTrace(traceName) {
    if (!this.isInitialized) return null;

    try {
      return await perf().startTrace(traceName);
    } catch (error) {
      console.error('Error starting trace:', error);
      return null;
    }
  }

  // Network monitoring
  async startNetworkTrace(url, method = 'GET') {
    if (!this.isInitialized) return null;

    try {
      return await perf().startTrace(`network_${method.toLowerCase()}_${url.replace(/[^a-zA-Z0-9]/g, '_')}`);
    } catch (error) {
      console.error('Error starting network trace:', error);
      return null;
    }
  }
}

// Error Boundary Component
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    // Log error to monitoring service
    monitoringService.logError(error, {
      componentStack: errorInfo.componentStack,
      errorBoundary: this.constructor.name,
    });
  }

  render() {
    if (this.state.hasError) {
      return (
        <View style={styles.errorContainer}>
          <Text style={styles.errorTitle}>Something went wrong</Text>
          <Text style={styles.errorMessage}>
            We're sorry, but something unexpected happened.
          </Text>
          <TouchableOpacity
            style={styles.retryButton}
            onPress={() => this.setState({ hasError: false, error: null })}
          >
            <Text style={styles.retryText}>Try Again</Text>
          </TouchableOpacity>
        </View>
      );
    }

    return this.props.children;
  }
}

// Performance monitoring hook
const usePerformanceMonitoring = () => {
  const [metrics, setMetrics] = useState({});

  const trackScreenView = async (screenName) => {
    await monitoringService.logEvent('screen_view', {
      screen_name: screenName,
      screen_class: screenName,
    });
  };

  const trackUserAction = async (action, parameters = {}) => {
    await monitoringService.logEvent('user_action', {
      action,
      ...parameters,
    });
  };

  const trackApiCall = async (endpoint, method, duration, success) => {
    await monitoringService.logEvent('api_call', {
      endpoint,
      method,
      duration,
      success,
    });
  };

  return {
    trackScreenView,
    trackUserAction,
    trackApiCall,
    metrics,
  };
};

// Production configuration
const productionConfig = {
  // Environment
  environment: 'production',
  
  // API Configuration
  api: {
    baseUrl: 'https://api.yourapp.com',
    timeout: 30000,
    retryAttempts: 3,
  },
  
  // Analytics
  analytics: {
    enabled: true,
    debugMode: false,
    sampleRate: 1.0,
  },
  
  // Crash Reporting
  crashlytics: {
    enabled: true,
    collectionEnabled: true,
  },
  
  // Performance
  performance: {
    enabled: true,
    dataCollectionEnabled: true,
    instrumentationEnabled: true,
  },
  
  // security
  security: {
    enableSSLPinning: true,
    enableCertificateTransparency: true,
    enableAppTransportSecurity: true,
  },
  
  // Logging
  logging: {
    level: 'error',
    enableConsoleLogs: false,
    enableRemoteLogging: true,
  },
};

const styles = {
  errorContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  errorTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#d32f2f',
    marginBottom: 10,
  },
  errorMessage: {
    fontSize: 16,
    color: '#666',
    textAlign: 'center',
    marginBottom: 20,
  },
  retryButton: {
    backgroundColor: '#2196F3',
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 5,
  },
  retryText: {
    color: 'white',
    fontWeight: 'bold',
  },
};

// Initialize monitoring service
const monitoringService = new MonitoringService();

export { 
  MonitoringService, 
  ErrorBoundary, 
  usePerformanceMonitoring, 
  productionConfig 
};