Increases specificity of localStorage keys to differentiate events by writeKey

.changeset/violet-rockets-tie.md

@@ -0,0 +1,5 @@
+---
+'@segment/analytics-next': patch
+---
+
+Fixes issue related to how retried events are stored in localStorage to prevent analytics.js from reading events for a different writeKey when that writeKey is used on the same domain as the current analytics.js.

packages/browser-integration-tests/src/fixtures/settings.ts

@@ -4,11 +4,11 @@ type RemotePlugin = NonNullable<LegacySettings['remotePlugins']>[number]
 
 export class SettingsBuilder {
   private settings: Record<string, any>
-  constructor(baseSettings?: Record<string, any>) {
+  constructor(writeKey: string, baseSettings?: Record<string, any>) {
     this.settings = baseSettings || {
       integrations: {
         'Segment.io': {
-          apiKey: 'writeKey',
+          apiKey: writeKey,
           unbundledIntegrations: [],
           addBundledMetadata: true,
           maybeBundledConfigIds: {},

packages/browser-integration-tests/src/helpers/extract-writekey.ts

@@ -0,0 +1,9 @@
+export function extractWriteKeyFromUrl(url: string): string | undefined {
+  const matches = url.match(
+    /https:\/\/cdn.segment.com\/v1\/projects\/(.+)\/settings/
+  )
+
+  if (matches) {
+    return matches[1]
+  }
+}

packages/browser-integration-tests/src/helpers/get-persisted-items.ts

@@ -0,0 +1,42 @@
+export interface PersistedQueueResult {
+  key: string
+  name: string
+  messageIds: string[]
+  writeKey?: string
+}
+
+export function getPersistedItems(): PersistedQueueResult[] {
+  const results: PersistedQueueResult[] = []
+
+  for (let i = 0; i < window.localStorage.length; i++) {
+    const key = window.localStorage.key(i)
+    if (
+      key &&
+      key.startsWith('persisted-queue:v1:') &&
+      key.endsWith(':items')
+    ) {
+      const value = window.localStorage.getItem(key)
+      const messageIds = value
+        ? JSON.parse(value).map((i: any) => i.event.messageId)
+        : []
+
+      // Key looks like either:
+      // new keys - persisted-queue:v1:writeKey:dest-Segment.io:items
+      // old keys - persisted-queue:v1:dest-Segment.io:items
+      const components = key.split(':')
+      let writeKey: string | undefined
+      let name: string
+
+      if (components.length === 5) {
+        ;[, , writeKey, name] = components
+      } else if (components.length === 4) {
+        ;[, , name] = components
+      } else {
+        throw new Error('Unrecognized persisted queue key.')
+      }
+      results.push({ key, messageIds, name, writeKey })
+    }
+  }
+
+  return results
+}

packages/browser-integration-tests/src/index.test.ts

@@ -1,6 +1,7 @@
 import { test, expect } from '@playwright/test'
 import { SettingsBuilder } from './fixtures/settings'
 import { standaloneMock } from './helpers/standalone-mock'
+import { extractWriteKeyFromUrl } from './helpers/extract-writekey'
 
 test.describe('Standalone tests', () => {
   test.beforeEach(standaloneMock)
@@ -14,13 +15,14 @@ test.describe('Standalone tests', () => {
             return route.continue()
           }
 
+          const writeKey = extractWriteKeyFromUrl(request.url()) || 'writeKey'
           return route.fulfill({
             status: 200,
             headers: {
               'Content-Type': 'application/json',
             },
             body: JSON.stringify(
-              new SettingsBuilder()
+              new SettingsBuilder(writeKey)
                 .addActionDestinationSettings({
                   name: 'Amplitude (Actions)',
                   creationName: 'Actions Amplitude',
@@ -74,13 +76,14 @@ test.describe('Standalone tests', () => {
             return route.continue()
           }
 
+          const writeKey = extractWriteKeyFromUrl(request.url()) || 'writeKey'
           return route.fulfill({
             status: 200,
             headers: {
               'Content-Type': 'application/json',
             },
             body: JSON.stringify(
-              new SettingsBuilder()
+              new SettingsBuilder(writeKey)
                 .addActionDestinationSettings({
                   name: 'Braze Cloud Mode (Actions)',
                   creationName: 'Braze Cloud Mode (Actions)',

packages/browser-integration-tests/src/segment-retries.test.ts

@@ -1,30 +1,38 @@
 import { Request, test, expect } from '@playwright/test'
 import { SettingsBuilder } from './fixtures/settings'
 import { standaloneMock } from './helpers/standalone-mock'
+import { extractWriteKeyFromUrl } from './helpers/extract-writekey'
+import {
+  PersistedQueueResult,
+  getPersistedItems,
+} from './helpers/get-persisted-items'
 
 test.describe('Standalone tests', () => {
   test.beforeEach(standaloneMock)
-
-  test.describe('Segment.io Retries', () => {
-    test.beforeEach(async ({ context }) => {
-      await context.route(
-        'https://cdn.segment.com/v1/projects/*/settings',
-        (route, request) => {
-          if (request.method().toLowerCase() !== 'get') {
-            return route.continue()
-          }
-
-          return route.fulfill({
-            status: 200,
-            headers: {
-              'Content-Type': 'application/json',
-            },
-            body: JSON.stringify(new SettingsBuilder().build()),
-          })
+  test.beforeEach(async ({ context }) => {
+    await context.route(
+      'https://cdn.segment.com/v1/projects/*/settings',
+      (route, request) => {
+        if (request.method().toLowerCase() !== 'get') {
+          return route.continue()
         }
-      )
-    })
 
+        const writeKey = extractWriteKeyFromUrl(request.url()) || 'writeKey'
+        return route.fulfill({
+          status: 200,
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(new SettingsBuilder(writeKey).build()),
+        })
+      }
+    )
+  })
+  test.beforeEach(async ({ context }) => {
+    await context.setOffline(false)
+  })
+
+  test.describe('Segment.io Retries', () => {
     test('supports retrying failed requests on page navigation', async ({
       page,
     }) => {
@@ -111,5 +119,85 @@ test.describe('Standalone tests', () => {
       expect(request.method()).toBe('POST')
       expect(request.postDataJSON().messageId).toBe(messageId)
     })
+
+    test('events persisted to localStorage do not leak across write keys', async ({
+      page,
+    }) => {
+      // Load analytics.js
+      await page.goto('/standalone.html')
+      await page.evaluate(() => window.analytics.load('key1'))
+
+      // fail the initial track request on first 2 page loads (2 different write keys)
+      await page.route(
+        'https://api.segment.io/v1/t',
+        (route) => {
+          return route.abort('blockedbyclient')
+        },
+        {
+          times: 2,
+        }
+      )
+      let requestFailure = new Promise<Record<string, any>>((resolve) => {
+        page.once('requestfailed', (request) => resolve(request.postDataJSON()))
+      })
+
+      // trigger an event that wil fail
+      await page.evaluate(() => {
+        void window.analytics.track('test event')
+      })
+
+      const { messageId: messageId1 } = await requestFailure
+      await page.reload()
+
+      // check localstorage for event data from previous analytics (key1)
+      let persistedItems = await page.evaluate(getPersistedItems)
+
+      expect(persistedItems).toHaveLength(1)
+      expect(persistedItems[0].writeKey).toBe('key1')
+      expect(persistedItems[0].messageIds).toStrictEqual([messageId1])
+
+      requestFailure = new Promise<Record<string, any>>((resolve) => {
+        page.once('requestfailed', (request) => resolve(request.postDataJSON()))
+      })
+
+      // Load analytics with a different write key (key2)
+      await page.evaluate(() => window.analytics.load('key2'))
+
+      // trigger an event that will fail
+      await page.evaluate(() => {
+        void window.analytics.track('test event')
+      })
+
+      const { messageId: messageId2 } = await requestFailure
+      await page.reload()
+
+      // check localstorage for data from both write keys
+      persistedItems = await page.evaluate(getPersistedItems)
+
+      expect(persistedItems).toHaveLength(2)
+      const persistedByWriteKey = persistedItems.reduce((prev, cur) => {
+        prev[cur.writeKey || '_'] = cur
+        return prev
+      }, {} as { [writeKey: string]: PersistedQueueResult })
+      expect(persistedByWriteKey['key1'].messageIds).toStrictEqual([messageId1])
+      expect(persistedByWriteKey['key2'].messageIds).toStrictEqual([messageId2])
+
+      // Now load analytics with original write key (key1) to validate message is sent
+      const [request] = await Promise.all([
+        page.waitForRequest('https://api.segment.io/v1/t'),
+        page.evaluate(() => window.analytics.load('key1')),
+      ])
+
+      expect(request.method()).toBe('POST')
+      expect(request.postDataJSON().messageId).toBe(messageId1)
+      expect(request.postDataJSON().writeKey).toBe('key1')
+
+      // Make sure localStorage only has data for the 2nd writeKey - which wasn't reloaded.
+      persistedItems = await page.evaluate(getPersistedItems)
+
+      expect(persistedItems).toHaveLength(1)
+      expect(persistedItems[0].writeKey).toBe('key2')
+      expect(persistedItems[0].messageIds).toStrictEqual([messageId2])
+    })
   })
 })

packages/browser/package.json

@@ -43,7 +43,7 @@
   "size-limit": [
     {
       "path": "dist/umd/index.js",
-      "limit": "28.0 KB"
+      "limit": "28.1 KB"
     }
   ],
   "dependencies": {

packages/browser/src/browser/__tests__/integration.test.ts

@@ -677,6 +677,7 @@ describe('addDestinationMiddleware', () => {
     const amplitude = new LegacyDestination(
       'amplitude',
       'latest',
+      writeKey,
       {
         apiKey: amplitudeWriteKey,
       },
@@ -820,6 +821,7 @@ describe('deregister', () => {
     const amplitude = new LegacyDestination(
       'amplitude',
       'latest',
+      writeKey,
       {
         apiKey: amplitudeWriteKey,
       },
@@ -1015,6 +1017,7 @@ describe('Options', () => {
       const amplitude = new LegacyDestination(
         'amplitude',
         'latest',
+        writeKey,
         {
           apiKey: amplitudeWriteKey,
         },
@@ -1051,6 +1054,7 @@ describe('Options', () => {
       const amplitude = new LegacyDestination(
         'amplitude',
         'latest',
+        writeKey,
         {
           apiKey: amplitudeWriteKey,
         },
@@ -1087,6 +1091,7 @@ describe('Options', () => {
       const amplitude = new LegacyDestination(
         'amplitude',
         'latest',
+        writeKey,
         {
           apiKey: amplitudeWriteKey,
         },

packages/browser/src/browser/__tests__/integrations.integration.test.ts

@@ -59,6 +59,7 @@ describe('Integrations', () => {
       const amplitude = new LegacyDestination(
         'amplitude',
         'latest',
+        writeKey,
         {
           apiKey: amplitudeWriteKey,
         },
@@ -129,13 +130,20 @@ describe('Integrations', () => {
       const amplitude = new LegacyDestination(
         'Amplitude',
         'latest',
+        writeKey,
         {
           apiKey: amplitudeWriteKey,
         },
         {}
       )
 
-      const ga = new LegacyDestination('Google-Analytics', 'latest', {}, {})
+      const ga = new LegacyDestination(
+        'Google-Analytics',
+        'latest',
+        writeKey,
+        {},
+        {}
+      )
 
       const [analytics] = await AnalyticsBrowser.load({
         writeKey,
@@ -156,14 +164,27 @@ describe('Integrations', () => {
       const amplitude = new LegacyDestination(
         'Amplitude',
         'latest',
+        writeKey,
         {
           apiKey: amplitudeWriteKey,
         },
         {}
       )
 
-      const ga = new LegacyDestination('Google-Analytics', 'latest', {}, {})
-      const customerIO = new LegacyDestination('Customer.io', 'latest', {}, {})
+      const ga = new LegacyDestination(
+        'Google-Analytics',
+        'latest',
+        writeKey,
+        {},
+        {}
+      )
+      const customerIO = new LegacyDestination(
+        'Customer.io',
+        'latest',
+        writeKey,
+        {},
+        {}
+      )
 
       const [analytics] = await AnalyticsBrowser.load({
         writeKey,

packages/browser/src/browser/__tests__/standalone-analytics.test.ts

@@ -27,7 +27,9 @@ jest.mock('../../core/analytics', () => ({
     register,
     emit: jest.fn(),
     on,
-    queue: new EventQueue(new PersistedPriorityQueue(1, 'event-queue') as any),
+    queue: new EventQueue(
+      new PersistedPriorityQueue(1, 'event-queue', 'foo') as any
+    ),
     options,
   }),
 }))