Feature Flags and Progressive Rollouts: Ship Confidently

Why Feature Flags Matter

Traditional deployments are binary: feature is off or on. Feature flags enable gradual rollouts: enable for 1% of users, monitor, expand to 50%, then 100%. If issues arise, disable instantly without redeployment.

Types of Feature Flags

Boolean flags: Simple on/off.

if (featureFlags.isEnabled('newCheckoutFlow')) {
  return <NewCheckout />;
}
return <LegacyCheckout />;

Multivariate flags: Multiple variants for A/B testing.

const variant = featureFlags.getVariant('checkoutFlow');
switch (variant) {
  case 'v1': return <CheckoutV1 />;
  case 'v2': return <CheckoutV2 />;
  default: return <CheckoutControl />;
}

Config flags: Feature configuration without code changes.

const maxUploadSize = featureFlags.getConfig('maxUploadMb', 100);

Implementing Feature Flags

Client-side evaluation: Flag state sent with initial page load. Fast but reveals all experiments.

Server-side evaluation: Evaluate flags server-side per request. Slower but secure.

Most SaaS use hybrid: important flags evaluated server-side, less critical flags client-side.

// Client-side flag hook
export function useFeatureFlag(flag: string) {
  const [enabled, setEnabled] = useState(false);

  useEffect(() => {
    // Fetch from server or cached in window
    setEnabled(window.FLAGS?.[flag] ?? false);
  }, [flag]);

  return enabled;
}

// Server-side evaluation
export function evalFlag(flag: string, userId: string, context: any) {
  const rule = flagRules[flag];
  if (!rule) return false;

  // Check percentage rollout
  if (rule.rolloutPercentage < 100) {
    const hash = hashUserId(userId);
    if (hash % 100 > rule.rolloutPercentage) return false;
  }

  // Check targeting rules
  if (rule.targetRules) {
    for (const target of rule.targetRules) {
      if (matchesTarget(context, target)) return true;
    }
  }

  return rule.enabled;
}

Progressive Rollout Strategy

Phase 1: Internal (1% of traffic) Deploy to internal users only. Catch obvious bugs. QA team validates flows.

Phase 2: Opt-in Beta (5-10% of traffic) Enable for users who opted into beta program. Gather early feedback.

Phase 3: Ramped (25%, 50%, 100%) Gradually increase percentage. Monitor error rates, latency, and user engagement. If metrics degrade, rollback.

Phase 4: Persist and Clean After 100% rollout and stability, remove feature flag code. Keep configuration flags for future tweaks.

Monitoring During Rollouts

Critical metrics during rollout:

• Error rates: Sudden spike indicates new bugs
• Latency: Performance regression
• User engagement: Did feature adoption hurt existing metrics?
• Conversion: For monetization changes, track revenue impact

Set alerts: if error rate increases >50%, automatically disable flag.

A/B Testing with Flags

Flags enable controlled experimentation:

const variant = getVariant('checkoutFlow', userId);

// Track events
analytics.track('checkout_started', {
  variant,
  timestamp: Date.now()
});

analytics.track('checkout_completed', {
  variant,
  revenue: amount
});

// Later: analyze which variant converts better

Feature Flag Services

Self-hosted options (Unleash) offer control but require infrastructure.

Managed services (LaunchDarkly, Flagsmith) provide:

• Dashboard for enabling/disabling flags
• Targeting rules (enable for specific users, countries, etc.)
• A/B test analytics
• Audit logs
• Webhook integrations

Choose based on flag volume, team size, and compliance needs.