Build a user frustration detection & response system

{
  "mcpServers": {
    "LaunchDarkly": {
      "command": "npx",
      "args": [
        "-y", "--package", "@launchdarkly/mcp-server", "--", "mcp", "start",
        "--api-key", "api-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
      ]
    }
  }
}

import { getLaunchDarklyClient } from '../services/launchdarkly';

useEffect(() => {
    // Check feature flag for test rage click button
    const checkFeatureFlag = () => {
      const client = getLaunchDarklyClient();
      console.log('[Feature Flag Debug] Checking flag, client available:', !!client);
      
      if (client) {
        try {
          const flagValue = client.variation('test-rage-click-button', false);
          console.log('[Feature Flag Debug] Flag value for test-rage-click-button:', flagValue);
          setShowTestButton(flagValue);
        } catch (error) {
          console.error('[Feature Flag Debug] Error checking test-rage-click-button flag:', error);
          setShowTestButton(false);
        }
      } else {
        console.log('[Feature Flag Debug] LaunchDarkly client not available yet');
      }
    };

    // Check immediately
    checkFeatureFlag();

    // Retry mechanism - check periodically until client is ready
    let retryCount = 0;
    const maxRetries = 10;
    const retryInterval = setInterval(() => {
      const client = getLaunchDarklyClient();
      if (client) {
        console.log('[Feature Flag Debug] Client is now available, checking flag');
        checkFeatureFlag();
        clearInterval(retryInterval);
      } else {
        retryCount++;
        if (retryCount >= maxRetries) {
          console.warn('[Feature Flag Debug] LaunchDarkly client not available after', maxRetries, 'retries');
          clearInterval(retryInterval);
        }
      }
    }, 500); // Check every 500ms

    // Set up listener for flag changes
    const setupListener = () => {
      const client = getLaunchDarklyClient();
      if (client) {
        console.log('[Feature Flag Debug] Setting up flag change listener');
        client.on('change:test-rage-click-button', checkFeatureFlag);
        // Also listen for when client becomes ready
        client.on('ready', () => {
          console.log('[Feature Flag Debug] LaunchDarkly client is ready, checking flag');
          checkFeatureFlag();
        });
      }
    };

    // Try to set up listener immediately
    setupListener();

    // Also try to set up listener after a short delay (in case client initializes)
    const listenerTimeout = setTimeout(setupListener, 1000);

    // Cleanup listeners and intervals on unmount
    return () => {
      clearInterval(retryInterval);
      clearTimeout(listenerTimeout);
      const client = getLaunchDarklyClient();
      if (client) {
        client.off('change:test-rage-click-button', checkFeatureFlag);
        client.off('ready', checkFeatureFlag);
      }
    };
  }, []);

  // Rest of code below...

{showTestButton && (
          <button
            style={{
              marginTop: '10px',
              padding: '8px 16px',
              backgroundColor: '#ff4444',
              color: 'white',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer',
              fontSize: '12px',
            }}
            onClick={(e) => {
              // Intentionally does nothing - for testing rage clicks
              e.preventDefault();
              console.log('Test button clicked (intentionally non-functional for rage click testing)');
            }}
            title="Test Rage Click Detection: Click rapidly 5+ times within 2 seconds in the same spot"
          >
            :test_tube: Test Rage Click (Click Rapidly)
          </button>
        )}

/**
 * Get the LaunchDarkly client instance
 * @returns {object|null} The LaunchDarkly client or null if not initialized
 */
export function getLaunchDarklyClient() {
  return ldClient;
}

/**
 * Check if a feature flag is enabled
 * @param {string} flagKey - The feature flag key
 * @param {boolean} defaultValue - Default value if client is not initialized or flag not found
 * @returns {boolean} The flag value
 */
export function isFeatureFlagEnabled(flagKey, defaultValue = false) {
  if (!ldClient || !isInitialized) {
    return defaultValue;
  }
  try {
    return ldClient.variation(flagKey, defaultValue);
  } catch (error) {
    console.error(`Error checking feature flag ${flagKey}:`, error);
    return defaultValue;
  }
}