Banderas de características en Mobile

npm install @launchdarkly/react-native-client-sdk

// src/flags/launchDarkly.ts
import {
  ReactNativeLDClient,
  AutoEnvAttributes,
} from "@launchdarkly/react-native-client-sdk";
 
const client = new ReactNativeLDClient(
  process.env.EXPO_PUBLIC_LAUNCHDARKLY_MOBILE_KEY!,
  AutoEnvAttributes.Enabled,
);
 
export async function initFlags(user: { key: string; email?: string }) {
  await client.identify({ kind: "user", key: user.key, email: user.email });
  return client;
}
 
export function isEnabled(flag: string, defaultValue = false): boolean {
  return client.boolVariation(flag, defaultValue);
}

// src/flags/FlagGate.tsx
import { type ReactNode } from "react";
import { ActivityIndicator, Text, View } from "react-native";
import { useBoolVariation } from "@launchdarkly/react-native-client-sdk";
 
type Props = { flag: string; fallback?: ReactNode; children: ReactNode };
 
export function FlagGate({ flag, fallback, children }: Props) {
  const enabled = useBoolVariation(flag, false); // valor predeterminado seguro: apagado
 
  if (enabled === undefined) {
    return <ActivityIndicator accessibilityLabel="Cargando característica" />;
  }
 
  if (!enabled) {
    return (
      fallback ?? (
        <View style={{ flex: 1, justifyContent: "center", padding: 24 }}>
          <Text>Esta característica no está disponible temporalmente.</Text>
        </View>
      )
    );
  }
 
  return <>{children}</>;
}

// eas.json
{
  "build": {
    "preview": { "distribution": "internal", "channel": "preview" },
    "production": { "channel": "production" }
  }
}

| Capa | Herramienta | Propósito |
|-------|------|---------|
| Binario | eas build profile + channel | Qué stream de actualización escucha la app |
| Bundle | eas update --channel | Qué versión de JS está en ese stream |
| Comportamiento | Bandera de LaunchDarkly | Si la UI de checkout_v3 se renderiza |

// src/flags/bootstrap.ts
import AsyncStorage from "@react-native-async-storage/async-storage";
import * as Updates from "expo-updates";
import { initFlags, isEnabled } from "./launchDarkly";
 
const CACHE_KEY = "flags:v1";
 
export async function bootstrapFlags(userKey: string) {
  const cached = await AsyncStorage.getItem(CACHE_KEY);
 
  try {
    await initFlags({ key: userKey });
    const snapshot = {
      checkout_v3: isEnabled("checkout_v3", false),
      api_v3: isEnabled("api_v3", false),
    };
    await AsyncStorage.setItem(CACHE_KEY, JSON.stringify(snapshot));
    return snapshot;
  } catch {
    // Endpoint de config inactivo - usa cache para que la app aún se inicie
    return cached ? JSON.parse(cached) : { checkout_v3: false, api_v3: false };
  }
}

// App.tsx - etiquetar analytics con channel + updateId para correlación de incidentes
import * as Updates from "expo-updates";
 
void Updates.updateId; // enviar a scope de Sentry en init

// app/(tabs)/checkout.tsx
import { FlagGate } from "@/flags/FlagGate";
import { CheckoutV3Screen } from "@/features/checkout/CheckoutV3Screen";
import { LegacyCheckoutScreen } from "@/features/checkout/LegacyCheckoutScreen";
 
export default function CheckoutRoute() {
  return (
    <FlagGate flag="checkout_v3" fallback={<LegacyCheckoutScreen />}>
      <CheckoutV3Screen />
    </FlagGate>
  );
}

// src/features/checkout/CheckoutV3Screen.tsx - también limitar la versión de API
import { useBoolVariation } from "@launchdarkly/react-native-client-sdk";
 
export function CheckoutV3Screen() {
  const useApiV3 = useBoolVariation("api_v3", false);
  const client = useApiV3 ? apiV3 : apiV2;
  // ...
}

Reglas de orientación de LaunchDarkly (consola):
1. Segmento "employees" → checkout_v3: true (email termina con @company.com)
2. Segmento "preview_builds" → checkout_v3: true (custom: channel == preview)
3. Regla predeterminada → checkout_v3: false

// Pasar atributos personalizados en el momento de identificación
await client.identify({
  kind: "user",
  key: user.id,
  email: user.email,
  custom: {
    channel: Updates.channel ?? "unknown",
    runtimeVersion: Updates.runtimeVersion ?? "unknown",
    appVersion: Application.nativeApplicationVersion,
  },
});

# Enviar JS al canal de vista previa primero - banderas apagadas para usuarios externos
eas update --channel preview --environment preview \
  --message "feat: checkout v3 UI (flag off)"
 
# Después de la absorción de vista previa - publicar en el canal de producción; bandera aún apagada
eas update --channel production --environment production \
  --message "promote: checkout v3 bundle (flag off)"
 
# Ramada de bandera en LaunchDarkly: 1% → 10% → 50% → 100%
# Monitorear libre de crashes y éxito de pago en cada paso

Incidente: pico de fallos de pago en checkout_v3
 
T+0  LaunchDarkly: checkout_v3 → false (apagado global)
T+2  Verificar que la tasa de éxito de pago se recupera
T+5  Si defecto de bundle: eas update:rollback en canal de producción
T+60 Monitorear libre de crashes durante una hora

# Paralelo: confirmar qué bundle está en vivo
eas channel:view production
eas update:list --branch production --limit 3

// src/flags/remoteConfig.ts
const FLAGS_URL = process.env.EXPO_PUBLIC_FLAGS_URL!;
 
export async function fetchFlags(): Promise<Record<string, boolean>> {
  const res = await fetch(FLAGS_URL, { headers: { "Cache-Control": "no-cache" } });
  if (!res.ok) throw new Error("flags unavailable");
  return res.json();
}