Increases specificity of localStorage keys to differentiate events by writeKey (#861)

Author: chrisradek

.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)',