Estudio de Feature Flags y Despliegues Canario

Simula despliegues porcentuales deterministas, asignación fija de usuarios y duración de experimentos A/B

Plantillas de Despliegue

Carga escenarios canario, despliegues por fases y pruebas A/B

Configuración del Feature Flag

Establece el identificador del flag y el porcentaje objetivo

Clave del Feature Flag:

Porcentaje de Despliegue Objetivo:5%

Los usuarios se asignan de forma determinista a cubos (0-99) mediante hashing consistente

Probar Identificador de Usuario Específico:

Feature Flag INACTIVO

Bucket #8

Simulación de Cohorte Determinista (50 Mock Users)

2 / 50 (4%)

#48

#86

#91

#72

#29

#10

#15

#96

#58

#77

#20

#39

#34

#53

#96

#15

#25

#49

#30

#11

#92

#73

#54

#35

#16

#82

#40

#59

#78

#97

#64

#83

#21

#92

#11

#99

#80

#37

#18

#75

#56

#13

#94

#51

#32

#98

Tamaño de Muestra y Duración de Test A/B

Muestra / Variante

16,726

Muestra Total

33,452

Duración Estimada

~2 días

// Next.js Middleware Edge Feature Flag
import { NextResponse, type NextRequest } from 'next/server';

function hashBucket(key: string): number {
  let hash = 0x811c9dc5;
  for (let i = 0; i < key.length; i++) {
    hash ^= key.charCodeAt(i);
    hash += (hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24);
  }
  return Math.abs(hash >>> 0) % 100;
}

export function middleware(request: NextRequest) {
  const userId = request.cookies.get('userId')?.value || request.ip || 'anonymous';
  const bucket = hashBucket('new-checkout-v2:' + userId);
  const isEnabled = bucket < 5; // 5% rollout

  const response = NextResponse.next();
  response.headers.set('X-Flag-new-checkout-v2', isEnabled ? 'true' : 'false');
  return response;
}

// Pure TypeScript Deterministic Flag Evaluator
export function isFeatureActive(userId: string): boolean {
  let hash = 0x811c9dc5;
  const key = 'new-checkout-v2:' + userId;
  for (let i = 0; i < key.length; i++) {
    hash ^= key.charCodeAt(i);
    hash += (hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24);
  }
  const bucket = Math.abs(hash >>> 0) % 100;
  return bucket < 5;
}

// Next.js Middleware Edge Feature Flag import { NextResponse, type NextRequest } from 'next/server'; function hashBucket(key: string): number { let hash = 0x811c9dc5; for (let i = 0; i < key.length; i++) { hash ^= key.charCodeAt(i); hash += (hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24); } return Math.abs(hash >>> 0) % 100; } export function middleware(request: NextRequest) { const userId = request.cookies.get('userId')?.value || request.ip || 'anonymous'; const bucket = hashBucket('new-checkout-v2:' + userId); const isEnabled = bucket < 5; // 5% rollout const response = NextResponse.next(); response.headers.set('X-Flag-new-checkout-v2', isEnabled ? 'true' : 'false'); return response; }

// Pure TypeScript Deterministic Flag Evaluator export function isFeatureActive(userId: string): boolean { let hash = 0x811c9dc5; const key = 'new-checkout-v2:' + userId; for (let i = 0; i < key.length; i++) { hash ^= key.charCodeAt(i); hash += (hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24); } const bucket = Math.abs(hash >>> 0) % 100; return bucket < 5; }