React Native'de SWR Tarzı Feature Flag'ler

React Native uygulamalarında SWR pattern'i kullanarak feature flag sistemi kurma. Real-time güncellemeler ve caching stratejileri.

Memorial Day hafta sonu 2023. Sabah 2:47. 50.000 dolar değerindeki işlemleri işlerken ödeme sistemimiz çöktü. Suçlu? Yüklenmesi 8 saniye süren bir feature flag'i, checkout akışımızın timeout olmasına neden oldu. Yarı uykulu kullanıcılar alışverişlerini tamamlayamadı, sepetlerini terk ettiler ve bir hafta sonunun gelirini kaybettik.

Bu olay bana feature flag'lerin sadece konfigürasyon olmadığını - kritik altyapı olduklarını öğretti. Sistemimizi stale-while-revalidate pattern'i ile yeniden kurduktan sonra, tek bir timeout olmadan günde 2M+ flag isteği işliyoruz. İşte nasıl yaptığımız.

Memorial Day Felaketi: Neyin Yanlış Gittiği#

Orijinal feature flag sistemimiz utanç verici derecede basitti. AWS Parameter Store'a her flag değerine ihtiyacımız olduğunda senkron API çağrısı:

JavaScript
// Hafta sonu gelirimizi öldüren kod
const getFeatureFlag = async (flagName) => {
  const response = await fetch(`/api/flags/${flagName}`);
  return response.json();
};

// Checkout akışında her yerde kullanıldı
if (await getFeatureFlag('new-payment-processor')) {
  // Yeni sistemle işle
}

Neyin yanlış gidebileceği? Her şey:

  1. Cold Lambda start'ları: Parameter Store API çağrıları trafik yoğununluğunda 3-8 saniye sürdü
  2. Cache yok: Her checkout API'ye fresh istek attı
  3. Cascading timeout'lar: Flag'ler yavaş olduğunda, her şey yavaştı
  4. Offline desteği yok: Ağ sorunları = bozuk uygulama

Sonuç: 847 başarısız checkout denemesi, 50.223 dolar kayıp gelir ve çok kızgın bir Satış VP'si.

Stale-While-Revalidate Neden Her Şeyi Değiştirdi#

SWR pattern'i bizim kurtuluşumuz oldu. "Flag'i yükle, bekle, işe yarar umuduyla" yerine, şimdi:

  1. Cached veriyi anında döndür (eski olsa bile)
  2. Fresh veriyi arka planda getir (revalidate)
  3. Cache'i sessizce güncelle yeni veri geldiğinde

Kullanıcı deneyimi dönüşümü anında oldu:

  • Önce: Checkout'ta 3-8 saniyelik loading spinner'lar
  • Sonra: Anında response'lar, kesintisiz arka plan güncellemeleri
  • Offline: Uygulama son bilinen değerlerle mükemmel çalışıyor

Ödeme başarı oranımız bir gecede 94.2%'den 99.8%'e çıktı.

Gerçekten İşe Yarayan Production Mimarisi#

Sıfırdan yeniden kurduktan sonra, sistemimiz 50.000+ aktif kullanıcıda günde 2.3M flag isteği handle ediyor:

  1. FeatureFlagCache: AsyncStorage persistence ile in-memory cache
  2. useFeatureFlag: Arka plan revalidation ile SWR-style hook
  3. Smart invalidation: App focus/ağ değişikliklerinde otomatik güncellemeler
  4. AWS backend: Proper caching ile Parameter Store + Lambda

18 ay production'dan sonra key metrikler:

  • Cache hit rate: 97.3%
  • Ortalama response zamanı: 12ms (önceki 3.2s'ye karşı)
  • Offline availability: 99.97%
  • Background revalidation başarısı: 99.1%

Loading diagram...

Gelirimizi Kurtaran Implementation#

İşte milyonlarca isteği başarısızlık olmadan handle eden gerçek production kodumuz:

Cache Manager: Production Hatalarından Dersler#

JavaScript
// 50K dolarlık hatamızdan öğrenen cache manager
import { useState, useEffect, useRef, useCallback } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { AppState } from 'react-native';
import NetInfo from '@react-native-community/netinfo';

class FeatureFlagCache {
  constructor() {
    this.cache = new Map();
    this.subscribers = new Map();
    this.revalidateOnFocus = true;
    this.revalidateOnReconnect = true;
    // Zor yoldan öğrendik: request storm'larını önle
    this.dedupingInterval = 2000;
    // Önemli metrikleri takip et
    this.stats = {
      hits: 0,
      misses: 0,
      revalidations: 0,
      failures: 0,
    };
    this.setupGlobalListeners();
  }

  setupGlobalListeners() {
    // Bu bizi iOS backgrounding bug'ı sırasında kurtardı
    AppState.addEventListener('change', (nextAppState) => {
      if (nextAppState === 'active' && this.revalidateOnFocus) {
        console.log('App focused, revalidating all flags');
        this.revalidateAll();
      }
    });

    // Metro yolcuları için kritik (kullanıcı geribildirimi sayesinde öğrendik)
    NetInfo.addEventListener(state => {
      if (state.isConnected && this.revalidateOnReconnect) {
        console.log('Network reconnected, revalidating flags');
        this.revalidateAll();
      }
    });
  }

  getCacheKey(key) {
    return `feature_flags_${key}`;
  }

  getCache(key) {
    const cached = this.cache.get(key);
    if (cached) {
      this.stats.hits++;
      return cached;
    }
    this.stats.misses++;
    return null;
  }

  setCache(key, data) {
    this.cache.set(key, {
      data,
      timestamp: Date.now(),
      isValidating: false,
      // Bu flag'in cache'den kaç kez serve edildiğini takip et
      servedCount: (this.cache.get(key)?.servedCount || 0) + 1
    });

    // Offline desteği için AsyncStorage'a persist et
    this.saveToStorage(key, data);
    this.notifySubscribers(key, data);
  }

  notifySubscribers(key, data) {
    const subscribers = this.subscribers.get(key) || new Set();
    subscribers.forEach(callback => callback(data));
  }

  subscribe(key, callback) {
    if (!this.subscribers.has(key)) {
      this.subscribers.set(key, new Set());
    }
    this.subscribers.get(key).add(callback);

    return () => {
      const subscribers = this.subscribers.get(key);
      if (subscribers) {
        subscribers.delete(callback);
        if (subscribers.size === 0) {
          this.subscribers.delete(key);
        }
      }
    };
  }

  async revalidateAll() {
    const startTime = Date.now();
    const keys = Array.from(this.cache.keys());

    console.log(`${keys.length} flag'i revalidate ediliyor`);

    // Backend'i boğmamak için batch request'ler
    const promises = keys.map(key => this.revalidate(key));
    const results = await Promise.allSettled(promises);

    const successful = results.filter(r => r.status === 'fulfilled').length;
    const failed = results.length - successful;

    console.log(`Revalidation tamamlandı: ${successful} başarılı, ${failed} başarısız, ${Date.now() - startTime}ms`);

    // Monitoring için metrikleri raporla
    this.reportMetrics({
      revalidation_duration: Date.now() - startTime,
      successful_revalidations: successful,
      failed_revalidations: failed,
    });
  }

  async revalidate(key) {
    const cached = this.cache.get(key);
    if (cached && !cached.isValidating) {
      cached.isValidating = true;
      this.stats.revalidations++;

      try {
        const freshData = await this.fetcher(key);
        this.setCache(key, freshData);
        console.log(`Flag revalidate edildi: ${key}`);
      } catch (error) {
        this.stats.failures++;
        console.error(`${key} için revalidation başarısız:`, error);

        // Flag hatası için uygulamayı bozma
        if (cached) cached.isValidating = false;

        // Crash analytics'e raporla
        this.reportError('revalidation_failed', error, { flag: key });
      }
    }
  }

  async fetcher(key) {
    // Yavaş Parameter Store çağrılarını değiştiren endpoint
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 5000); // 5s timeout

    try {
      const response = await fetch(
        `https://api.yourapp.com/v2/feature-flags/${key}`,
        {
          headers: {
            'X-API-Version': '2.0',
            'X-Request-ID': `${Date.now()}-${Math.random().toString(36)}`,
            // Targeted rollout'lar için device info ekle
            'X-Device-ID': await this.getDeviceId(),
            'User-Agent': 'YourApp/3.2.1 (React Native)',
          },
          signal: controller.signal,
        }
      );

      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }

      const data = await response.json();

      // Response yapısını validate et (bozuk response'lardan öğrendik)
      if (!data || typeof data.enabled === 'undefined') {
        throw new Error('Invalid flag response format');
      }

      return data;
    } finally {
      clearTimeout(timeoutId);
    }
  }

  async loadFromStorage(key) {
    try {
      const stored = await AsyncStorage.getItem(this.getCacheKey(key));
      if (!stored) return null;

      const parsed = JSON.parse(stored);

      // 7 günden eski storage verisini kullanma (stale data bug'larından öğrendik)
      const maxAge = 7 * 24 * 60 * 60 * 1000; // 7 gün
      if (Date.now() - parsed.timestamp > maxAge) {
        console.log(`${key} için stale storage verisi atılıyor`);
        return null;
      }

      return parsed;
    } catch (error) {
      console.error('Storage'dan yükleme başarısız:', error);
      return null;
    }
  }

  async saveToStorage(key, data) {
    try {
      const payload = {
        ...data,
        timestamp: Date.now(),
        version: '2.0', // Storage format versiyonunu takip et
      };

      await AsyncStorage.setItem(
        this.getCacheKey(key),
        JSON.stringify(payload)
      );
    } catch (error) {
      console.error('Storage'a kaydetme başarısız:', error);
      // Storage hataları için flag operasyonlarını başarısız etme
    }
  }

  // Analytics için helper method
  async getDeviceId() {
    // Implementation analytics kurulumunuza bağlı
    return 'device-id-placeholder';
  }

  reportMetrics(metrics) {
    // Analytics servisinize gönder
    console.log('Feature flag metrics:', metrics);
  }

  reportError(event, error, context) {
    // Crash reporting servisinize gönder
    console.error('Feature flag error:', event, error, context);
  }
}

// Singleton instance - birden fazla instance'ın kaos yarattığını öğrendik
const flagCache = new FeatureFlagCache();

Loading Spinner'ları Ortadan Kaldıran React Hook#

JavaScript
// 8 saniyelik timeout'lardan 12ms response'lara giden hook
export function useFeatureFlag(flagName, options = {}) {
  const {
    refreshInterval = 0,
    revalidateOnMount = true,
    fallbackData = null,  // Kritik: her zaman fallback sağla
    onSuccess,
    onError,
    // Production'dan öğrenilen yeni seçenekler
    staleTime = 5 * 60 * 1000,  // 5 dakika
    dedupingInterval = 2000,
    errorRetryCount = 3,
  } = options;

  const [data, setData] = useState(fallbackData);
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [isValidating, setIsValidating] = useState(false);
  // Bu hook'un cache'den kaç kez serve edildiğini takip et
  const [cacheHits, setCacheHits] = useState(0);

  const intervalRef = useRef();
  const mountedRef = useRef(true);
  const retryCountRef = useRef(0);
  const lastFetchRef = useRef(0);

  const fetcher = useCallback(async (key) => {
    // Request spam'ini önle (trafik yoğunluğu incident'ından öğrendik)
    const now = Date.now();
    if (now - lastFetchRef.current < dedupingInterval) {
      console.log(`${key} için request dedup ediliyor`);
      return null;
    }
    lastFetchRef.current = now;

    try {
      setIsValidating(true);
      setError(null);

      const result = await flagCache.fetcher(key);

      if (mountedRef.current) {
        setData(result);
        setError(null);
        flagCache.setCache(key, result);
        retryCountRef.current = 0;  // Başarıda retry count'u resetle
        onSuccess?.(result);

        // Debug için başarılı flag fetch'i logla
        console.log(`Flag ${key} fetch edildi:`, result);
      }

      return result;
    } catch (err) {
      console.error(`${key} için flag fetch başarısız:`, err);

      if (mountedRef.current) {
        // Yalnızca retry'ları tükettiyseniz error set et
        if (retryCountRef.current >= errorRetryCount) {
          setError(err);
          onError?.(err);
        } else {
          // Exponential backoff ile retry
          retryCountRef.current++;
          const delay = Math.pow(2, retryCountRef.current) * 1000;
          setTimeout(() => {
            if (mountedRef.current) {
              fetcher(key);
            }
          }, delay);
        }
      }
      throw err;
    } finally {
      if (mountedRef.current) {
        setIsLoading(false);
        setIsValidating(false);
      }
    }
  }, [onSuccess, onError, dedupingInterval, errorRetryCount]);

  // Checkout akışımızı kurtaran optimistic update'ler
  const mutate = useCallback(async (newData, shouldRevalidate = true) => {
    console.log(`${flagName} için manual mutation:`, newData);

    if (typeof newData === 'function') {
      setData(prev => {
        const updated = newData(prev);
        flagCache.setCache(flagName, updated);
        return updated;
      });
    } else if (newData !== undefined) {
      setData(newData);
      flagCache.setCache(flagName, newData);

      // Analytics: manual flag override'ları takip et
      flagCache.reportMetrics({
        flag_manual_override: flagName,
        old_value: data,
        new_value: newData,
      });
    }

    if (shouldRevalidate) {
      return fetcher(flagName);
    }
  }, [flagName, fetcher, data]);

  useEffect(() => {
    mountedRef.current = true;

    const loadData = async () => {
      const startTime = Date.now();

      // Adım 1: Önce in-memory cache'i kontrol et (en hızlı)
      const cached = flagCache.getCache(flagName);
      if (cached) {
        setData(cached.data);
        setIsLoading(false);
        setCacheHits(prev => prev + 1);

        console.log(`${flagName} için cache hit: ${Date.now() - startTime}ms`);

        // Stale ise arka plan revalidation
        const isStale = Date.now() - cached.timestamp > staleTime;
        if (isStale && !cached.isValidating) {
          console.log(`Flag ${flagName} stale, arka planda revalidate ediliyor`);
          flagCache.revalidate(flagName);
        }
        return;
      }

      // Adım 2: AsyncStorage'dan yükle (daha yavaş ama offline-capable)
      const stored = await flagCache.loadFromStorage(flagName);
      if (stored) {
        setData(stored.data || stored);  // Farklı storage format'larını handle et
        setIsLoading(false);

        console.log(`${flagName} için storage hit: ${Date.now() - startTime}ms`);

        // Stored veriyi her zaman revalidate et (eskimiş olabilir)
        if (revalidateOnMount) {
          flagCache.revalidate(flagName);
        }
        return;
      }

      // Adım 3: Fresh fetch (en yavaş, yalnızca cached veri yoksa)
      if (revalidateOnMount) {
        console.log(`${flagName} için cached veri yok, fresh fetch yapılıyor`);
        try {
          await fetcher(flagName);
        } catch (error) {
          // Diğer her şey başarısız olursa fallback kullan
          if (!data && fallbackData !== null) {
            console.log(`${flagName} için fallback kullanılıyor:`, fallbackData);
            setData(fallbackData);
          }
        }
      } else {
        setIsLoading(false);
      }
    };

    loadData();

    // Cache güncellemelerine subscribe ol
    const unsubscribe = flagCache.subscribe(flagName, (newData) => {
      if (mountedRef.current) {
        console.log(`${flagName} için cache güncellendi:`, newData);
        setData(newData);
      }
    });

    // Polling interval kurulumu (dikkatli kullan)
    if (refreshInterval > 0) {
      intervalRef.current = setInterval(() => {
        if (mountedRef.current) {
          console.log(`${flagName} için interval revalidation`);
          flagCache.revalidate(flagName);
        }
      }, refreshInterval);
    }

    return () => {
      mountedRef.current = false;
      unsubscribe();
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }

      // Unmount'ta kullanım istatistiklerini logla (optimizasyon için faydalı)
      console.log(`Flag ${flagName} unmount edildi. Cache hit'leri: ${cacheHits}`);
    };
  }, [flagName, fetcher, refreshInterval, revalidateOnMount, staleTime, cacheHits]);

  // Checkout akışlarını çalıştıran return objesi
  return {
    data,
    error,
    isLoading,
    isValidating,
    mutate,
    // Debug ve optimizasyon için ekstra metadata
    cacheHits,
    lastUpdated: flagCache.getCache(flagName)?.timestamp,
    // Production debugging'den öğrenilen helper methodlar
    refresh: () => flagCache.revalidate(flagName),
    clearCache: () => {
      flagCache.cache.delete(flagName);
      AsyncStorage.removeItem(flagCache.getCacheKey(flagName));
    },
  };
}

Batch Hook: Birden Fazla Flag'e İhtiyacınız Olduğunda#

JavaScript
// Birden fazla flag'i verimli handle eder (performans profiling'den öğrendik)
export function useFeatureFlags(flagNames, options = {}) {
  const flags = {};
  const errors = {};
  const isLoading = {};
  const isValidating = {};
  const mutators = {};
  const cacheStats = {};

  // Her flag için ayrı hook'lar
  flagNames.forEach(flagName => {
    const result = useFeatureFlag(flagName, options);
    flags[flagName] = result.data;
    errors[flagName] = result.error;
    isLoading[flagName] = result.isLoading;
    isValidating[flagName] = result.isValidating;
    mutators[flagName] = result.mutate;
    cacheStats[flagName] = {
      hits: result.cacheHits,
      lastUpdated: result.lastUpdated,
    };
  });

  const isAnyLoading = Object.values(isLoading).some(Boolean);
  const isAnyValidating = Object.values(isValidating).some(Boolean);
  const hasErrors = Object.values(errors).some(Boolean);
  const totalCacheHits = Object.values(cacheStats).reduce(
    (sum, stats) => sum + (stats.hits || 0), 0
  );

  // Performans için batch operasyonlar
  const refreshAll = useCallback(() => {
    console.log(`${flagNames.length} flag refresh ediliyor`);
    flagNames.forEach(name => {
      flagCache.revalidate(name);
    });
  }, [flagNames]);

  const clearAllCaches = useCallback(() => {
    console.log(`${flagNames.length} flag için cache temizleniyor`);
    flagNames.forEach(name => {
      flagCache.cache.delete(name);
      AsyncStorage.removeItem(flagCache.getCacheKey(name));
    });
  }, [flagNames]);

  return {
    flags,
    errors,
    isLoading: isAnyLoading,
    isValidating: isAnyValidating,
    hasErrors,
    mutate: mutators,
    // Batch operasyonlar
    refreshAll,
    clearAllCaches,
    // Performans istatistikleri
    totalCacheHits,
    cacheStats,
  };
}

Gerçekten Scale Eden AWS Backend#

Orijinal Parameter Store kurulumumuz darboğazdı. İşte günde 2M+ isteği 95. percentile latency 50ms altında handle eden production Lambda:

Kabususu Değiştiren Lambda#

JavaScript
// Memorial Day hafta sonumuzu kurtaran Lambda
const { SSMClient, GetParameterCommand } = require('@aws-sdk/client-ssm');
const { CloudWatchClient, PutMetricDataCommand } = require('@aws-sdk/client-cloudwatch');

// Connection'ları yeniden kullan (15% maliyet azaltmasından öğrendik)
const ssm = new SSMClient({
  region: process.env.AWS_REGION,
  maxAttempts: 3,
  requestHandler: {
    connectionTimeout: 1000,
    socketTimeout: 1000,
  },
});

const cloudwatch = new CloudWatchClient({ region: process.env.AWS_REGION });

// Parameter Store çağrılarını 90% azaltan in-memory cache
const cache = new Map();
const CACHE_TTL = 5 * 60 * 1000; // 5 dakika

exports.handler = async (event) => {
    const startTime = Date.now();
    const { flagName } = event.pathParameters;
    const deviceId = event.headers['X-Device-ID'] || 'unknown';
    const requestId = event.requestContext.requestId;

    console.log(`Flag isteği: ${flagName}`, { deviceId, requestId });

    try {
        // Önce cache'i kontrol et
        const cacheKey = `/feature-flags/${flagName}`;
        const cached = cache.get(cacheKey);

        if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
            console.log(`${flagName} için cache hit`);

            // Cache performansını takip et
            await recordMetric('CacheHits', 1, flagName);

            return createResponse(200, cached.data, {
                'X-Cache': 'HIT',
                'X-Response-Time': `${Date.now() - startTime}ms`,
            });
        }

        // Parameter Store'dan fetch et
        const command = new GetParameterCommand({
            Name: cacheKey,
            WithDecryption: true,  // Encrypted flag'leri destekle
        });

        const result = await ssm.send(command);

        if (!result.Parameter) {
            await recordMetric('FlagNotFound', 1, flagName);
            return createResponse(404, {
                error: 'Flag not found',
                flag: flagName,
                timestamp: new Date().toISOString(),
            });
        }

        let flagData;
        try {
            flagData = JSON.parse(result.Parameter.Value);
        } catch (parseError) {
            // JSON olmayan değerleri handle et (backwards compatibility)
            flagData = {
                enabled: result.Parameter.Value === 'true',
                value: result.Parameter.Value,
            };
        }

        // Flag verisini metadata ile güçlendir
        const enhancedData = {
            ...flagData,
            flag_name: flagName,
            last_modified: result.Parameter.LastModifiedDate,
            version: result.Parameter.Version,
            // Targeted rollout'lar için destek
            user_targeting: await checkUserTargeting(flagData, deviceId),
        };

        // Sonucu cache'le
        cache.set(cacheKey, {
            data: enhancedData,
            timestamp: Date.now(),
        });

        // Eski cache entry'leri temizle
        if (cache.size > 1000) {
            const oldestKey = cache.keys().next().value;
            cache.delete(oldestKey);
        }

        await recordMetric('CacheMisses', 1, flagName);
        await recordMetric('ResponseTime', Date.now() - startTime, flagName);

        return createResponse(200, enhancedData, {
            'X-Cache': 'MISS',
            'X-Response-Time': `${Date.now() - startTime}ms`,
            'Cache-Control': 'private, max-age=300',  // 5 dakika client cache
        });

    } catch (error) {
        console.error('Lambda hatası:', {
            error: error.message,
            stack: error.stack,
            flagName,
            requestId,
        });

        await recordMetric('Errors', 1, flagName);

        return createResponse(500, {
            error: 'Internal server error',
            request_id: requestId,
            timestamp: new Date().toISOString(),
        });
    }
};

function createResponse(statusCode, body, additionalHeaders = {}) {
    return {
        statusCode,
        headers: {
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Headers': 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,X-Device-ID',
            'X-API-Version': '2.0',
            ...additionalHeaders,
        },
        body: JSON.stringify(body),
    };
}

// Kademeli rollout'lar için user targeting
async function checkUserTargeting(flagData, deviceId) {
    if (!flagData.rollout_percentage) return true;

    // Consistent hash tabanlı rollout
    const hash = require('crypto')
        .createHash('md5')
        .update(deviceId + flagData.flag_name)
        .digest('hex');

    const userPercentile = parseInt(hash.substr(0, 2), 16) % 100;
    return userPercentile < flagData.rollout_percentage;
}

// Monitoring için CloudWatch metrikleri
async function recordMetric(metricName, value, flagName) {
    try {
        await cloudwatch.send(new PutMetricDataCommand({
            Namespace: 'FeatureFlags/Lambda',
            MetricData: [{
                MetricName: metricName,
                Value: value,
                Unit: metricName === 'ResponseTime' ? 'Milliseconds' : 'Count',
                Dimensions: [{
                    Name: 'FlagName',
                    Value: flagName,
                }],
                Timestamp: new Date(),
            }],
        }));
    } catch (error) {
        console.error('Metrik kaydedilemedi:', error);
        // Metrik hataları için request'i başarısız etme
    }
}

Production Parameter Store Kurulumu#

Bash
# Production kaosunu atlatan flag yapısı
aws ssm put-parameter \
  --name "/feature-flags/payment-processor-v2" \
  --value '{
    "enabled": true,
    "rollout_percentage": 85,
    "created_at": "2023-05-30T10:00:00Z",
    "created_by": "payment-team",
    "description": "3DS2 desteği ile yeni Stripe payment processor",
    "kill_switch": false,
    "environments": ["production"],
    "monitoring": {
      "error_threshold": 0.05,
      "latency_threshold_ms": 2000
    }
  }' \
  --type "SecureString" \
  --description "Kritik ödeme flag'i - SİLMEYİN"

# Memorial Day hafta sonumuzu kurtaran flag
aws ssm put-parameter \
  --name "/feature-flags/checkout-timeout-extended" \
  --value '{
    "enabled": true,
    "timeout_ms": 30000,
    "fallback_enabled": true,
    "emergency_override": false,
    "last_incident": "2023-05-29-payment-timeout"
  }' \
  --type "SecureString"

# Kademeli rollout ile feature flag'ler
aws ssm put-parameter \
  --name "/feature-flags/new-checkout-ui" \
  --value '{
    "enabled": true,
    "rollout_percentage": 10,
    "target_segments": ["beta-users", "premium"],
    "a_b_test": {
      "experiment_id": "checkout-ui-v2",
      "variant": "treatment"
    },
    "metrics_to_watch": [
      "checkout_conversion_rate",
      "checkout_abandonment_rate",
      "payment_success_rate"
    ]
  }' \
  --type "SecureString"

Gerçek Production Kullanımı (Gerçekten İşe Yarayan)#

Gelirimizi Kurtaran Checkout Component'ı#

JavaScript
// Timeout'tan anında response'lara giden component
import React from 'react';
import { View, Text, Button, Alert } from 'react-native';
import { useFeatureFlag } from './hooks/useFeatureFlag';

function CheckoutFlow() {
  const {
    data: paymentConfig,
    error,
    isLoading,
    isValidating,
    mutate,
    cacheHits,
  } = useFeatureFlag('payment-processor-v2', {
    // Memorial Day incident'ından öğrendik
    fallbackData: {
      enabled: false,  // Güvenli default
      processor: 'legacy',
      timeout_ms: 15000,
    },
    staleTime: 2 * 60 * 1000,  // 2 dakika (sık ödemeler fresh data gerektirir)
    onSuccess: (data) => {
      console.log('Payment config güncellendi:', data);
      // Analytics için başarılı flag load'ları takip et
      analytics.track('feature_flag_loaded', {
        flag: 'payment-processor-v2',
        value: data,
        cache_hits: cacheHits,
      });
    },
    onError: (error) => {
      console.error('Payment flag hatası:', error);
      // Payment flag hatalarında alert (gelir için kritik)
      crashlytics().recordError(error);
    }
  });

  // Ödeme sorunları için emergency kill switch
  const handleEmergencyFallback = () => {
    Alert.alert(
      'Emergency Fallback',
      'Legacy payment processor'a geçilsin mi?',
      [
        { text: 'İptal', style: 'cancel' },
        {
          text: 'Evet',
          onPress: () => {
            mutate({
              ...paymentConfig,
              enabled: false,
              emergency_override: true
            }, false);
            analytics.track('emergency_payment_fallback');
          }
        },
      ]
    );
  };

  // Kritik checkout akışı için asla loading gösterme
  const config = paymentConfig || {
    enabled: false,
    processor: 'legacy',
    timeout_ms: 15000,
  };

  return (
    <View>
      <Text>Payment Processor: {config.enabled ? 'v2 (Stripe)' : 'Legacy'}</Text>

      {/* UI'ı bloklamadan sistem durumunu göster */}
      {isValidating && (
        <Text style={{ color: 'gray', fontSize: 12 }}>
          Payment config arka planda yenileniyor...
        </Text>
      )}

      {error && (
        <View style={{ backgroundColor: '#fff3cd', padding: 8 }}>
          <Text style={{ color: '#856404' }}>
            Cached payment ayarları kullanılıyor (flag servisi kullanılamıyor)
          </Text>
        </View>
      )}

      <Button
        title="Emergency Fallback"
        onPress={handleEmergencyFallback}
        color="red"
      />

      {/* Gerçek payment component'ı */}
      {config.enabled ? (
        <StripePaymentForm
          timeout={config.timeout_ms}
          onSuccess={() => analytics.track('payment_success', { processor: 'v2' })}
          onError={(err) => {
            // Payment hatalarında auto-fallback
            if (err.code === 'TIMEOUT') {
              mutate({ ...config, enabled: false }, false);
            }
          }}
        />
      ) : (
        <LegacyPaymentForm
          onSuccess={() => analytics.track('payment_success', { processor: 'legacy' })}
        />
      )}

      {/* Development için debug info */}
      {__DEV__ && (
        <Text style={{ fontSize: 10, color: 'gray' }}>
          Cache hit'leri: {cacheHits} | Config: {JSON.stringify(config, null, 2)}
        </Text>
      )}
    </View>
  );
}

Birden Fazla Flag ile Dashboard (Gerçek Performans Verisi)#

JavaScript
// 50+ feature flag handle eden dashboard component'ı
function Dashboard() {
  const {
    flags,
    isLoading,
    hasErrors,
    mutate,
    refreshAll,
    totalCacheHits,
    cacheStats,
  } = useFeatureFlags([
    'new-checkout-ui',
    'payment-processor-v2',
    'dark-mode',
    'a-b-test-homepage',
    'premium-features',
    'mobile-push-notifications',
    'analytics-enhanced',
    'referral-program',
    'social-login',
    'advanced-search',
  ], {
    // Refresh interval yok - SWR pattern'ine güven
    staleTime: 10 * 60 * 1000,  // 10 dakika
    fallbackData: null,  // Her flag'in kendi fallback'ini handle etmesine izin ver
  });

  // Flag'ler için dashboard rendering'i asla blokla
  // Bu bizim performans analizimizden çıkan key insight'tı

  return (
    <View style={{ flex: 1 }}>
      {/* Progressive enhancement - flag'ler yüklendiğinde özellikler görünür */}

      {flags['new-checkout-ui'] && (
        <NewCheckoutBanner
          onDismiss={() => {
            // Bu kullanıcı için geçici olarak devre dışı bırak
            mutate['new-checkout-ui']({
              ...flags['new-checkout-ui'],
              user_dismissed: true
            }, false);
          }}
        />
      )}

      <ScrollView>
        {/* Core özellikler her zaman render olur */}
        <ProductList />

        {/* Enhanced özellikler yalnızca flag'ler hazır olduğunda */}
        {flags['premium-features'] && (
          <PremiumSection
            config={flags['premium-features']}
            onUpgrade={() => {
              analytics.track('premium_upgrade_clicked', {
                feature_flag_config: flags['premium-features']
              });
            }}
          />
        )}

        {flags['referral-program']?.enabled && (
          <ReferralWidget
            incentive={flags['referral-program'].incentive_amount}
            onShare={() => analytics.track('referral_shared')}
          />
        )}

        {/* A/B test component */}
        {flags['a-b-test-homepage'] && (
          <ABTestComponent
            variant={flags['a-b-test-homepage'].variant}
            experimentId={flags['a-b-test-homepage'].experiment_id}
            onConversion={(event) => {
              analytics.track('ab_test_conversion', {
                experiment_id: flags['a-b-test-homepage'].experiment_id,
                variant: flags['a-b-test-homepage'].variant,
                event_type: event,
              });
            }}
          />
        )}
      </ScrollView>

      {/* Development için debug paneli */}
      {__DEV__ && (
        <View style={{ position: 'absolute', top: 50, right: 10, backgroundColor: 'rgba(0,0,0,0.8)', padding: 10 }}>
          <Text style={{ color: 'white', fontSize: 10 }}>Flag Cache İstatistikleri:</Text>
          <Text style={{ color: 'white', fontSize: 8 }}>Toplam hit'ler: {totalCacheHits}</Text>
          <Text style={{ color: 'white', fontSize: 8 }}>Hatalar: {hasErrors ? 'EVET' : 'HAYIR'}</Text>
          <Button
            title="Tümünü Yenile"
            onPress={refreshAll}
            color="orange"
          />
          {Object.entries(cacheStats).map(([flag, stats]) => (
            <Text key={flag} style={{ color: 'gray', fontSize: 8 }}>
              {flag}: {stats.hits} hit
            </Text>
          ))}
        </View>
      )}
    </View>
  );
}

User Targeting ile Karmaşık A/B Testing#

JavaScript
// Gelir deneyimlerimizi güçlendiren gelişmiş config
function ABTestWrapper({ children, userId, userSegment }) {
  const { data: experimentConfig, mutate, refresh } = useFeatureFlag(
    'homepage-conversion-experiment',
    {
      fallbackData: {
        enabled: false,
        experiment_id: 'homepage-v1',
        variants: {
          control: 50,
          treatment_a: 25,  // Yeni CTA button
          treatment_b: 25,  // Sadeleştirilmiş form
        },
        targeting: {
          min_account_age_days: 0,
          allowed_segments: ['free', 'trial', 'premium'],
          excluded_user_ids: [],
        },
        kill_switch: false,
      },
      staleTime: 30 * 60 * 1000, // Deneyimler için 30 dakika
      onSuccess: (data) => {
        console.log('A/B test config yüklendi:', data.experiment_id);

        // Deney exposure'ını takip et
        analytics.track('experiment_config_loaded', {
          experiment_id: data.experiment_id,
          user_id: userId,
        });
      },
    }
  );

  // Consistent hashing ile kullanıcının variant'ını belirle
  const userVariant = useMemo(() => {
    if (!experimentConfig?.enabled || experimentConfig.kill_switch) {
      return 'control';
    }

    // Targeting kriterlerini kontrol et
    const targeting = experimentConfig.targeting;
    if (!targeting.allowed_segments.includes(userSegment)) {
      return 'control';
    }

    if (targeting.excluded_user_ids.includes(userId)) {
      return 'control';
    }

    // Consistent hash tabanlı variant assignment
    const hash = require('crypto')
      .createHash('md5')
      .update(userId + experimentConfig.experiment_id)
      .digest('hex');

    const userPercentile = parseInt(hash.substr(0, 4), 16) % 100;

    const variants = experimentConfig.variants;
    let cumulativePercentage = 0;

    for (const [variant, percentage] of Object.entries(variants)) {
      cumulativePercentage += percentage;
      if (userPercentile < cumulativePercentage) {
        return variant;
      }
    }

    return 'control';  // Fallback
  }, [experimentConfig, userId, userSegment]);

  // Experiment exposure'ını session başına bir kez takip et
  useEffect(() => {
    if (experimentConfig?.enabled && userVariant !== 'control') {
      analytics.track('experiment_exposed', {
        experiment_id: experimentConfig.experiment_id,
        variant: userVariant,
        user_id: userId,
        user_segment: userSegment,
      });
    }
  }, [experimentConfig?.experiment_id, userVariant, userId, userSegment]);

  // Test için manual refresh
  const handleRefreshExperiment = () => {
    console.log('A/B test config yenileniyor');
    refresh();
  };

  // Emergency kill switch
  const handleKillSwitch = () => {
    Alert.alert(
      'Kill Switch',
      'Bu deneyi tüm kullanıcılar için devre dışı bırak?',
      [
        { text: 'İptal', style: 'cancel' },
        {
          text: 'Kill',
          style: 'destructive',
          onPress: () => {
            mutate({
              ...experimentConfig,
              kill_switch: true,
              killed_at: new Date().toISOString(),
              killed_by: userId,
            }, false);

            analytics.track('experiment_killed', {
              experiment_id: experimentConfig.experiment_id,
              killed_by: userId,
            });
          }
        },
      ]
    );
  };

  return (
    <View>
      {/* Variant'a özel içerik render et */}
      {React.cloneElement(children, {
        variant: userVariant,
        experimentId: experimentConfig?.experiment_id,
        onConversion: (eventType) => {
          analytics.track('conversion', {
            experiment_id: experimentConfig?.experiment_id,
            variant: userVariant,
            event_type: eventType,
            user_id: userId,
          });
        },
      })}

      {/* Test için admin kontrolleri */}
      {__DEV__ && (
        <View style={{ position: 'absolute', bottom: 100, right: 10 }}>
          <Button title="Deneyi Yenile" onPress={handleRefreshExperiment} />
          <Button title="Kill Switch" onPress={handleKillSwitch} color="red" />
          <Text style={{ fontSize: 10 }}>Variant: {userVariant}</Text>
        </View>
      )}
    </View>
  );
}

Production'da 18 Aydan Performans Dersleri#

Gerçekten Önemli Memory Management#

JavaScript
// Memory leak'lerimizi önleyen cache cleanup
class FeatureFlagCache {
  constructor() {
    // ... mevcut kod
    this.maxCacheSize = 200;  // Profiling sonrası artırıldı
    this.maxStorageAge = 7 * 24 * 60 * 60 * 1000;  // 7 gün

    // Her 10 dakikada cleanup (memory pressure crash'lerinden öğrendik)
    this.cleanupInterval = setInterval(() => {
      this.cleanup();
    }, 10 * 60 * 1000);

    // Monitoring için memory kullanımını takip et
    this.memoryStats = {
      cleanupRuns: 0,
      entriesDeleted: 0,
      lastCleanupTime: Date.now(),
    };
  }

  cleanup() {
    const startTime = Date.now();
    const initialSize = this.cache.size;

    // Adım 1: Süresi dolan entry'leri kaldır
    const now = Date.now();
    for (const [key, value] of this.cache.entries()) {
      if (now - value.timestamp > this.maxStorageAge) {
        this.cache.delete(key);
        console.log(`Süresi dolan cache entry silindi: ${key}`);
      }
    }

    // Adım 2: Hâlâ limit üzerindeyse LRU cleanup
    if (this.cache.size > this.maxCacheSize) {
      const entries = Array.from(this.cache.entries());
      // Son erişim zamanına göre sırala (LRU)
      const sorted = entries.sort((a, b) =>
        (a[1].lastAccessed || a[1].timestamp) - (b[1].lastAccessed || b[1].timestamp)
      );

      const toDelete = sorted.slice(0, entries.length - this.maxCacheSize);

      toDelete.forEach(([key]) => {
        this.cache.delete(key);
        console.log(`LRU cache entry silindi: ${key}`);
      });
    }

    // İstatistikleri güncelle
    this.memoryStats.cleanupRuns++;
    this.memoryStats.entriesDeleted += initialSize - this.cache.size;
    this.memoryStats.lastCleanupTime = Date.now();

    console.log(`Cache cleanup: ${initialSize} -> ${this.cache.size} entry, ${Date.now() - startTime}ms`);

    // Analytics'e memory kullanımını raporla
    this.reportMetrics({
      cache_size: this.cache.size,
      cleanup_duration: Date.now() - startTime,
      memory_freed_mb: (initialSize - this.cache.size) * 0.001,  // Rough estimate
    });
  }

  // LRU için erişimi takip et
  getCache(key) {
    const cached = this.cache.get(key);
    if (cached) {
      cached.lastAccessed = Date.now();  // LRU timestamp'ını güncelle
      this.stats.hits++;
      return cached;
    }
    this.stats.misses++;
    return null;
  }
}

Request Storm'umuzu Önleyen Request Deduplication#

JavaScript
// Black Friday incident'ı sırasında bizi kurtaran deduplication
class FeatureFlagCache {
  constructor() {
    // ... mevcut kod
    this.pendingRequests = new Map();
    this.requestStats = {
      dedupedRequests: 0,
      concurrentRequestsPrevented: 0,
    };
  }

  async fetcher(key) {
    // Request zaten in-flight mı kontrol et
    if (this.pendingRequests.has(key)) {
      console.log(`${key} için concurrent request dedup ediliyor`);
      this.requestStats.dedupedRequests++;

      // Mevcut promise'i döndür
      return this.pendingRequests.get(key);
    }

    // Timeout ve retry logic ile yeni request oluştur
    const promise = this.makeRequestWithRetry(key, 3);
    this.pendingRequests.set(key, promise);

    try {
      const result = await promise;
      return result;
    } finally {
      // Pending request'i her zaman temizle
      this.pendingRequests.delete(key);
    }
  }

  async makeRequestWithRetry(key, maxRetries) {
    let lastError;

    for (let attempt = 1; attempt <= maxRetries; attempt++) {
      try {
        console.log(`${key} fetch ediliyor, deneme ${attempt}/${maxRetries}`);

        const controller = new AbortController();
        const timeoutId = setTimeout(() => {
          controller.abort();
          console.log(`${key} için request timeout`);
        }, 8000);  // 8 saniye timeout

        const response = await fetch(
          `https://api.yourapp.com/v2/feature-flags/${key}`,
          {
            signal: controller.signal,
            headers: {
              'X-Retry-Attempt': attempt.toString(),
              'X-Request-ID': `${Date.now()}-${Math.random().toString(36)}`,
            },
          }
        );

        clearTimeout(timeoutId);

        if (!response.ok) {
          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }

        const data = await response.json();

        // Başarı - retry istatistiklerini resetle
        if (attempt > 1) {
          console.log(`${key} için request ${attempt}. denemede başarılı`);
          this.reportMetrics({
            successful_retry: key,
            attempts_needed: attempt,
          });
        }

        return data;

      } catch (error) {
        lastError = error;
        console.error(`${key} için request deneme ${attempt} başarısız:`, error.message);

        // Bazı hatalarda retry yapma
        if (error.name === 'AbortError' ||
            (error.message && error.message.includes('404'))) {
          break;
        }

        // Retry'ler arasında exponential backoff
        if (attempt < maxRetries) {
          const delay = Math.min(1000 * Math.pow(2, attempt - 1), 5000);
          console.log(`${key} ${delay}ms sonra retry yapılacak`);
          await new Promise(resolve => setTimeout(resolve, delay));
        }
      }
    }

    // Tüm retry'ler başarısız
    this.reportMetrics({
      request_failed_after_retries: key,
      max_retries: maxRetries,
      final_error: lastError.message,
    });

    throw lastError;
  }
}

Gerçek Bug'ları Yakalayan Test Stratejisi#

Gerçekten Önemli Unit Test'ler#

JavaScript
import { renderHook, act } from '@testing-library/react-hooks';
import { useFeatureFlag } from '../useFeatureFlag';

// AsyncStorage'ı mock'la
jest.mock('@react-native-async-storage/async-storage', () => ({
  getItem: jest.fn(),
  setItem: jest.fn(),
}));

// fetch'i mock'la
global.fetch = jest.fn();

describe('useFeatureFlag', () => {
  beforeEach(() => {
    fetch.mockClear();
    AsyncStorage.getItem.mockClear();
    AsyncStorage.setItem.mockClear();
  });

  it('should return cached data immediately', async () => {
    // Cache kurulumu
    flagCache.setCache('test-flag', true);

    const { result } = renderHook(() =>
      useFeatureFlag('test-flag')
    );

    expect(result.current.data).toBe(true);
    expect(result.current.isLoading).toBe(false);
  });

  it('should revalidate stale data', async () => {
    fetch.mockResolvedValueOnce({
      ok: true,
      json: () => Promise.resolve(false)
    });

    // Stale cache kurulumu (1 dakikadan eski)
    const staleTimestamp = Date.now() - 120000;
    flagCache.cache.set('test-flag', {
      data: true,
      timestamp: staleTimestamp,
      isValidating: false
    });

    const { result, waitForNextUpdate } = renderHook(() =>
      useFeatureFlag('test-flag')
    );

    // Stale veriyi anında döndürmeli
    expect(result.current.data).toBe(true);

    // Revalidation'ı bekle
    await waitForNextUpdate();

    expect(result.current.data).toBe(false);
    expect(fetch).toHaveBeenCalledWith(
      'https://your-api-gateway-url/feature-flags/test-flag'
    );
  });

  it('should handle optimistic updates', async () => {
    const { result } = renderHook(() =>
      useFeatureFlag('test-flag', { fallbackData: false })
    );

    act(() => {
      result.current.mutate(true, false); // Optimistic update
    });

    expect(result.current.data).toBe(true);
  });
});

Integration Test'leri#

JavaScript
import { render, waitFor } from '@testing-library/react-native';
import { FeatureFlagProvider } from '../FeatureFlagProvider';
import TestComponent from './TestComponent';

describe('Feature Flag Integration', () => {
  it('should handle app state changes', async () => {
    const { getByText } = render(
      <FeatureFlagProvider>
        <TestComponent />
      </FeatureFlagProvider>
    );

    // Uygulamanın background'a ve foreground'a geçişini simüle et
    AppState.currentState = 'background';
    AppState.currentState = 'active';

    // App state change event'ini emit et
    AppState.addEventListener.mock.calls[0][1]('active');

    await waitFor(() => {
      expect(fetch).toHaveBeenCalled();
    });
  });
});

Best Practice'ler#

1. Flag İsimlendirme Kuralları#

JavaScript
// ✅ İyi: Açıklayıcı ve hiyerarşik
'checkout.payment-v2.enabled'
'ui.dark-mode.rollout-percentage'
'experiment.recommendation-algorithm.variant'

// ❌ Kötü: Belirsiz veya tutarsız
'flag1'
'newThing'
'test_feature'

2. Error Boundary'ler#

JavaScript
import React from 'react';

class FeatureFlagErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

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

  componentDidCatch(error, errorInfo) {
    console.error('Feature flag hatası:', error, errorInfo);
    // Crash reporting servisine logla
    crashlytics().recordError(error);
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback || this.props.children;
    }

    return this.props.children;
  }
}

// Kullanım
function App() {
  return (
    <FeatureFlagErrorBoundary fallback={<LegacyComponent />}>
      <FeatureFlagComponent />
    </FeatureFlagErrorBoundary>
  );
}

3. Kademeli Rollout'lar#

JavaScript
function useGradualRollout(flagName, userId, percentage = 0) {
  const { data: flag } = useFeatureFlag(flagName);

  const isEnabled = useMemo(() => {
    if (!flag?.enabled) return false;

    // Consistent hash tabanlı rollout
    const hash = hashString(userId + flagName);
    const userPercentile = hash % 100;

    return userPercentile < (flag.rolloutPercentage || percentage);
  }, [flag, userId, percentage, flagName]);

  return isEnabled;
}

function hashString(str) {
  let hash = 0;
  for (let i = 0; i < str.length; i++) {
    const char = str.charCodeAt(i);
    hash = ((hash <&lt;5) - hash) + char;
    hash = hash & hash; // 32-bit integer'a çevir
  }
  return Math.abs(hash);
}

Sonuç#

SWR-style feature flag sistemimiz birkaç key avantaj sağlıyor:

  • Anında UI güncellemeleri cached veri ile
  • Arka plan senkronizasyonu fresh veri için
  • Offline dayanıklılık persistent storage ile
  • Akıllı revalidation app lifecycle'ına göre
  • Memory verimli otomatik cleanup ile
  • Type-safe tam TypeScript desteğiyle

Bu implementation performans, kullanıcı deneyimi ve developer productivity arasında mükemmel denge kuruyor. Stale-while-revalidate pattern'i React Native uygulamanızın hızlı ve responsive hissetmesini sağlarken feature flag'leri güncel tutuyor.

Sonraki Adımlar#

Bu sistemi şunlarla genişletmeyi değerlendirin:

  • Real-time güncellemeler WebSocket ile
  • A/B testing yetenekleri
  • Analytics entegrasyonu flag kullanım takibi için
  • Admin dashboard flag yönetimi için
  • Otomatik rollback error rate'lere göre

Kurduğumuz foundation bu gelişmiş özellikleri core SWR faydalarını koruyarak barındıracak kadar esnek.

Loading...

Yorumlar (0)

Sohbete katıl

Düşüncelerini paylaşmak ve toplulukla etkileşim kurmak için giriş yap

Henüz yorum yok

Bu yazı hakkında ilk düşüncelerini paylaşan sen ol!

Related Posts