fix: Client SDKs should use wrapper information. (#836)

Wrappers are accessed through the platform, but react-native and the
browser implementation were not propagating these to the platform.

The first implementation was the node platform, which handled this
correctly. The Cloudlare and RN platform didn't, and then the RN
platform was used as reference for implementing the browser platform.

So, this also affects edge and a similar update should be considered for
those SDKs.

Author: kinyoklion

packages/sdk/browser/__tests__/BrowserDataManager.test.ts

@@ -102,7 +102,7 @@ describe('given a BrowserDataManager with mocked dependencies', () => {
         createHash: () => new MockHasher(),
         randomUUID: () => '123',
       },
-      info: new BrowserInfo(),
+      info: new BrowserInfo({}),
       requests: {
         createEventSource: jest.fn((streamUri: string = '', options: any = {}) => ({
           streamUri,

packages/sdk/browser/__tests__/platform/BrowserInfo.test.ts

@@ -0,0 +1,51 @@
+import BrowserInfo from '../../src/platform/BrowserInfo';
+
+it('returns correct platform data', () => {
+  const browserInfo = new BrowserInfo({});
+  expect(browserInfo.platformData()).toEqual({
+    name: 'JS',
+  });
+});
+
+it('returns correct SDK data without wrapper info', () => {
+  const browserInfo = new BrowserInfo({});
+  expect(browserInfo.sdkData()).toEqual({
+    name: '@launchdarkly/js-client-sdk',
+    version: '0.0.0',
+    userAgentBase: 'JSClient',
+  });
+});
+
+it('returns correct SDK data with wrapper name', () => {
+  const browserInfo = new BrowserInfo({ wrapperName: 'test-wrapper' });
+  expect(browserInfo.sdkData()).toEqual({
+    name: '@launchdarkly/js-client-sdk',
+    version: '0.0.0',
+    userAgentBase: 'JSClient',
+    wrapperName: 'test-wrapper',
+  });
+});
+
+it('returns correct SDK data with wrapper version', () => {
+  const browserInfo = new BrowserInfo({ wrapperVersion: '1.0.0' });
+  expect(browserInfo.sdkData()).toEqual({
+    name: '@launchdarkly/js-client-sdk',
+    version: '0.0.0',
+    userAgentBase: 'JSClient',
+    wrapperVersion: '1.0.0',
+  });
+});
+
+it('returns correct SDK data with both wrapper name and version', () => {
+  const browserInfo = new BrowserInfo({
+    wrapperName: 'test-wrapper',
+    wrapperVersion: '1.0.0',
+  });
+  expect(browserInfo.sdkData()).toEqual({
+    name: '@launchdarkly/js-client-sdk',
+    version: '0.0.0',
+    userAgentBase: 'JSClient',
+    wrapperName: 'test-wrapper',
+    wrapperVersion: '1.0.0',
+  });
+});

packages/sdk/browser/src/BrowserClient.ts

@@ -115,7 +115,7 @@ export class BrowserClient extends LDClientImpl implements LDClient {
     // TODO: Use the already-configured baseUri from the SDK config. SDK-560
     const baseUrl = options.baseUri ?? 'https://clientsdk.launchdarkly.com';
 
-    const platform = overridePlatform ?? new BrowserPlatform(logger);
+    const platform = overridePlatform ?? new BrowserPlatform(logger, options);
     // Only the browser-specific options are in validatedBrowserOptions.
     const validatedBrowserOptions = validateBrowserOptions(options, logger);
     // The base options are in baseOptionsWithDefaults.

packages/sdk/browser/src/platform/BrowserInfo.ts

@@ -1,16 +1,29 @@
 import { Info, PlatformData, SdkData } from '@launchdarkly/js-client-sdk-common';
 
 export default class BrowserInfo implements Info {
+  constructor(private readonly _config: { wrapperName?: string; wrapperVersion?: string }) {}
+
   platformData(): PlatformData {
     return {
       name: 'JS', // Name maintained from previous 3.x implementation.
     };
   }
+
   sdkData(): SdkData {
-    return {
+    const data: SdkData = {
       name: '@launchdarkly/js-client-sdk',
       version: '0.0.0', // x-release-please-version
       userAgentBase: 'JSClient',
     };
+
+    if (this._config.wrapperName) {
+      data.wrapperName = this._config.wrapperName;
+    }
+
+    if (this._config.wrapperVersion) {
+      data.wrapperVersion = this._config.wrapperVersion;
+    }
+
+    return data;
   }
 }

packages/sdk/browser/src/platform/BrowserPlatform.ts

@@ -8,6 +8,7 @@ import {
   Storage,
 } from '@launchdarkly/js-client-sdk-common';
 
+import { BrowserOptions } from '../options';
 import BrowserCrypto from './BrowserCrypto';
 import BrowserEncoding from './BrowserEncoding';
 import BrowserInfo from './BrowserInfo';
@@ -16,15 +17,16 @@ import LocalStorage, { isLocalStorageSupported } from './LocalStorage';
 
 export default class BrowserPlatform implements Platform {
   encoding: Encoding = new BrowserEncoding();
-  info: Info = new BrowserInfo();
+  info: Info;
   // fileSystem?: Filesystem;
   crypto: Crypto = new BrowserCrypto();
   requests: Requests = new BrowserRequests();
   storage?: Storage;
 
-  constructor(logger: LDLogger) {
+  constructor(logger: LDLogger, options: BrowserOptions) {
     if (isLocalStorageSupported()) {
       this.storage = new LocalStorage(logger);
     }
+    this.info = new BrowserInfo(options);
   }
 }

packages/sdk/react-native/__tests__/MobileDataManager.test.ts

@@ -91,7 +91,7 @@ describe('given a MobileDataManager with mocked dependencies', () => {
     const mockedFetch = mockFetch('{"flagA": true}', 200);
     platform = {
       crypto: new PlatformCrypto(),
-      info: new PlatformInfo(config.logger),
+      info: new PlatformInfo(config.logger, {}),
       requests: {
         createEventSource: jest.fn((streamUri: string = '', options: any = {}) => ({
           streamUri,

packages/sdk/react-native/__tests__/ReactNativeLDClient.test.ts

@@ -38,7 +38,7 @@ jest.mock('../src/platform', () => ({
   __esModule: true,
   default: jest.fn((logger: LDLogger) => ({
     crypto: new PlatformCrypto(),
-    info: new PlatformInfo(logger),
+    info: new PlatformInfo(logger, {}),
     requests: {
       createEventSource: jest.fn(),
       fetch: jest.fn(),
@@ -67,7 +67,7 @@ it('uses correct default diagnostic url', () => {
   };
   (createPlatform as jest.Mock).mockReturnValue({
     crypto: new PlatformCrypto(),
-    info: new PlatformInfo(logger),
+    info: new PlatformInfo(logger, {}),
     requests: {
       createEventSource: jest.fn(),
       fetch: mockedFetch,
@@ -95,7 +95,7 @@ it('uses correct default analytics event url', async () => {
   };
   (createPlatform as jest.Mock).mockReturnValue({
     crypto: new PlatformCrypto(),
-    info: new PlatformInfo(logger),
+    info: new PlatformInfo(logger, {}),
     requests: {
       createEventSource: createMockEventSource,
       fetch: mockedFetch,
@@ -127,7 +127,7 @@ it('uses correct default polling url', async () => {
   };
   (createPlatform as jest.Mock).mockReturnValue({
     crypto: new PlatformCrypto(),
-    info: new PlatformInfo(logger),
+    info: new PlatformInfo(logger, {}),
     requests: {
       createEventSource: jest.fn(),
       fetch: mockedFetch,
@@ -158,7 +158,7 @@ it('uses correct default streaming url', (done) => {
   };
   (createPlatform as jest.Mock).mockReturnValue({
     crypto: new PlatformCrypto(),
-    info: new PlatformInfo(logger),
+    info: new PlatformInfo(logger, {}),
     requests: {
       createEventSource: mockedCreateEventSource,
       fetch: jest.fn(),
@@ -198,7 +198,7 @@ it('includes authorization header for polling', async () => {
   };
   (createPlatform as jest.Mock).mockReturnValue({
     crypto: new PlatformCrypto(),
-    info: new PlatformInfo(logger),
+    info: new PlatformInfo(logger, {}),
     requests: {
       createEventSource: jest.fn(),
       fetch: mockedFetch,
@@ -223,6 +223,41 @@ it('includes authorization header for polling', async () => {
   );
 });
 
+it('includes x-launchdarkly-wrapper header for polling', async () => {
+  const mockedFetch = mockFetch('{"flagA": true}', 200);
+  const logger: LDLogger = {
+    error: jest.fn(),
+    warn: jest.fn(),
+    info: jest.fn(),
+    debug: jest.fn(),
+  };
+  (createPlatform as jest.Mock).mockReturnValue({
+    crypto: new PlatformCrypto(),
+    info: new PlatformInfo(logger, { wrapperName: 'Rapper', wrapperVersion: '1.0.0' }),
+    requests: {
+      createEventSource: jest.fn(),
+      fetch: mockedFetch,
+      getEventSourceCapabilities: jest.fn(),
+    },
+    encoding: new PlatformEncoding(),
+    storage: new PlatformStorage(logger),
+  });
+  const client = new ReactNativeLDClient('mobile-key', AutoEnvAttributes.Enabled, {
+    diagnosticOptOut: true,
+    sendEvents: false,
+    initialConnectionMode: 'polling',
+    automaticBackgroundHandling: false,
+  });
+  await client.identify({ kind: 'user', key: 'bob' });
+
+  expect(mockedFetch).toHaveBeenCalledWith(
+    expect.anything(),
+    expect.objectContaining({
+      headers: expect.objectContaining({ 'x-launchdarkly-wrapper': 'Rapper/1.0.0' }),
+    }),
+  );
+});
+
 it('includes authorization header for streaming', (done) => {
   const mockedCreateEventSource = jest.fn();
   const logger: LDLogger = {
@@ -233,7 +268,7 @@ it('includes authorization header for streaming', (done) => {
   };
   (createPlatform as jest.Mock).mockReturnValue({
     crypto: new PlatformCrypto(),
-    info: new PlatformInfo(logger),
+    info: new PlatformInfo(logger, {}),
     requests: {
       createEventSource: mockedCreateEventSource,
       fetch: jest.fn(),
@@ -264,6 +299,47 @@ it('includes authorization header for streaming', (done) => {
     });
 });
 
+it('includes wrapper header for streaming', (done) => {
+  const mockedCreateEventSource = jest.fn();
+  const logger: LDLogger = {
+    error: jest.fn(),
+    warn: jest.fn(),
+    info: jest.fn(),
+    debug: jest.fn(),
+  };
+  (createPlatform as jest.Mock).mockReturnValue({
+    crypto: new PlatformCrypto(),
+    info: new PlatformInfo(logger, { wrapperName: 'Rapper', wrapperVersion: '1.0.0' }),
+    requests: {
+      createEventSource: mockedCreateEventSource,
+      fetch: jest.fn(),
+      getEventSourceCapabilities: jest.fn(),
+    },
+    encoding: new PlatformEncoding(),
+    storage: new PlatformStorage(logger),
+  });
+  const client = new ReactNativeLDClient('mobile-key', AutoEnvAttributes.Enabled, {
+    diagnosticOptOut: true,
+    sendEvents: false,
+    initialConnectionMode: 'streaming',
+    automaticBackgroundHandling: false,
+  });
+
+  client
+    .identify({ kind: 'user', key: 'bob' }, { timeout: 0 })
+    .then(() => {})
+    .catch(() => {})
+    .then(() => {
+      expect(mockedCreateEventSource).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({
+          headers: expect.objectContaining({ 'x-launchdarkly-wrapper': 'Rapper/1.0.0' }),
+        }),
+      );
+      done();
+    });
+});
+
 it('includes authorization header for events', async () => {
   const mockedFetch = mockFetch('{"flagA": true}', 200);
   const logger: LDLogger = {
@@ -274,7 +350,7 @@ it('includes authorization header for events', async () => {
   };
   (createPlatform as jest.Mock).mockReturnValue({
     crypto: new PlatformCrypto(),
-    info: new PlatformInfo(logger),
+    info: new PlatformInfo(logger, {}),
     requests: {
       createEventSource: jest.fn(),
       fetch: mockedFetch,

packages/sdk/react-native/src/ReactNativeLDClient.ts

@@ -62,7 +62,7 @@ export default class ReactNativeLDClient extends LDClientImpl {
     };
 
     const validatedRnOptions = validateOptions(options, logger);
-    const platform = createPlatform(logger, validatedRnOptions.storage);
+    const platform = createPlatform(logger, options, validatedRnOptions.storage);
 
     super(
       sdkKey,

packages/sdk/react-native/src/platform/PlatformInfo.ts

@@ -4,7 +4,10 @@ import { name, version } from '../../package.json';
 import { ldApplication, ldDevice } from './autoEnv';
 
 export default class PlatformInfo implements Info {
-  constructor(private readonly _logger: LDLogger) {}
+  constructor(
+    private readonly _logger: LDLogger,
+    private readonly _config: { wrapperName?: string; wrapperVersion?: string },
+  ) {}
 
   platformData(): PlatformData {
     const data = {
@@ -18,12 +21,20 @@ export default class PlatformInfo implements Info {
   }
 
   sdkData(): SdkData {
-    const data = {
+    const data: SdkData = {
       name,
       version,
       userAgentBase: 'ReactNativeClient',
     };
 
+    if (this._config?.wrapperName) {
+      data.wrapperName = this._config.wrapperName;
+    }
+
+    if (this._config?.wrapperVersion) {
+      data.wrapperVersion = this._config.wrapperVersion;
+    }
+
     this._logger.debug(`sdkData: ${JSON.stringify(data, null, 2)}`);
     return data;
   }

packages/sdk/react-native/src/platform/index.ts

@@ -1,14 +1,15 @@
 import { LDLogger, Platform, Storage } from '@launchdarkly/js-client-sdk-common';
 
+import RNOptions from '../RNOptions';
 import PlatformCrypto from './crypto';
 import PlatformEncoding from './PlatformEncoding';
 import PlatformInfo from './PlatformInfo';
 import PlatformRequests from './PlatformRequests';
 import PlatformStorage from './PlatformStorage';
 
-const createPlatform = (logger: LDLogger, storage?: Storage): Platform => ({
+const createPlatform = (logger: LDLogger, options: RNOptions, storage?: Storage): Platform => ({
   crypto: new PlatformCrypto(),
-  info: new PlatformInfo(logger),
+  info: new PlatformInfo(logger, options),
   requests: new PlatformRequests(logger),
   encoding: new PlatformEncoding(),
   storage: storage ?? new PlatformStorage(logger),