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ı:
// 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:
- Cold Lambda start'ları: Parameter Store API çağrıları trafik yoğununluğunda 3-8 saniye sürdü
- Cache yok: Her checkout API'ye fresh istek attı
- Cascading timeout'lar: Flag'ler yavaş olduğunda, her şey yavaştı
- 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:
- Cached veriyi anında döndür (eski olsa bile)
- Fresh veriyi arka planda getir (revalidate)
- 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:
- FeatureFlagCache: AsyncStorage persistence ile in-memory cache
- useFeatureFlag: Arka plan revalidation ile SWR-style hook
- Smart invalidation: App focus/ağ değişikliklerinde otomatik güncellemeler
- 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#
// 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#
// 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#
// 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#
// 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#
# 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'ı#
// 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)#
// 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#
// 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#
// 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#
// 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#
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#
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ı#
// ✅ İ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#
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#
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 <<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.
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!
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!