Update LocalStorage to clear storage if either SDK key or filter criteria changes

Author: EmilianoSanchez

CHANGES.txt

@@ -1,6 +1,7 @@
 0.13.0 (December XX, 2023)
  - Added support for Flag Sets in "consumer" and "partial consumer" modes (pluggable storage).
- - Updated @splitsoftware/splitio-commons package to version 1.12.0 that includes flag sets support for "consumer" and "partial consumer" modes, and other improvements.
+ - Updated SDK cache for browsers using localStorage, to clear cached feature flag definitions before initiating the synchronization process, if the cache was previously synchronized with a different SDK key (i.e., a different environment) or different Split Filter criteria.
+ - Updated @splitsoftware/splitio-commons package to version 1.12.1 that includes flag sets support for "consumer" and "partial consumer" modes, and other improvements.
  - Bugfixing - Fixed manager methods in consumer modes to return results in a promise when the SDK is not operational (not ready or destroyed).
 
 0.12.0 (November 3, 2023)

package-lock.json

@@ -64,7 +64,7 @@
   "bugs": "https://github.com/splitio/javascript-browser-client/issues",
   "homepage": "https://github.com/splitio/javascript-browser-client#readme",
   "dependencies": {
-    "@splitsoftware/splitio-commons": "1.12.0",
+    "@splitsoftware/splitio-commons": "1.12.1-rc.6",
     "@types/google.analytics": "0.0.40",
     "unfetch": "^4.2.0"
   },

package.json

@@ -1,3 +1,4 @@
+import { getStorageHash } from '@splitsoftware/splitio-commons/src/storages/KeyBuilder';
 import splitChangesMock1 from '../mocks/splitchanges.since.-1.json';
 import splitKillMessage from '../mocks/message.SPLIT_KILL.1457552650000.json';
 import authPushEnabledNicolas from '../mocks/auth.pushEnabled.nicolas@split.io.json';
@@ -46,6 +47,7 @@ export function testSplitKillOnReadyFromCache(fetchMock, assert) {
 
   // prepare localstorage to allow SPLIT_KILL kill locally
   localStorage.clear();
+  localStorage.setItem('pushCornerCase.SPLITIO.hash', getStorageHash(settings));
   localStorage.setItem('pushCornerCase.SPLITIO.splits.till', 25);
   localStorage.setItem('pushCornerCase.SPLITIO.split.whitelist', JSON.stringify({
     'name': 'whitelist',

src/__tests__/browserSuites/push-corner-cases.spec.js

@@ -1,3 +1,4 @@
+import { getStorageHash } from '@splitsoftware/splitio-commons/src/storages/KeyBuilder';
 import { SplitFactory, InLocalStorage } from '../../';
 
 import splitChangesMock1 from '../mocks/splitchanges.since.-1.json';
@@ -82,6 +83,9 @@ const baseConfig = {
   streamingEnabled: false
 };
 
+const expectedHashNullFilter = '9507ef4'; // for SDK key '<fake-token-rfc>' and filter query null
+const expectedHashWithFilter = '6a596ded'; // for SDK key '<fake-token-rfc>' and filter query '&names=p1__split,p2__split'
+
 export default function (fetchMock, assert) {
 
   assert.test(t => { // Testing when we start from scratch
@@ -102,7 +106,7 @@ export default function (fetchMock, assert) {
       ...baseConfig,
       core: {
         ...baseConfig.core,
-        authorizationKey: '<fake-token-rfc2>',
+        authorizationKey: '<fake-token-rfc>',
       },
       storage: InLocalStorage({
         prefix: 'readyFromCache_1'
@@ -134,7 +138,7 @@ export default function (fetchMock, assert) {
 
   });
 
-  assert.test(t => { // Testing when we start with cached data but without lastUpdate item (previous version)
+  assert.test(t => { // Testing when we start with cached data but without lastUpdate item (JS SDK version 10.13.0 and below)
     const testUrls = {
       sdk: 'https://sdk.baseurl/readyFromCacheWithData',
       events: 'https://events.baseurl/readyFromCacheWithData'
@@ -161,6 +165,7 @@ export default function (fetchMock, assert) {
     localStorage.setItem('some_user_item', 'user_item');
     localStorage.setItem('readyFromCache_2.SPLITIO.splits.till', 25);
     localStorage.setItem('readyFromCache_2.SPLITIO.split.always_on', alwaysOnSplitInverted);
+    localStorage.setItem('readyFromCache_2.SPLITIO.hash', expectedHashNullFilter);
 
     const startTime = Date.now();
     const splitio = SplitFactory({
@@ -270,6 +275,7 @@ export default function (fetchMock, assert) {
     localStorage.setItem('readyFromCache_3.SPLITIO.splits.till', 25);
     localStorage.setItem('readyFromCache_3.SPLITIO.splits.lastUpdated', Date.now());
     localStorage.setItem('readyFromCache_3.SPLITIO.split.always_on', alwaysOnSplitInverted);
+    localStorage.setItem('readyFromCache_3.SPLITIO.hash', expectedHashNullFilter);
 
     const startTime = Date.now();
     const splitio = SplitFactory({
@@ -386,6 +392,7 @@ export default function (fetchMock, assert) {
     localStorage.setItem('readyFromCache_4.SPLITIO.splits.till', 25);
     localStorage.setItem('readyFromCache_4.SPLITIO.splits.lastUpdated', Date.now() - DEFAULT_CACHE_EXPIRATION_IN_MILLIS - 1); // -1 to ensure having an expired lastUpdated item
     localStorage.setItem('readyFromCache_4.SPLITIO.split.always_on', alwaysOnSplitInverted);
+    localStorage.setItem('readyFromCache_4.SPLITIO.hash', expectedHashNullFilter);
 
     const startTime = Date.now();
     const splitio = SplitFactory({
@@ -467,13 +474,13 @@ export default function (fetchMock, assert) {
 
   /** Fetch specific splits **/
 
-  assert.test(t => { // Testing when we start with cached data without split filter, and a valid split filter config
+  assert.test(t => { // Testing when we start with cached data but without storage hash (JS SDK <=v10.24.0 and Browser SDK <=v0.12.0), and a valid split filter config
     const testUrls = {
       sdk: 'https://sdk.baseurl/readyFromCache_5',
       events: 'https://events.baseurl/readyFromCache_5'
     };
     localStorage.clear();
-    t.plan(6);
+    t.plan(7);
 
     fetchMock.getOnce(testUrls.sdk + '/splitChanges?since=-1&names=p1__split,p2__split', { status: 200, body: { splits: [splitDeclarations.p1__split, splitDeclarations.p2__split], since: -1, till: 1457552620999 } }, { delay: 10 }); // short delay to let emit SDK_READY_FROM_CACHE
     // fetchMock.getOnce(testUrls.sdk + '/splitChanges?since=1457552620999&names=p1__split', { status: 200, body: { splits: [], since: 1457552620999, till: 1457552620999 } });
@@ -483,6 +490,7 @@ export default function (fetchMock, assert) {
     localStorage.setItem('readyFromCache_5.SPLITIO.splits.till', 25);
     localStorage.setItem('readyFromCache_5.SPLITIO.split.p2__split', JSON.stringify(splitDeclarations.p2__split));
     localStorage.setItem('readyFromCache_5.SPLITIO.split.p3__split', JSON.stringify(splitDeclarations.p3__split));
+    localStorage.setItem('readyFromCache_5.SPLITIO.splits.filterQuery', '&names=p2__split,p3__split'); // Deprecated item, should be cleaned
 
     const splitio = SplitFactory({
       ...baseConfig,
@@ -511,7 +519,8 @@ export default function (fetchMock, assert) {
         t.equal(localStorage.getItem('readyFromCache_5.SPLITIO.splits.till'), '1457552620999', 'splits.till must correspond to the till of the last successfully fetched Splits');
         t.equal(localStorage.getItem('readyFromCache_5.SPLITIO.split.p1__split'), JSON.stringify(splitDeclarations.p1__split), 'split declarations must be cached');
         t.equal(localStorage.getItem('readyFromCache_5.SPLITIO.split.p2__split'), JSON.stringify(splitDeclarations.p2__split), 'split declarations must be cached');
-        t.equal(localStorage.getItem('readyFromCache_5.SPLITIO.splits.filterQuery'), '&names=p1__split,p2__split', 'splits.filterQuery must correspond to the split filter query');
+        t.equal(localStorage.getItem('readyFromCache_5.SPLITIO.hash'), expectedHashWithFilter, 'Storage hash must correspond to the one for the SDK key and feature flag filter query');
+        t.equal(localStorage.getItem('readyFromCache_5.SPLITIO.splits.filterQuery'), null);
         t.end();
       });
     });
@@ -554,13 +563,13 @@ export default function (fetchMock, assert) {
         t.equal(localStorage.getItem('readyFromCache_5B.SPLITIO.splits.till'), '1457552620999', 'splits.till must correspond to the till of the last successfully fetched Splits');
         t.equal(localStorage.getItem('readyFromCache_5B.SPLITIO.split.p1__split'), JSON.stringify(splitDeclarations.p1__split), 'split declarations must be cached');
         t.equal(localStorage.getItem('readyFromCache_5B.SPLITIO.split.p2__split'), JSON.stringify(splitDeclarations.p2__split), 'split declarations must be cached');
-        t.equal(localStorage.getItem('readyFromCache_5B.SPLITIO.splits.filterQuery'), '&names=p1__split,p2__split', 'splits.filterQuery must correspond to the split filter query');
+        t.equal(localStorage.getItem('readyFromCache_5B.SPLITIO.hash'), expectedHashWithFilter, 'Storage hash must correspond to the split filter query and SDK key');
         t.end();
       });
     });
   });
 
-  assert.test(t => { // Testing when we start with cached data with split filter, and the same split filter config
+  assert.test(t => { // Testing when we start with cached data with split filter, and the same split filter is provided in the config
     const testUrls = {
       sdk: 'https://sdk.baseurl/readyFromCache_6',
       events: 'https://events.baseurl/readyFromCache_6'
@@ -571,11 +580,13 @@ export default function (fetchMock, assert) {
     fetchMock.getOnce(testUrls.sdk + '/splitChanges?since=25&names=p2__split&prefixes=p1', { status: 200, body: { splits: [splitDeclarations.p1__split, splitDeclarations.p2__split], since: 25, till: 1457552620999 } }, { delay: 10 }); // short delay to let emit SDK_READY_FROM_CACHE
     fetchMock.getOnce(testUrls.sdk + '/mySegments/nicolas%40split.io', { status: 200, body: { mySegments: [] } });
 
+    const expectedHash = getStorageHash({ ...baseConfig, sync: { __splitFiltersValidation: { queryString: '&names=p2__split&prefixes=p1' } } });
     localStorage.setItem('some_user_item', 'user_item');
     localStorage.setItem('readyFromCache_6.SPLITIO.splits.till', 25);
     localStorage.setItem('readyFromCache_6.SPLITIO.split.p1__split', JSON.stringify(splitDeclarations.p1__split));
     localStorage.setItem('readyFromCache_6.SPLITIO.split.p2__split', JSON.stringify(splitDeclarations.p2__split));
     localStorage.setItem('readyFromCache_6.SPLITIO.splits.filterQuery', '&names=p2__split&prefixes=p1');
+    localStorage.setItem('readyFromCache_6.SPLITIO.hash', expectedHash);
 
     const splitio = SplitFactory({
       ...baseConfig,
@@ -603,13 +614,13 @@ export default function (fetchMock, assert) {
         t.equal(localStorage.getItem('readyFromCache_6.SPLITIO.splits.till'), '1457552620999', 'splits.till must correspond to the till of the last successfully fetched Splits');
         t.equal(localStorage.getItem('readyFromCache_6.SPLITIO.split.p1__split'), JSON.stringify(splitDeclarations.p1__split), 'split declarations must be cached');
         t.equal(localStorage.getItem('readyFromCache_6.SPLITIO.split.p2__split'), JSON.stringify(splitDeclarations.p2__split), 'split declarations must be cached');
-        t.equal(localStorage.getItem('readyFromCache_6.SPLITIO.splits.filterQuery'), '&names=p2__split&prefixes=p1', 'splits.filterQuery must correspond to the split filter query');
+        t.equal(localStorage.getItem('readyFromCache_6.SPLITIO.hash'), expectedHash, 'Storage hash must correspond to the split filter query and SDK key');
         t.end();
       });
     });
   });
 
-  assert.test(t => { // Testing when we start with cached data with split filter but expired, and the same split filter config
+  assert.test(t => { // Testing when we start with cached data with split filter but expired, and the same split filter is provided in the config
     const testUrls = {
       sdk: 'https://sdk.baseurl/readyFromCache_7',
       events: 'https://events.baseurl/readyFromCache_7'
@@ -620,11 +631,12 @@ export default function (fetchMock, assert) {
     fetchMock.getOnce(testUrls.sdk + '/splitChanges?since=-1&prefixes=p1,p2', { status: 200, body: { splits: [splitDeclarations.p1__split, splitDeclarations.p2__split], since: -1, till: 1457552620999 } }, { delay: 10 }); // short delay to let emit SDK_READY_FROM_CACHE
     fetchMock.getOnce(testUrls.sdk + '/mySegments/nicolas%40split.io', { status: 200, body: { mySegments: [] } });
 
+    const expectedHash = getStorageHash({ ...baseConfig, sync: { __splitFiltersValidation: { queryString: '&prefixes=p1,p2' } } });
     localStorage.setItem('some_user_item', 'user_item');
     localStorage.setItem('readyFromCache_7.SPLITIO.splits.till', 25);
     localStorage.setItem('readyFromCache_7.SPLITIO.split.p1__split', JSON.stringify(splitDeclarations.p1__split));
     localStorage.setItem('readyFromCache_7.SPLITIO.split.p2__split', JSON.stringify(splitDeclarations.p2__split));
-    localStorage.setItem('readyFromCache_7.SPLITIO.splits.filterQuery', '&prefixes=p1,p2');
+    localStorage.setItem('readyFromCache_7.SPLITIO.hash', expectedHash);
     localStorage.setItem('readyFromCache_7.SPLITIO.splits.lastUpdated', Date.now() - DEFAULT_CACHE_EXPIRATION_IN_MILLIS - 1); // -1 to ensure having an expired lastUpdated item
 
     const splitio = SplitFactory({
@@ -654,7 +666,7 @@ export default function (fetchMock, assert) {
         t.equal(localStorage.getItem('readyFromCache_7.SPLITIO.splits.till'), '1457552620999', 'splits.till must correspond to the till of the last successfully fetched Splits');
         t.equal(localStorage.getItem('readyFromCache_7.SPLITIO.split.p1__split'), JSON.stringify(splitDeclarations.p1__split), 'split declarations must be cached');
         t.equal(localStorage.getItem('readyFromCache_7.SPLITIO.split.p2__split'), JSON.stringify(splitDeclarations.p2__split), 'split declarations must be cached');
-        t.equal(localStorage.getItem('readyFromCache_7.SPLITIO.splits.filterQuery'), '&prefixes=p1,p2', 'splits.filterQuery must correspond to the split filter query');
+        t.equal(localStorage.getItem('readyFromCache_7.SPLITIO.hash'), expectedHash, 'Storage hash must correspond to the split filter query and SDK key');
         t.end();
       });
     });
@@ -689,7 +701,7 @@ export default function (fetchMock, assert) {
         localStorage.setItem('readyFromCache_8.SPLITIO.split.p1__split', JSON.stringify(splitDeclarations.p1__split));
         localStorage.setItem('readyFromCache_8.SPLITIO.split.p2__split', JSON.stringify(splitDeclarations.p2__split));
         localStorage.setItem('readyFromCache_8.SPLITIO.split.deleted__split', '{ "name": "deleted_split" }');
-        localStorage.setItem('readyFromCache_8.SPLITIO.splits.filterQuery', '&names=p2__split&prefixes=p1');
+        localStorage.setItem('readyFromCache_8.SPLITIO.hash', expectedHashWithFilter);
 
         const splitio = SplitFactory({
           ...baseConfig,
@@ -717,7 +729,7 @@ export default function (fetchMock, assert) {
             t.equal(localStorage.getItem('readyFromCache_8.SPLITIO.split.p1__split'), JSON.stringify(splitDeclarations.p1__split), 'split declarations must be cached');
             t.equal(localStorage.getItem('readyFromCache_8.SPLITIO.split.p2__split'), JSON.stringify(splitDeclarations.p2__split), 'split declarations must be cached');
             t.equal(localStorage.getItem('readyFromCache_8.SPLITIO.split.p3__split'), JSON.stringify(splitDeclarations.p3__split), 'split declarations must be cached');
-            t.equal(localStorage.getItem('readyFromCache_8.SPLITIO.splits.filterQuery'), null, 'splits.filterQuery must correspond to the split filter query');
+            t.equal(localStorage.getItem('readyFromCache_8.SPLITIO.hash'), expectedHashNullFilter, 'Storage hash must correspond to the split filter query and SDK key');
             t.end();
           });
         });
@@ -726,7 +738,7 @@ export default function (fetchMock, assert) {
     });
   });
 
-  assert.test(t => { // Testing when we start with cached data with split filter, and a new valid split filter config
+  assert.test(t => { // Testing when we start with cached data with split filter, and a new split filter is provided in the config
     const testUrls = {
       sdk: 'https://sdk.baseurl/readyFromCache_9',
       events: 'https://events.baseurl/readyFromCache_9'
@@ -741,7 +753,7 @@ export default function (fetchMock, assert) {
     localStorage.setItem('readyFromCache_9.SPLITIO.splits.till', 25);
     localStorage.setItem('readyFromCache_9.SPLITIO.split.p1__split', JSON.stringify(splitDeclarations.p1__split));
     localStorage.setItem('readyFromCache_9.SPLITIO.split.p2__split', JSON.stringify(splitDeclarations.p2__split));
-    localStorage.setItem('readyFromCache_9.SPLITIO.splits.filterQuery', '&names=p2__split&prefixes=p1');
+    localStorage.setItem('readyFromCache_9.SPLITIO.hash', getStorageHash({ ...baseConfig, sync: { __splitFiltersValidation: { queryString: '&names=p2__split&prefixes=p1' } } }));
 
     const splitio = SplitFactory({
       ...baseConfig,
@@ -770,7 +782,7 @@ export default function (fetchMock, assert) {
         t.equal(localStorage.getItem('readyFromCache_9.SPLITIO.splits.till'), '1457552620999', 'splits.till must correspond to the till of the last successfully fetched Splits');
         t.equal(localStorage.getItem('readyFromCache_9.SPLITIO.split.p2__split'), JSON.stringify(splitDeclarations.p2__split), 'split declarations must be cached');
         t.equal(localStorage.getItem('readyFromCache_9.SPLITIO.split.p3__split'), JSON.stringify(splitDeclarations.p3__split), 'split declarations must be cached');
-        t.equal(localStorage.getItem('readyFromCache_9.SPLITIO.splits.filterQuery'), '&names=no%20exist%20trim,no_exist,p3__split&prefixes=no%20exist%20trim,p2', 'splits.filterQuery must correspond to the split filter query');
+        t.equal(localStorage.getItem('readyFromCache_9.SPLITIO.hash'), getStorageHash({ ...baseConfig, sync: { __splitFiltersValidation: { queryString: '&names=no%20exist%20trim,no_exist,p3__split&prefixes=no%20exist%20trim,p2' } } }), 'Storage hash must correspond to the split filter query and SDK key');
         t.end();
       });
     });

src/__tests__/browserSuites/ready-from-cache.spec.js

@@ -1,4 +1,5 @@
 // Here we are testing exceptions and the handler should be ours, we need to avoid tape-catch
+import { getStorageHash } from '@splitsoftware/splitio-commons/src/storages/KeyBuilder';
 import tape from 'tape';
 import includes from 'lodash/includes';
 import fetchMock from '../testUtils/fetchMock';
@@ -20,6 +21,7 @@ const settings = settingsFactory({
 // prepare localstorage to emit SDK_READY_FROM_CACHE
 localStorage.clear();
 localStorage.setItem('SPLITIO.splits.till', 25);
+localStorage.setItem('SPLITIO.hash', getStorageHash({ core: { authorizationKey: '<fake-token-1>' }, sync: { __splitFiltersValidation: { queryString: null } } }));
 
 fetchMock.get(url(settings, '/splitChanges?since=25'), function () {
   return new Promise((res) => { setTimeout(() => res({ status: 200, body: splitChangesMock1 }), 1000); });