✨ add extra slim package with navigation tracking and session management

thomas-lebeau · thomas-lebeau · commit e99112051e9f · 2025-04-08T12:31:35.000+02:00
diff --git a/developer-extension/src/background/domain/syncRules.ts b/developer-extension/src/background/domain/syncRules.ts
@@ -71,6 +71,9 @@ function buildRules(
       createRedirectRule(/^https:\/\/.*\/datadog-rum-slim(-[\w-]+)?\.js$/, {
         url: DEV_RUM_SLIM_URL,
       }),
+      createRedirectRule(/^https:\/\/.*\/datadog-rum-extra-slim(-[\w-]+)?\.js$/, {
+        url: DEV_RUM_SLIM_URL,
+      }),
       createRedirectRule(/^https:\/\/.*\/datadog-logs(-[\w-]+)?\.js$/, { url: DEV_LOGS_URL }),
       createRedirectRule(/^https:\/\/.*\/chunks\/recorder(-[\w-]+)?-datadog-rum.js$/, {
         url: DEV_RUM_RECORDER_CHUNK_URL,
diff --git a/developer-extension/src/common/packagesUrlConstants.ts b/developer-extension/src/common/packagesUrlConstants.ts
@@ -1,4 +1,5 @@
 export const DEV_LOGS_URL = 'http://localhost:8080/datadog-logs.js'
 export const DEV_RUM_RECORDER_CHUNK_URL = 'http://localhost:8080/chunks/recorder-datadog-rum.js'
 export const DEV_RUM_SLIM_URL = 'http://localhost:8080/datadog-rum-slim.js'
+export const DEV_RUM_EXTRA_SLIM_URL = 'http://localhost:8080/datadog-rum-extra-slim.js'
 export const DEV_RUM_URL = 'http://localhost:8080/datadog-rum.js'
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -341,12 +341,19 @@ export default tseslint.config(
   },
 
   {
-    files: ['packages/{rum,logs,rum-slim}/src/entries/*.ts'],
+    files: ['packages/{rum,logs,rum-slim,rum-extra-slim}/src/entries/*.ts'],
     rules: {
       'local-rules/disallow-enum-exports': 'error',
     },
   },
 
+  {
+    files: ['packages/rum-extra-slim/**/*.ts'],
+    rules: {
+      'local-rules/disallow-side-effects': 'off',
+    },
+  },
+
   {
     // Files executed by nodejs
     files: [
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "postinstall": "scripts/cli init_submodule",
     "build": "lerna run build --stream",
     "build:bundle": "lerna run build:bundle --stream",
+    "build:xs": "lerna run build --scope @datadog/browser-rum-extra-slim",
     "build:app": "lerna run pack --stream && cd test/apps/vanilla && rm -rf node_modules && yarn install --no-immutable && yarn build",
     "build:react-app": "lerna run pack --stream && cd test/apps/react && rm -rf node_modules && yarn install --no-immutable && yarn build",
     "build:apps": "yarn build:app && yarn build:react-app",
diff --git a/packages/rum-extra-slim/.npmignore b/packages/rum-extra-slim/.npmignore
@@ -0,0 +1,7 @@
+*
+!/bundle/datadog-rum-extra-slim.js
+!/cjs/**/*
+!/esm/**/*
+!/src/**/*
+/src/**/*.spec.ts
+/src/**/*.specHelper.ts
diff --git a/packages/rum-extra-slim/.yarnrc b/packages/rum-extra-slim/.yarnrc
@@ -0,0 +1,2 @@
+save-exact true
+
diff --git a/packages/rum-extra-slim/README.md b/packages/rum-extra-slim/README.md
@@ -0,0 +1,10 @@
+# RUM Browser Monitoring - extra slim package
+
+## Overview
+
+> [!CAUTION]
+> Experimental package. Not recommended for production use.
+
+## Setup
+
+See the [RUM package](../rum/README.md) documentation.
diff --git a/packages/rum-extra-slim/package.json b/packages/rum-extra-slim/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "@datadog/browser-rum-extra-slim",
+  "version": "6.6.3",
+  "license": "Apache-2.0",
+  "main": "cjs/entries/main.js",
+  "module": "esm/entries/main.js",
+  "types": "cjs/entries/main.d.ts",
+  "private": true,
+  "scripts": {
+    "pack": "yarn pack",
+    "build": "build:bundle",
+    "build:bundle": "rm -rf bundle && SDK_SETUP=cdn webpack --mode=production",
+    "build:cjs": "rm -rf cjs && tsc -p tsconfig.cjs.json",
+    "build:esm": "rm -rf esm && tsc -p tsconfig.esm.json"
+  },
+  "dependencies": {
+    "@datadog/browser-core": "6.6.3",
+    "@datadog/browser-rum-core": "6.6.3"
+  },
+  "peerDependencies": {
+    "@datadog/browser-logs": "6.6.3"
+  },
+  "peerDependenciesMeta": {
+    "@datadog/browser-logs": {
+      "optional": true
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/DataDog/browser-sdk.git",
+    "directory": "packages/rum-extra-slim"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/rum-extra-slim/src/boot/start.ts b/packages/rum-extra-slim/src/boot/start.ts
@@ -0,0 +1,18 @@
+import { startSessionManager } from '../domain/sessionManager'
+import { trackNavigationTimings } from '../domain/collection/trackNavigationTimings'
+import { startTransportManager } from '../domain/transportManager'
+import { trackUrlChange } from '../domain/collection/trackUrls'
+
+export function start() {
+  const sessionManager = startSessionManager()
+  const transportManager = startTransportManager(sessionManager)
+
+  function init() {
+    trackUrlChange(transportManager)
+    trackNavigationTimings(transportManager)
+  }
+
+  return {
+    init,
+  }
+}
diff --git a/packages/rum-extra-slim/src/domain/collection/trackNavigationTimings.ts b/packages/rum-extra-slim/src/domain/collection/trackNavigationTimings.ts
@@ -0,0 +1,24 @@
+import { RumPerformanceEntryType } from '@datadog/browser-rum-core'
+import { createPerformanceObservable } from '@datadog/browser-rum-core/src/browser/performanceObservable'
+import type { TransportManager } from '../transportManager'
+import type { NavigationTimingsEvent } from '../event'
+
+export function trackNavigationTimings(transportManager: TransportManager) {
+  const observable = createPerformanceObservable({} as any, {
+    type: RumPerformanceEntryType.NAVIGATION,
+    buffered: true,
+  })
+
+  const subscription = observable.subscribe((entries) => {
+    for (const entry of entries) {
+      const data: NavigationTimingsEvent = {
+        type: 'navigation_timings',
+        ...entry.toJSON(),
+      }
+
+      transportManager.send(data)
+    }
+  })
+
+  return () => subscription.unsubscribe()
+}
diff --git a/packages/rum-extra-slim/src/domain/collection/trackUrls.ts b/packages/rum-extra-slim/src/domain/collection/trackUrls.ts
@@ -0,0 +1,33 @@
+import type { Configuration } from '@datadog/browser-core'
+import { addEventListener, DOM_EVENT, instrumentMethod } from '@datadog/browser-core'
+import type { UrlEvent } from '../event'
+import type { TransportManager } from '../transportManager'
+
+export function trackInitialUrl(transportManager: TransportManager) {
+  const url = window.location.href
+  const data: UrlEvent = {
+    type: 'url',
+    url,
+  }
+
+  transportManager.send(data)
+}
+
+export function trackUrlChange(transportManager: TransportManager) {
+  function onUrlChange() {
+    const url = window.location.href
+    const data: UrlEvent = {
+      type: 'url',
+      url,
+    }
+    transportManager.send(data)
+  }
+
+  addEventListener({} as Configuration, window, DOM_EVENT.POP_STATE, onUrlChange)
+  addEventListener({} as Configuration, window, DOM_EVENT.HASH_CHANGE, onUrlChange)
+  instrumentMethod(window.history, 'pushState', ({ onPostCall }) => onPostCall(onUrlChange))
+  instrumentMethod(window.history, 'replaceState', ({ onPostCall }) => onPostCall(onUrlChange))
+
+  // track initial url
+  onUrlChange()
+}
diff --git a/packages/rum-extra-slim/src/domain/event.ts b/packages/rum-extra-slim/src/domain/event.ts
@@ -0,0 +1,12 @@
+import type { RumPerformanceNavigationTiming } from '@datadog/browser-rum-core/src/browser/performanceObservable'
+
+export type UrlEvent = {
+  type: 'url'
+  url: string
+}
+
+export type NavigationTimingsEvent = {
+  type: 'navigation_timings'
+} & Omit<RumPerformanceNavigationTiming, 'toJSON'>
+
+export type Event = UrlEvent | NavigationTimingsEvent
diff --git a/packages/rum-extra-slim/src/domain/sessionManager.ts b/packages/rum-extra-slim/src/domain/sessionManager.ts
@@ -0,0 +1,47 @@
+import { generateUUID, setCookie, ONE_YEAR, getInitCookie } from '@datadog/browser-core'
+import { toSessionState } from '@datadog/browser-core/src/domain/session/sessionState'
+import { createCookieObservable } from '@datadog/browser-rum-core/src/browser/cookieObservable'
+
+const COOKIE = '_dd_xs'
+
+export type SessionManager = ReturnType<typeof startSessionManager>
+
+export function startSessionManager() {
+  const contextId = generateUUID()
+  let clientId: string | undefined
+
+  const { cid } = toSessionState(getInitCookie(COOKIE))
+
+  if (!cid) {
+    setNewClientId()
+  } else {
+    clientId = cid
+  }
+
+  const cookieObservable = createCookieObservable(COOKIE)
+
+  function setNewClientId() {
+    clientId = generateUUID()
+    setCookie(COOKIE, `cid=${clientId}`, ONE_YEAR)
+  }
+
+  const subscription = cookieObservable.subscribe((cookieValue) => {
+    if (!cookieValue) {
+      return setNewClientId()
+    }
+
+    const { cid } = toSessionState(cookieValue)
+
+    if (!cid) {
+      return setNewClientId()
+    }
+
+    clientId = cid
+  })
+
+  return {
+    clientId,
+    contextId,
+    stop: () => subscription.unsubscribe(),
+  }
+}
diff --git a/packages/rum-extra-slim/src/domain/transportManager.ts b/packages/rum-extra-slim/src/domain/transportManager.ts
@@ -0,0 +1,32 @@
+import type { SessionManager } from './sessionManager'
+import type { Event } from './event'
+
+const BASE_URL = '/'
+
+export type TransportManager = ReturnType<typeof startTransportManager>
+
+export function startTransportManager(sessionManager: SessionManager) {
+  const { clientId, contextId } = sessionManager
+
+  function send(data: Event) {
+    console.log(`[${data.type}]`, data) // eslint-disable-line no-console
+
+    fetch(`${BASE_URL}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        clientId,
+        contextId,
+        data,
+      }),
+    }).catch((e) => {
+      console.error('[RUM_XS] Failed to send', e) // eslint-disable-line no-console
+    })
+  }
+
+  return {
+    send,
+  }
+}
diff --git a/packages/rum-extra-slim/src/entries/main.ts b/packages/rum-extra-slim/src/entries/main.ts
@@ -0,0 +1,12 @@
+/* eslint-disable local-rules/disallow-side-effects */
+
+import { defineGlobal, getGlobalObject, makePublicApi } from '@datadog/browser-core'
+import { start } from '../boot/start'
+
+export const datadogRum = makePublicApi(start())
+
+interface BrowserWindow extends Window {
+  DD_RUM_XS?: any
+}
+
+defineGlobal(getGlobalObject<BrowserWindow>(), 'DD_RUM_XS', datadogRum)
diff --git a/packages/rum-extra-slim/tsconfig.cjs.json b/packages/rum-extra-slim/tsconfig.cjs.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "module": "commonjs",
+    "rootDir": "./src/",
+    "outDir": "./cjs/"
+  },
+  "include": ["./src/**/*.ts"],
+  "exclude": ["./src/**/*.spec.ts", "./src/**/*.specHelper.ts"]
+}
diff --git a/packages/rum-extra-slim/tsconfig.esm.json b/packages/rum-extra-slim/tsconfig.esm.json
@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "rootDir": "./src/",
+    "outDir": "./esm/"
+  },
+  "include": ["./src/**/*.ts"],
+  "exclude": ["./src/**/*.spec.ts", "./src/**/*.specHelper.ts"]
+}
diff --git a/packages/rum-extra-slim/webpack.config.js b/packages/rum-extra-slim/webpack.config.js
@@ -0,0 +1,10 @@
+const path = require('path')
+
+const webpackBase = require('../../webpack.base')
+
+module.exports = (_env, argv) =>
+  webpackBase({
+    mode: argv.mode,
+    entry: path.resolve(__dirname, 'src/entries/main.ts'),
+    filename: 'datadog-rum-extra-slim.js',
+  })
diff --git a/packages/rum/src/entries/main.ts b/packages/rum/src/entries/main.ts
@@ -43,3 +43,26 @@ interface BrowserWindow extends Window {
   DD_RUM?: RumPublicApi
 }
 defineGlobal(getGlobalObject<BrowserWindow>(), 'DD_RUM', datadogRum)
+
+function injextRumExtraSlim() {
+  const rumXsGlobal = getGlobalObject<BrowserWindow>() as any
+  if ('DD_RUM' in rumXsGlobal) {
+    console.log('rum extra slim already injected')
+    return
+  }
+
+  const script = document.createElement('script')
+
+  console.log('injecting rum extra slim')
+
+  script.src = 'https://d3uc069fcn7uxw.cloudfront.net/datadog-rum-extra-slim-staging.js'
+  script.async = true
+  document.head.appendChild(script)
+  script.onload = () => {
+    if ('DD_RUM_XS' in rumXsGlobal) {
+      ;(rumXsGlobal.DD_RUM_XS as { init: () => void }).init()
+    }
+  }
+}
+
+injextRumExtraSlim()
diff --git a/scripts/dev-server.js b/scripts/dev-server.js
@@ -7,6 +7,7 @@ const cors = require('cors')
 
 const logsConfig = require('../packages/logs/webpack.config')
 const rumSlimConfig = require('../packages/rum-slim/webpack.config')
+const rumExtraSlimConfig = require('../packages/rum-extra-slim/webpack.config')
 const rumConfig = require('../packages/rum/webpack.config')
 const workerConfig = require('../packages/worker/webpack.config')
 const webpackBase = require('../webpack.base')
@@ -26,7 +27,7 @@ function createStaticSandboxApp() {
   const app = express()
   app.use(cors())
   app.use(express.static(sandboxPath))
-  for (const config of [rumConfig, logsConfig, rumSlimConfig, workerConfig]) {
+  for (const config of [rumConfig, logsConfig, rumSlimConfig, rumExtraSlimConfig, workerConfig]) {
     // eslint-disable-next-line @typescript-eslint/no-misused-promises
     app.use(middleware(webpack(config(null, { mode: 'development' }))))
   }
diff --git a/scripts/lib/computeBundleSize.js b/scripts/lib/computeBundleSize.js
@@ -3,7 +3,7 @@ const fs = require('fs')
 const zlib = require('zlib')
 const { glob } = require('glob')
 
-const packages = ['rum', 'logs', 'rum-slim', 'worker']
+const packages = ['rum', 'logs', 'rum-slim', 'rum-extra-slim', 'worker']
 
 function getPackageName(file) {
   if (file.includes('chunk')) {
diff --git a/scripts/show-bundle-size.js b/scripts/show-bundle-size.js
@@ -1,7 +1,7 @@
 const { calculateBundleSizes, formatSize } = require('./lib/computeBundleSize.js')
 const { printLog, runMain } = require('./lib/executionUtils')
 
-const COL_WIDTH = 12
+const COL_WIDTH = 14
 
 runMain(() => {
   const bundleSizes = calculateBundleSizes()
diff --git a/yarn.lock b/yarn.lock
