@newrelic/browser-agent 0.1.231 → 1.232.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newrelic/browser-agent",
-  "version": "0.1.231",
+  "version": "1.232.1",
   "private": false,
   "author": "New Relic Browser Agent Team <browser-agent@newrelic.com>",
   "description": "Tests for the New Relic JavaScript agent",
@@ -108,6 +108,7 @@
     "cdn:build:current": "npm run cdn:fresh-build && PUBLISH=CURRENT npm run cdn:webpack && npm run cdn:cleanup",
     "cdn:build:nr": "npm run cdn:fresh-build && PUBLISH=PROD SOURCEMAPS=false npm run cdn:webpack && npm run cdn:cleanup",
     "cdn:build:pr": "npm run cdn:fresh-build && PUBLISH=PR npm run cdn:webpack && npm run cdn:cleanup",
+    "cdn:build:experiment": "npm run cdn:fresh-build && PUBLISH=EXPERIMENT npm run cdn:webpack && npm run cdn:cleanup",
     "cdn:cleanup": "node ./tools/scripts/post-build-cleanup",
     "cdn:clone": "node ./tools/scripts/clone",
     "cdn:fresh-build": "rm -rf ./build",
@@ -115,17 +116,16 @@
     "cdn:watch:extension": "jung -r ./src -F '.*\\.test\\.js' --run -- npm run cdn:build:extension",
     "cdn:webpack": "npx webpack --progress --config ./webpack.config.js",
     "packages:bundle": "webpack -c tools/jil/webpack.modular.js",
-    "test-server": "node ./tools/jil/bin/server",
-    "sauce:connect": "node ./tools/wdio/bin/sauce",
-    "sauce:get-browsers": "node ./tools/jil/util/sauce-browsers && node ./tools/wdio/util/sauce-browsers",
+    "test-server": "node ./tools/wdio/bin/server",
+    "sauce:connect": "node ./tools/saucelabs/bin.mjs",
+    "sauce:get-browsers": "node ./tools/browsers-lists/sauce-browsers.mjs",
     "tools:test-builds": "npm --prefix ./tools/test-builds run build-all",
     "third-party-updates": "oss third-party manifest --includeOptDeps && oss third-party notices --includeOptDeps",
     "prepare": "husky install",
     "npm:build:esm": "npx babel --env-name npm-esm --out-dir dist/esm --out-file-extension .js ./src",
     "npm:build:cjs": "npx babel --env-name npm-cjs --out-dir dist/cjs --out-file-extension .js ./src",
     "npm:build:types": "npx tsc -b",
-    "npm:pack": "mkdir -p temp && export PKG_NAME=$(npm pack --pack-destination temp) && echo ./temp/$PKG_NAME",
-    "sync:version": "node tools/scripts/sync-version.js"
+    "npm:pack": "mkdir -p temp && export PKG_NAME=$(npm pack --pack-destination temp) && echo ./temp/$PKG_NAME"
   },
   "config": {
     "unsafe-perm": true
@@ -136,7 +136,6 @@
   },
   "dependencies": {
     "core-js": "^3.26.0",
-    "lodash._slice": "^2.4.1",
     "web-vitals": "^3.1.0"
   },
   "devDependencies": {
@@ -146,6 +145,7 @@
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-syntax-import-assertions": "^7.20.0",
     "@babel/preset-env": "^7.20.2",
+    "@babel/register": "^7.21.0",
     "@faker-js/faker": "^7.6.0",
     "@fastify/cors": "^8.2.0",
     "@fastify/multipart": "^7.3.0",
@@ -183,6 +183,7 @@
     "fs-extra": "^11.1.0",
     "function-bind": "^1.1.1",
     "glob": "^7.0.5",
+    "gzip-size": "^7.0.0",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.0",
     "jest": "^28.1.1",
@@ -223,4 +224,4 @@
     "README.md",
     "types.ts"
   ]
-}
+}

package/src/common/config/state/configurable.js

@@ -3,24 +3,31 @@ import { warn } from '../../util/console'
 
 export class Configurable {
   constructor (obj, model) {
-    try {
-      if (!obj || typeof obj !== 'object') return warn('New setting a Configurable requires an object as input')
-      if (!model || typeof model !== 'object') return warn('Setting a Configurable requires a model to set its initial properties')
-      Object.assign(this, model)
-      Object.entries(obj).forEach(([key, value]) => {
-        const frozenAttrs = getFrozenAttributes(key)
-        if (frozenAttrs.length && value && typeof value === 'object') {
-          frozenAttrs.forEach(attr => {
-            if (attr in value) {
-              warn(`"${attr}" is a protected attribute and can not be changed in feature ${key}.  It will have no effect.`)
-              delete value[attr]
-            }
-          })
-        }
-        this[key] = value
-      })
-    } catch (err) {
-      warn('An error occured while setting a Configurable', err)
-    }
+    Object.assign(this, setValues(obj, model))
+  }
+}
+
+function setValues (obj, model) {
+  const state = {}
+  try {
+    if (!obj || typeof obj !== 'object') return warn('New setting a Configurable requires an object as input')
+    if (!model || typeof model !== 'object') return warn('Setting a Configurable requires a model to set its initial properties')
+    Object.assign(state, model)
+    Object.entries(obj).forEach(([key, value]) => {
+      if (!Object.keys(model).includes(key)) return
+      const frozenAttrs = getFrozenAttributes(key)
+      if (frozenAttrs.length && value && typeof value === 'object') {
+        frozenAttrs.forEach(attr => {
+          if (attr in value) {
+            warn(`"${attr}" is a protected attribute and can not be changed in feature ${key}.  It will have no effect.`)
+            delete value[attr]
+          }
+        })
+      }
+      state[key] = value
+    })
+    return state
+  } catch (err) {
+    warn('An error occured while setting a Configurable', err)
   }
 }

package/src/common/config/state/init.js

@@ -1,4 +1,6 @@
 
+import { DEFAULT_EXPIRES_MS, DEFAULT_INACTIVE_MS } from '../../session/constants'
+import { globalScope } from '../../util/global-scope'
 import { gosNREUMInitializedAgents } from '../../window/nreum'
 import { Configurable } from './configurable'
 
@@ -13,6 +15,11 @@ const model = {
     cors_use_tracecontext_headers: undefined,
     allowed_origins: undefined
   },
+  session: {
+    domain: undefined, // used by first party cookies to set the top-level domain
+    expiresMs: DEFAULT_EXPIRES_MS,
+    inactiveMs: DEFAULT_INACTIVE_MS
+  },
   ssl: undefined,
   obfuscate: undefined,
   jserrors: { enabled: true, harvestTimeSeconds: 10 },

package/src/common/config/state/runtime.js

@@ -1,35 +1,30 @@
 import * as userAgent from '../../util/user-agent'
 import { Configurable } from './configurable'
 import { gosNREUMInitializedAgents } from '../../window/nreum'
-import { getCurrentSessionIdOrMakeNew } from '../../window/session-storage'
-import { getConfigurationValue } from '../config'
 import { globalScope } from '../../util/global-scope'
 import { BUILD_ENV, DIST_METHOD, VERSION } from '../../constants/env'
 
-const model = agentId => {
-  return {
-    buildEnv: BUILD_ENV,
-    bytesSent: {},
-    customTransaction: undefined,
-    disabled: false,
-    distMethod: DIST_METHOD,
-    isolatedBacklog: false,
-    loaderType: undefined,
-    maxBytes: 30000,
-    // The "timeOrigin" property is the new standard timestamp property shared across main frame and workers, but is not supported in some early Safari browsers (safari<15) + IE
-    // ingest expects an integer value, and timeOrigin can return a float.
-    offset: Math.floor(globalScope?.performance?.timeOrigin || globalScope?.performance?.timing?.navigationStart || Date.now()),
-    onerror: undefined,
-    origin: '' + globalScope.location,
-    ptid: undefined,
-    releaseIds: {},
-    sessionId: getConfigurationValue(agentId, 'privacy.cookies_enabled') == true
-      ? getCurrentSessionIdOrMakeNew()
-      : null, // if cookies (now session tracking) is turned off or can't get session ID, this is null
-    xhrWrappable: typeof globalScope.XMLHttpRequest?.prototype?.addEventListener === 'function',
-    userAgent,
-    version: VERSION
-  }
+const model = {
+  buildEnv: BUILD_ENV,
+  bytesSent: {}, // Used for SM to capture body bytes sent per endpoint
+  queryBytesSent: {}, // Used for SM to capture query parameter bytes sent per endpoint
+  customTransaction: undefined,
+  disabled: false,
+  distMethod: DIST_METHOD,
+  isolatedBacklog: false,
+  loaderType: undefined,
+  maxBytes: 30000,
+  // The "timeOrigin" property is the new standard timestamp property shared across main frame and workers, but is not supported in some early Safari browsers (safari<15) + IE
+  // ingest expects an integer value, and timeOrigin can return a float.
+  offset: Math.floor(globalScope?.performance?.timeOrigin || globalScope?.performance?.timing?.navigationStart || Date.now()),
+  onerror: undefined,
+  origin: '' + globalScope.location,
+  ptid: undefined,
+  releaseIds: {},
+  session: undefined,
+  xhrWrappable: typeof globalScope.XMLHttpRequest?.prototype?.addEventListener === 'function',
+  userAgent,
+  version: VERSION
 }
 
 const _cache = {}
@@ -42,6 +37,6 @@ export function getRuntime (id) {
 
 export function setRuntime (id, obj) {
   if (!id) throw new Error('All runtime objects require an agent identifier!')
-  _cache[id] = new Configurable(obj, model(id))
+  _cache[id] = new Configurable(obj, model)
   gosNREUMInitializedAgents(id, _cache[id], 'runtime')
 }

package/src/common/context/shared-context.js

@@ -2,7 +2,8 @@
 import { warn } from '../util/console'
 
 const model = {
-  agentIdentifier: ''
+  agentIdentifier: '',
+  ee: undefined
 }
 
 export class SharedContext {

package/src/common/event-emitter/contextual-ee.test.js

@@ -276,7 +276,7 @@ describe('event-emitter emit', () => {
 
     expect(mockScopeListener).toHaveBeenCalledTimes(1)
     expect(mockListener).not.toHaveBeenCalled()
-    expect(scopeEE.backlog['feature']).toEqual(expect.arrayContaining([
+    expect(scopeEE.backlog.feature).toEqual(expect.arrayContaining([
       expect.arrayContaining([
         scopeEE,
         eventType,
@@ -284,7 +284,7 @@ describe('event-emitter emit', () => {
         {}
       ])
     ]))
-    expect(ee.backlog['feature']).toEqual(scopeEE.backlog['feature'])
+    expect(ee.backlog.feature).toEqual(scopeEE.backlog.feature)
   })
 })
 

package/src/common/event-emitter/register-handler.test.js

@@ -19,7 +19,7 @@ test('should default group to "feature"', async () => {
 
   registerHandler(eventType, eventHandler)
 
-  expect(registerHandler.handlers['feature']).toEqual(expect.objectContaining({
+  expect(registerHandler.handlers.feature).toEqual(expect.objectContaining({
     [eventType]: [expect.arrayContaining([
       handleEE, eventHandler
     ])]

package/src/common/event-listener/event-listener-opts.js

@@ -32,10 +32,10 @@ export function eventListenerOpts (useCapture, abortSignal) {
 }
 
 /** Do not use this within the worker context. */
-export function windowAddEventListener (event, listener, capture = false) {
-  window.addEventListener(event, listener, eventListenerOpts(capture))
+export function windowAddEventListener (event, listener, capture = false, abortSignal) {
+  window.addEventListener(event, listener, eventListenerOpts(capture, abortSignal))
 }
 /** Do not use this within the worker context. */
-export function documentAddEventListener (event, listener, capture = false) {
-  document.addEventListener(event, listener, eventListenerOpts(capture))
+export function documentAddEventListener (event, listener, capture = false, abortSignal) {
+  document.addEventListener(event, listener, eventListenerOpts(capture, abortSignal))
 }

package/src/common/harvest/harvest-scheduler.js

@@ -23,13 +23,18 @@ export class HarvestScheduler extends SharedContext {
 
     this.harvest = new Harvest(this.sharedContext)
 
-    subscribeToEOL(() => {
-      if (this.aborted) return
+    // unload if EOL mechanism fires
+    subscribeToEOL(this.unload.bind(this), getConfigurationValue(this.sharedContext.agentIdentifier, 'allow_bfcache')) // TO DO: remove feature flag after rls stable
 
-      // If opts.onUnload is defined, these are special actions to execute before attempting to send the final payload.
-      if (this.opts.onUnload) this.opts.onUnload()
-      this.runHarvest({ unload: true })
-    }, getConfigurationValue(this.sharedContext.agentIdentifier, 'allow_bfcache')) // TO DO: remove feature flag after rls stable
+    // unload if session resets
+    this.sharedContext?.ee.on('session-reset', this.unload.bind(this))
+  }
+
+  unload () {
+    if (this.aborted) return
+    // If opts.onUnload is defined, these are special actions to execute before attempting to send the final payload.
+    if (this.opts.onUnload) this.opts.onUnload()
+    this.runHarvest({ unload: true })
   }
 
   startTimer (interval, initialDelay) {
@@ -76,8 +81,7 @@ export class HarvestScheduler extends SharedContext {
         }
       }
     } else {
-      const runAfterSending = opts?.unload ? undefined : onHarvestFinished // don't bother running onFinish handler if this is the final harvest
-      this.harvest.sendX(this.endpoint, opts, runAfterSending)
+      this.harvest.sendX(this.endpoint, opts, onHarvestFinished)
     }
 
     if (this.started) {

package/src/common/harvest/harvest.js

@@ -118,6 +118,8 @@ export class Harvest extends SharedContext {
 
     // Get bytes harvested per endpoint as a supportability metric. See metrics aggregator (on unload).
     agentRuntime.bytesSent[endpoint] = (agentRuntime.bytesSent[endpoint] || 0) + body?.length || 0
+    // Get query bytes harvested per endpoint as a supportability metric. See metrics aggregator (on unload).
+    agentRuntime.queryBytesSent[endpoint] = (agentRuntime.queryBytesSent[endpoint] || 0) + fullUrl.split('?').slice(-1)[0]?.length || 0
 
     /* Since workers don't support sendBeacon right now, or Image(), they can only use XHR method.
         Because they still do permit synch XHR, the idea is that at final harvest time (worker is closing),
@@ -167,7 +169,7 @@ export class Harvest extends SharedContext {
       encodeParam('ct', runtime.customTransaction),
       '&rst=' + now(),
       '&ck=0', // ck param DEPRECATED - still expected by backend
-      '&s=' + (runtime.sessionId || '0'), // the 0 id encaps all untrackable and default traffic
+      '&s=' + (runtime.session?.value || '0'), // the 0 id encaps all untrackable and default traffic
       encodeParam('ref', ref),
       encodeParam('ptid', (runtime.ptid ? '' + runtime.ptid : ''))
     ].join(''))

package/src/common/session/constants.js

@@ -0,0 +1,3 @@
+export const PREFIX = 'NRBA'
+export const DEFAULT_EXPIRES_MS = 14400000
+export const DEFAULT_INACTIVE_MS = 1800000

package/src/common/session/session-entity.js

@@ -0,0 +1,271 @@
+import { generateRandomHexString } from '../ids/unique-id'
+import { warn } from '../util/console'
+import { stringify } from '../util/stringify'
+import { ee } from '../event-emitter/contextual-ee'
+import { Timer } from '../timer/timer'
+import { isBrowserScope } from '../util/global-scope'
+import { DEFAULT_EXPIRES_MS, DEFAULT_INACTIVE_MS, PREFIX } from './constants'
+import { LocalMemory } from '../storage/local-memory'
+import { InteractionTimer } from '../timer/interaction-timer'
+import { wrapEvents } from '../wrap'
+import { Configurable } from '../config/state/configurable'
+import { handle } from '../event-emitter/handle'
+import { SUPPORTABILITY_METRIC_CHANNEL } from '../../features/metrics/constants'
+import { FEATURE_NAMES } from '../../loaders/features/features'
+
+const model = {
+  value: '',
+  inactiveAt: 0,
+  expiresAt: 0,
+  updatedAt: Date.now(),
+  sessionReplayActive: false,
+  sessionTraceActive: false,
+  custom: {}
+}
+
+export class SessionEntity {
+  /**
+   * Create a self-managing Session Entity. This entity is scoped to the agent identifier which triggered it, allowing for multiple simultaneous session objects to exist.
+   * There is one "namespace" an agent can store data in LS -- NRBA_{key}. If there are two agents on one page, and they both use the same key, they could overwrite each other since they would both use the same namespace in LS by default.
+   * The value can be overridden in the constructor, but will default to a unique 16 character hex string
+   * expiresMs and inactiveMs are used to "expire" the session, but can be overridden in the constructor. Pass 0 to disable expiration timers.
+   */
+  constructor (opts) {
+    this.setup(opts)
+  }
+
+  setup ({ agentIdentifier, key, value = generateRandomHexString(16), expiresMs = DEFAULT_EXPIRES_MS, inactiveMs = DEFAULT_INACTIVE_MS, storageAPI = new LocalMemory() }) {
+    if (!agentIdentifier || !key) throw new Error('Missing Required Fields')
+    if (!isBrowserScope) this.storage = new LocalMemory()
+    else this.storage = storageAPI
+
+    this.sync(model)
+
+    this.agentIdentifier = agentIdentifier
+
+    // key is intended to act as the k=v pair
+    this.key = key
+    // value is intended to act as the primary value of the k=v pair
+    this.value = value
+
+    this.expiresMs = expiresMs
+    this.inactiveMs = inactiveMs
+
+    this.ee = ee.get(agentIdentifier)
+
+    wrapEvents(this.ee)
+
+    // the first time the session entity class is instantiated, we check the storage API for an existing
+    // object. If it exists, the values inside the object are used to inform the timers that run locally.
+    // if the initial read is empty, it allows us to set a "fresh" "new" session immediately.
+    // the local timers are used after the session is running to "expire" the session, allowing for pausing timers etc.
+    // the timestamps stored in the storage API can be checked at initial run, and when the page is restored, otherwise we lean
+    // on the local timers to expire the session
+    const initialRead = this.read()
+
+    // the set-up of the timer used to expire the session "naturally" at a certain time
+    // this gets ignored if the value is falsy, allowing for session entities that do not expire
+    if (expiresMs) {
+      this.expiresAt = initialRead?.expiresAt || this.getFutureTimestamp(expiresMs)
+      this.expiresTimer = new Timer({
+        // When the inactive timer ends, collect a SM and reset the session
+        onEnd: () => {
+          this.collectSM('expired', this)
+          this.collectSM('duration', this)
+          this.reset()
+        }
+      }, this.expiresAt - Date.now())
+    } else {
+      this.expiresAt = Infinity
+    }
+
+    // the set-up of the timer used to expire the session due to "inactivity" at a certain time
+    // this gets ignored if the value is falsy, allowing for session entities that do not expire
+    // this gets "refreshed" when "activity" is observed
+    if (inactiveMs) {
+      this.inactiveAt = initialRead?.inactiveAt || this.getFutureTimestamp(inactiveMs)
+      this.inactiveTimer = new InteractionTimer({
+        // When the inactive timer ends, collect a SM and reset the session
+        onEnd: () => {
+          this.collectSM('inactive', this)
+          this.collectSM('duration', this)
+          this.reset()
+        },
+        // When the inactive timer refreshes, it will update the storage values with an update timestamp
+        onRefresh: this.refresh.bind(this),
+        // When the inactive timer pauses, update the storage values with an update timestamp
+        onPause: () => this.write(new Configurable(this.read(), model)),
+        ee: this.ee,
+        refreshEvents: ['click', 'keydown', 'scroll']
+      }, this.inactiveAt - Date.now())
+    } else {
+      this.inactiveAt = Infinity
+    }
+
+    // The fact that the session is "new" or pre-existing is used in some places in the agent.  Session Replay and Trace
+    // can use this info to inform whether to trust a new sampling decision vs continue a previous tracking effort.
+    this.isNew = !Object.keys(initialRead).length
+    // if its a "new" session, we write to storage API with the default values.  These values may change over the lifespan of the agent run.
+    // we can use configurable here to help us know and manage what values are being used. -- see "model" above
+    if (this.isNew) this.write(new Configurable(this, model), true)
+    else this.sync(initialRead)
+
+    this.initialized = true
+  }
+
+  // This is the actual key appended to the storage API
+  get lookupKey () {
+    return `${PREFIX}_${this.key}`
+  }
+
+  sync (data) {
+    Object.assign(this, data)
+  }
+
+  /**
+   * Fetch the stored values from the storage API tied to this entity
+   * @returns {Object}
+   */
+  read () {
+    try {
+      const val = this.storage.get(this.lookupKey)
+      if (!val) return {}
+      // TODO - decompression would need to happen here if we decide to do it
+      const obj = typeof val === 'string' ? JSON.parse(val) : val
+      if (this.isInvalid(obj)) return {}
+      // if the session expires, collect a SM count before resetting
+      if (this.isExpired(obj.expiresAt)) {
+        this.collectSM('expired', this)
+        this.collectSM('duration', obj, true)
+        return this.reset()
+      }
+      // if "inactive" timer is expired at "read" time -- esp. initial read -- reset
+      // collect a SM count before resetting
+      if (this.isExpired(obj.inactiveAt)) {
+        this.collectSM('inactive', this)
+        this.collectSM('duration', obj, true)
+        return this.reset()
+      }
+
+      return obj
+    } catch (e) {
+      warn('Failed to read from storage API', e)
+      // storage is inaccessible
+      return {}
+    }
+  }
+
+  /**
+   * Store data to the storage API tied to this entity
+   * To preseve existing attributes, the output of ...session.read()
+   * should be appended to the data argument
+   * @param {Object} data
+   * @returns {Object}
+   */
+  write (data) {
+    try {
+      if (!data || typeof data !== 'object') return
+      // everytime we update, we can update a timestamp for sanity
+      data.updatedAt = Date.now()
+      this.sync(data)
+      // TODO - compression would need happen here if we decide to do it
+      this.storage.set(this.lookupKey, stringify(data))
+      return data
+    } catch (e) {
+      // storage is inaccessible
+      warn('Failed to write to the storage API', e)
+      return null
+    }
+  }
+
+  reset () {
+    // this method should set off a chain of actions across the features by emitting 'new-session'
+    // * send off pending payloads
+    // * stop recording (stn and sr)...
+    // * delete the session and start over
+    try {
+      if (this.initialized) this.ee.emit('session-reset')
+
+      this.storage.remove(this.lookupKey)
+      this.inactiveTimer?.abort?.()
+      this.expiresTimer?.clear?.()
+      delete this.custom
+      delete this.value
+
+      this.setup({
+        agentIdentifier: this.agentIdentifier,
+        key: this.key,
+        storageAPI: this.storage,
+        expiresMs: this.expiresMs,
+        inactiveMs: this.inactiveMs
+      })
+      return this.read()
+    } catch (e) {
+      return {}
+    }
+  }
+
+  /**
+   * Refresh the inactivity timer data
+   */
+  refresh () {
+    // read here & invalidate
+    const existingData = this.read()
+    this.inactiveAt = this.getFutureTimestamp(this.inactiveMs)
+    this.write({ ...existingData, inactiveAt: this.inactiveAt })
+  }
+
+  /**
+   * @param {number} timestamp
+   * @returns {boolean}
+   */
+  isExpired (timestamp) {
+    return Date.now() > timestamp
+  }
+
+  /**
+   * @param {Object} data
+   * @returns {boolean}
+   */
+  isInvalid (data) {
+    const requiredKeys = ['value', 'expiresAt', 'inactiveAt']
+    return !requiredKeys.every(x => Object.keys(data).includes(x))
+  }
+
+  collectSM (type, data, useUpdatedAt) {
+    let value, tag
+    if (type === 'duration') {
+      const startingTimestamp = data.expiresAt - data.expiresMs
+      const endingTimestamp = useUpdatedAt ? data.updatedAt : Date.now()
+      value = endingTimestamp - startingTimestamp
+      tag = 'Session/Duration/Ms'
+    }
+    if (type === 'expired') tag = 'Session/Expired/Seen'
+    if (type === 'inactive') tag = 'Session/Inactive/Seen'
+
+    if (tag) handle(SUPPORTABILITY_METRIC_CHANNEL, [tag, value], undefined, FEATURE_NAMES.metrics, this.ee)
+  }
+
+  /**
+   * @param {number} futureMs - The number of ms to use to generate a future timestamp
+   * @returns {number}
+   */
+  getFutureTimestamp (futureMs) {
+    return Date.now() + futureMs
+  }
+
+  syncCustomAttribute (key, value) {
+    if (!isBrowserScope) return
+    if (value === null) {
+      const curr = this.read()
+      if (curr.custom) {
+        delete curr.custom[key]
+        this.write({ ...curr })
+      }
+    } else {
+      const curr = this.read()
+      this.custom = { ...(curr?.custom || {}), [key]: value }
+      this.write({ ...curr, custom: this.custom })
+    }
+  }
+}