ref(flags): Refactor LaunchDarkly integration to reusable functions

dev-packages/browser-integration-tests/suites/integrations/featureFlags/openfeature/basic/test.ts

@@ -0,0 +1,47 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../../utils/fixtures';
+
+import { envelopeRequestParser, shouldSkipFeatureFlagsTest, waitForErrorRequest } from '../../../../../utils/helpers';
+
+const FLAG_BUFFER_SIZE = 100; // Corresponds to constant in featureFlags.ts, in browser utils.
+
+sentryTest('Basic test with eviction, update, and no async tasks', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipFeatureFlagsTest()) {
+    sentryTest.skip();
+  }
+
+  await page.route('https://dsn.ingest.sentry.io/**/*', route => {
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ id: 'test-id' }),
+    });
+  });
+
+  const url = await getLocalTestUrl({ testDir: __dirname, skipDsnRouteHandler: true });
+  await page.goto(url);
+
+  await page.evaluate(bufferSize => {
+    const client = (window as any).initialize();
+    for (let i = 1; i <= bufferSize; i++) {
+      client.getBooleanValue(`feat${i}`, false);
+    }
+    client.getBooleanValue(`feat${bufferSize + 1}`, true); // eviction
+    client.getBooleanValue('feat3', true); // update
+  }, FLAG_BUFFER_SIZE);
+
+  const reqPromise = waitForErrorRequest(page);
+  await page.locator('#error').click();
+  const req = await reqPromise;
+  const event = envelopeRequestParser(req);
+
+  const expectedFlags = [{ flag: 'feat2', result: false }];
+  for (let i = 4; i <= FLAG_BUFFER_SIZE; i++) {
+    expectedFlags.push({ flag: `feat${i}`, result: false });
+  }
+  expectedFlags.push({ flag: `feat${FLAG_BUFFER_SIZE + 1}`, result: true });
+  expectedFlags.push({ flag: 'feat3', result: true });
+
+  expect(event.contexts?.flags?.values).toEqual(expectedFlags);
+});

dev-packages/browser-integration-tests/suites/integrations/featureFlags/openfeature/errorHook/init.js

@@ -0,0 +1,20 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+window.sentryOpenFeatureIntegration = Sentry.openFeatureIntegration();
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  sampleRate: 1.0,
+  integrations: [window.sentryOpenFeatureIntegration],
+});
+
+window.initialize = () => {
+  return {
+    getBooleanValue(flag, value) {
+      let hook = new Sentry.OpenFeatureIntegrationHook();
+      hook.error({ flagKey: flag, defaultValue: false }, new Error('flag eval error'));
+      return value;
+    },
+  };
+};

dev-packages/browser-integration-tests/suites/integrations/featureFlags/openfeature/errorHook/test.ts

@@ -0,0 +1,49 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../../utils/fixtures';
+
+import { envelopeRequestParser, shouldSkipFeatureFlagsTest, waitForErrorRequest } from '../../../../../utils/helpers';
+
+const FLAG_BUFFER_SIZE = 100; // Corresponds to constant in featureFlags.ts, in browser utils.
+
+sentryTest('Flag evaluation error hook', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipFeatureFlagsTest()) {
+    sentryTest.skip();
+  }
+
+  await page.route('https://dsn.ingest.sentry.io/**/*', route => {
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ id: 'test-id' }),
+    });
+  });
+
+  const url = await getLocalTestUrl({ testDir: __dirname, skipDsnRouteHandler: true });
+  await page.goto(url);
+
+  await page.evaluate(bufferSize => {
+    const client = (window as any).initialize();
+    for (let i = 1; i <= bufferSize; i++) {
+      client.getBooleanValue(`feat${i}`, false);
+    }
+    client.getBooleanValue(`feat${bufferSize + 1}`, true); // eviction
+    client.getBooleanValue('feat3', true); // update
+  }, FLAG_BUFFER_SIZE);
+
+  const reqPromise = waitForErrorRequest(page);
+  await page.locator('#error').click();
+  const req = await reqPromise;
+  const event = envelopeRequestParser(req);
+
+  // Default value is mocked as false -- these will all error and use default
+  // value
+  const expectedFlags = [{ flag: 'feat2', result: false }];
+  for (let i = 4; i <= FLAG_BUFFER_SIZE; i++) {
+    expectedFlags.push({ flag: `feat${i}`, result: false });
+  }
+  expectedFlags.push({ flag: `feat${FLAG_BUFFER_SIZE + 1}`, result: false });
+  expectedFlags.push({ flag: 'feat3', result: false });
+
+  expect(event.contexts?.flags?.values).toEqual(expectedFlags);
+});

dev-packages/browser-integration-tests/suites/integrations/featureFlags/openfeature/init.js

@@ -0,0 +1,20 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+window.sentryOpenFeatureIntegration = Sentry.openFeatureIntegration();
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  sampleRate: 1.0,
+  integrations: [window.sentryOpenFeatureIntegration],
+});
+
+window.initialize = () => {
+  return {
+    getBooleanValue(flag, value) {
+      let hook = new Sentry.OpenFeatureIntegrationHook();
+      hook.after(null, { flagKey: flag, value: value });
+      return value;
+    },
+  };
+};

dev-packages/browser-integration-tests/suites/integrations/featureFlags/openfeature/subject.js

@@ -0,0 +1,3 @@
+document.getElementById('error').addEventListener('click', () => {
+  throw new Error('Button triggered error');
+});

dev-packages/browser-integration-tests/suites/integrations/featureFlags/openfeature/template.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <button id="error">Throw Error</button>
+  </body>
+</html>

dev-packages/browser-integration-tests/suites/integrations/featureFlags/openfeature/withScope/test.ts

@@ -0,0 +1,65 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../../utils/fixtures';
+
+import { envelopeRequestParser, shouldSkipFeatureFlagsTest, waitForErrorRequest } from '../../../../../utils/helpers';
+
+import type { Scope } from '@sentry/browser';
+
+sentryTest('Flag evaluations in forked scopes are stored separately.', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipFeatureFlagsTest()) {
+    sentryTest.skip();
+  }
+
+  await page.route('https://dsn.ingest.sentry.io/**/*', route => {
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ id: 'test-id' }),
+    });
+  });
+
+  const url = await getLocalTestUrl({ testDir: __dirname, skipDsnRouteHandler: true });
+  await page.goto(url);
+
+  const forkedReqPromise = waitForErrorRequest(page, event => !!event.tags && event.tags.isForked === true);
+  const mainReqPromise = waitForErrorRequest(page, event => !!event.tags && event.tags.isForked === false);
+
+  await page.waitForFunction(() => {
+    const Sentry = (window as any).Sentry;
+    const errorButton = document.querySelector('#error') as HTMLButtonElement;
+    const client = (window as any).initialize();
+
+    client.getBooleanValue('shared', true);
+
+    Sentry.withScope((scope: Scope) => {
+      client.getBooleanValue('forked', true);
+      client.getBooleanValue('shared', false);
+      scope.setTag('isForked', true);
+      if (errorButton) {
+        errorButton.click();
+      }
+    });
+
+    client.getBooleanValue('main', true);
+    Sentry.getCurrentScope().setTag('isForked', false);
+    errorButton.click();
+    return true;
+  });
+
+  const forkedReq = await forkedReqPromise;
+  const forkedEvent = envelopeRequestParser(forkedReq);
+
+  const mainReq = await mainReqPromise;
+  const mainEvent = envelopeRequestParser(mainReq);
+
+  expect(forkedEvent.contexts?.flags?.values).toEqual([
+    { flag: 'forked', result: true },
+    { flag: 'shared', result: false },
+  ]);
+
+  expect(mainEvent.contexts?.flags?.values).toEqual([
+    { flag: 'shared', result: true },
+    { flag: 'main', result: true },
+  ]);
+});

packages/browser/src/index.ts

@@ -15,10 +15,7 @@ export {
   captureFeedback,
 } from '@sentry/core';
 
-export {
-  replayIntegration,
-  getReplay,
-} from '@sentry-internal/replay';
+export { replayIntegration, getReplay } from '@sentry-internal/replay';
 export type {
   ReplayEventType,
   ReplayEventWithTime,
@@ -36,17 +33,11 @@ export { replayCanvasIntegration } from '@sentry-internal/replay-canvas';
 import { feedbackAsyncIntegration } from './feedbackAsync';
 import { feedbackSyncIntegration } from './feedbackSync';
 export { feedbackAsyncIntegration, feedbackSyncIntegration, feedbackSyncIntegration as feedbackIntegration };
-export {
-  getFeedback,
-  sendFeedback,
-} from '@sentry-internal/feedback';
+export { getFeedback, sendFeedback } from '@sentry-internal/feedback';
 
 export * from './metrics';
 
-export {
-  defaultRequestInstrumentationOptions,
-  instrumentOutgoingRequests,
-} from './tracing/request';
+export { defaultRequestInstrumentationOptions, instrumentOutgoingRequests } from './tracing/request';
 export {
   browserTracingIntegration,
   startBrowserTracingNavigationSpan,
@@ -77,4 +68,6 @@ export type { Span } from '@sentry/types';
 export { makeBrowserOfflineTransport } from './transports/offline';
 export { browserProfilingIntegration } from './profiling/integration';
 export { spotlightBrowserIntegration } from './integrations/spotlight';
+export { copyFlagsFromScopeToEvent, insertFlagToScope } from './utils/featureFlags';
 export { launchDarklyIntegration, buildLaunchDarklyFlagUsedHandler } from './integrations/featureFlags/launchdarkly';
+export { openFeatureIntegration, OpenFeatureIntegrationHook } from './integrations/featureFlags/openfeature';

packages/browser/src/integrations/featureFlags/launchdarkly/integration.ts

@@ -1,8 +1,8 @@
 import type { Client, Event, EventHint, IntegrationFn } from '@sentry/types';
 import type { LDContext, LDEvaluationDetail, LDInspectionFlagUsedHandler } from './types';
 
-import { defineIntegration, getCurrentScope } from '@sentry/core';
-import { insertToFlagBuffer } from '../../../utils/featureFlags';
+import { defineIntegration } from '@sentry/core';
+import { copyFlagsFromScopeToEvent, insertFlagToScope } from '../../../utils/featureFlags';
 
 /**
  * Sentry integration for capturing feature flags from LaunchDarkly.
@@ -24,15 +24,7 @@ export const launchDarklyIntegration = defineIntegration(() => {
     name: 'LaunchDarkly',
 
     processEvent(event: Event, _hint: EventHint, _client: Client): Event {
-      const scope = getCurrentScope();
-      const flagContext = scope.getScopeData().contexts.flags;
-      const flagBuffer = flagContext ? flagContext.values : [];
-
-      if (event.contexts === undefined) {
-        event.contexts = {};
-      }
-      event.contexts.flags = { values: [...flagBuffer] };
-      return event;
+      return copyFlagsFromScopeToEvent(event);
     },
   };
 }) satisfies IntegrationFn;
@@ -54,15 +46,7 @@ export function buildLaunchDarklyFlagUsedHandler(): LDInspectionFlagUsedHandler
      * Handle a flag evaluation by storing its name and value on the current scope.
      */
     method: (flagKey: string, flagDetail: LDEvaluationDetail, _context: LDContext) => {
-      if (typeof flagDetail.value === 'boolean') {
-        const scopeContexts = getCurrentScope().getScopeData().contexts;
-        if (!scopeContexts.flags) {
-          scopeContexts.flags = { values: [] };
-        }
-        const flagBuffer = scopeContexts.flags.values;
-        insertToFlagBuffer(flagBuffer, flagKey, flagDetail.value);
-      }
-      return;
+      insertFlagToScope(flagKey, flagDetail.value);
     },
   };
 }

packages/browser/src/integrations/featureFlags/openfeature/index.ts

@@ -0,0 +1 @@
+export { openFeatureIntegration, OpenFeatureIntegrationHook } from './integration';

packages/browser/src/integrations/featureFlags/openfeature/integration.ts

@@ -0,0 +1,41 @@
+/**
+ * OpenFeature integration.
+ *
+ * Add the openFeatureIntegration() function call to your integration lists.
+ * Add the integration hook to your OpenFeature object.
+ *   - OpenFeature.getClient().addHooks(new OpenFeatureIntegrationHook());
+ */
+import type { Client, Event, EventHint, IntegrationFn } from '@sentry/types';
+import type { EvaluationDetails, HookContext, HookHints, JsonValue, OpenFeatureHook } from './types';
+
+import { defineIntegration } from '@sentry/core';
+import { copyFlagsFromScopeToEvent, insertFlagToScope } from '../../../utils/featureFlags';
+
+export const openFeatureIntegration = defineIntegration(() => {
+  return {
+    name: 'OpenFeature',
+
+    processEvent(event: Event, _hint: EventHint, _client: Client): Event {
+      return copyFlagsFromScopeToEvent(event);
+    },
+  };
+}) satisfies IntegrationFn;
+
+/**
+ * OpenFeature Hook class implementation.
+ */
+export class OpenFeatureIntegrationHook implements OpenFeatureHook {
+  /**
+   * Successful evaluation result.
+   */
+  public after(_hookContext: Readonly<HookContext<JsonValue>>, evaluationDetails: EvaluationDetails<JsonValue>): void {
+    insertFlagToScope(evaluationDetails.flagKey, evaluationDetails.value);
+  }
+
+  /**
+   * On error evaluation result.
+   */
+  public error(hookContext: Readonly<HookContext<JsonValue>>, _error: unknown, _hookHints?: HookHints): void {
+    insertFlagToScope(hookContext.flagKey, hookContext.defaultValue);
+  }
+}