[RUMF-801] create a new package for rum-recorder

README.md

@@ -6,11 +6,12 @@ The browser SDK is used to collect logs and RUM data from the browser.
 
 This repository contains several packages:
 
-| Package      | npm                      | size                     | cdn                | doc                                 |
-| ------------ | ------------------------ | ------------------------ | ------------------ | ----------------------------------- |
-| browser-logs | [![npm version][01]][02] | [![bundle size][03]][04] | [datadog-logs][05] | [![API][1]][07] [![product][2]][08] |
-| browser-rum  | [![npm version][11]][12] | [![bundle size][13]][14] | [datadog-rum][15]  | [![API][1]][17] [![product][2]][18] |
-| browser-core | [![npm version][21]][22] | [![bundle size][23]][24] |                    |
+| Package              | npm                      | size                     | cdn                        | doc                                 |
+| -------------------- | ------------------------ | ------------------------ | -------------------------- | ----------------------------------- |
+| browser-logs         | [![npm version][01]][02] | [![bundle size][03]][04] | [datadog-logs][05]         | [![API][1]][07] [![product][2]][08] |
+| browser-rum          | [![npm version][11]][12] | [![bundle size][13]][14] | [datadog-rum][15]          | [![API][1]][17] [![product][2]][18] |
+| browser-rum-recorder | [![npm version][21]][22] | [![bundle size][23]][24] | [datadog-rum-recorder][25] | [![API][1]][27] [![product][2]][28] |
+| browser-core         | [![npm version][31]][32] | [![bundle size][33]][34] |                            |
 
 [1]: https://github.githubassets.com/favicons/favicon.png
 [2]: https://imgix.datadoghq.com/img/favicons/favicon-32x32.png
@@ -28,7 +29,14 @@ This repository contains several packages:
 [15]: https://www.datadoghq-browser-agent.com/datadog-rum.js
 [17]: ./packages/rum/README.md
 [18]: https://docs.datadoghq.com/real_user_monitoring/
-[21]: https://badge.fury.io/js/%40datadog%2Fbrowser-core.svg
-[22]: https://badge.fury.io/js/%40datadog%2Fbrowser-core
-[23]: https://badgen.net/bundlephobia/minzip/@datadog/browser-core
-[24]: https://bundlephobia.com/result?p=@datadog/browser-core
+[21]: https://badge.fury.io/js/%40datadog%2Fbrowser-rum-recorder.svg
+[22]: https://badge.fury.io/js/%40datadog%2Fbrowser-rum-recorder
+[23]: https://badgen.net/bundlephobia/minzip/@datadog/browser-rum-recorder
+[24]: https://bundlephobia.com/result?p=@datadog/browser-rum-recorder
+[25]: https://www.datadoghq-browser-agent.com/datadog-rum-recorder.js
+[27]: ./packages/rum-recorder/README.md
+[28]: https://docs.datadoghq.com/real_user_monitoring/
+[31]: https://badge.fury.io/js/%40datadog%2Fbrowser-core.svg
+[32]: https://badge.fury.io/js/%40datadog%2Fbrowser-core
+[33]: https://badgen.net/bundlephobia/minzip/@datadog/browser-core
+[34]: https://bundlephobia.com/result?p=@datadog/browser-core

packages/rum-recorder/.npmignore

@@ -0,0 +1,5 @@
+*
+!/bundle/**/*
+!/cjs/**/*
+!/esm/**/*
+!/src/**/*

packages/rum-recorder/.yarnrc

@@ -0,0 +1,2 @@
+save-exact true
+

packages/rum-recorder/README.md

@@ -0,0 +1,10 @@
+# RUM Browser Monitoring and Session Recording
+
+## Overview
+
+This package is equivalent to the [RUM package](../rum), but will record the user session beside
+collecting Real User Monitoring data.
+
+## Setup
+
+See the [RUM package](../rum/README.md) documentation.

packages/rum-recorder/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@datadog/browser-rum-recorder",
+  "version": "2.1.2",
+  "license": "Apache-2.0",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "types": "cjs/index.d.ts",
+  "scripts": {
+    "build": "run-p build:cjs build:esm build:bundle",
+    "build:bundle": "rm -rf bundle && webpack --config webpack.config.js --mode=production && yarn replace-build-env bundle",
+    "build:cjs": "rm -rf cjs && tsc -p tsconfig.cjs.json && yarn replace-build-env cjs",
+    "build:esm": "rm -rf esm && tsc -p tsconfig.esm.json && yarn replace-build-env esm",
+    "replace-build-env": "node ../../scripts/replace-build-env.js"
+  },
+  "dependencies": {
+    "@datadog/browser-core": "2.1.2",
+    "@datadog/browser-rum": "2.1.2",
+    "tslib": "^1.10.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/DataDog/browser-sdk.git",
+    "directory": "packages/rum-recorder"
+  }
+}

packages/rum-recorder/src/boot/recorder.entry.ts

@@ -0,0 +1 @@
+export * from '@datadog/browser-rum'

packages/rum-recorder/src/index.ts

@@ -0,0 +1 @@
+export * from './boot/recorder.entry'

packages/rum-recorder/tsconfig.cjs.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "module": "commonjs",
+    "outDir": "./cjs/"
+  },
+  "include": ["./src/**/*.ts"],
+  "exclude": ["./src/**/*.spec.ts"]
+}

packages/rum-recorder/tsconfig.esm.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "module": "es6",
+    "outDir": "./esm/"
+  },
+  "include": ["./src/**/*.ts"],
+  "exclude": ["./src/**/*.spec.ts"]
+}

packages/rum-recorder/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "./bundle/",
+    "module": "es6",
+    "paths": {
+      "@datadog/browser-core": ["../core/src"],
+      "@datadog/browser-rum": ["../rum/src"]
+    }
+  },
+  "include": ["src", "test"]
+}

packages/rum-recorder/webpack.config.js

@@ -0,0 +1,14 @@
+const path = require('path')
+
+const webpackBase = require('../../webpack.base')
+
+module.exports = (env, argv) => ({
+  entry: {
+    rum: path.resolve(__dirname, 'src/boot/recorder.entry.ts'),
+  },
+  ...webpackBase(argv.mode),
+  output: {
+    filename: 'datadog-rum-recorder.js',
+    path: path.resolve(__dirname, 'bundle'),
+  },
+})

scripts/deploy.sh

@@ -24,16 +24,23 @@ esac
 
 case "${datacenter}" in
 "eu")
-    LOGS_FILE_NAME="datadog-logs-eu.js"
-    RUM_FILE_NAME="datadog-rum-eu.js"
+    FILE_PATHS=(
+      "packages/logs/bundle/datadog-logs-eu.js"
+      "packages/rum/bundle/datadog-rum-eu.js"
+    )
     ;;
 "us")
-    LOGS_FILE_NAME="datadog-logs-us.js"
-    RUM_FILE_NAME="datadog-rum-us.js"
+    FILE_PATHS=(
+      "packages/logs/bundle/datadog-logs-us.js"
+      "packages/rum/bundle/datadog-rum-us.js"
+    )
     ;;
 "")
-    LOGS_FILE_NAME="datadog-logs.js"
-    RUM_FILE_NAME="datadog-rum.js"
+    FILE_PATHS=(
+      "packages/logs/bundle/datadog-logs.js"
+      "packages/rum/bundle/datadog-rum.js"
+      "packages/rum-recorder/bundle/datadog-rum-recorder.js"
+    )
     ;;
 * )
     echo "Usage: ./deploy.sh staging|prod [eu|us]"
@@ -42,11 +49,6 @@ case "${datacenter}" in
 esac
 
 CACHE_CONTROL='max-age=900, s-maxage=60'
-LOGS_BUNDLE_PATH="packages/logs/bundle"
-RUM_BUNDLE_PATH="packages/rum/bundle"
-declare -A paths
-paths[${LOGS_FILE_NAME}]="${LOGS_BUNDLE_PATH}/${LOGS_FILE_NAME}"
-paths[${RUM_FILE_NAME}]="${RUM_BUNDLE_PATH}/${RUM_FILE_NAME}"
 
 main() {
   in-isolation upload-to-s3
@@ -55,16 +57,21 @@ main() {
 
 upload-to-s3() {
     assume-role "build-stable-browser-agent-artifacts-s3-write"
-    for file_name in ${LOGS_FILE_NAME} ${RUM_FILE_NAME}; do
+    for file_path in "${FILE_PATHS[@]}"; do
+      local file_name=$(basename "$file_path")
       echo "Upload ${file_name}"
-      aws s3 cp --cache-control "$CACHE_CONTROL" ${paths[${file_name}]} s3://${BUCKET_NAME}/${file_name};
+      aws s3 cp --cache-control "$CACHE_CONTROL" "$file_path" s3://${BUCKET_NAME}/${file_name};
     done
 }
 
 invalidate-cloudfront() {
     assume-role "build-stable-cloudfront-invalidation"
     echo "Creating invalidation"
-    aws cloudfront create-invalidation --distribution-id ${DISTRIBUTION_ID} --paths /${LOGS_FILE_NAME} /${RUM_FILE_NAME}
+    local -a paths_to_invalidate
+    for file_path in "${FILE_PATHS[@]}"; do
+      paths_to_invalidate+=("/$(basename "$file_path")")
+    done
+    aws cloudfront create-invalidation --distribution-id ${DISTRIBUTION_ID} --paths "${paths_to_invalidate[@]}"
 }
 
 in-isolation() {

scripts/dev-server.js

@@ -5,13 +5,15 @@ const path = require('path')
 
 const logsConfig = require('../packages/logs/webpack.config')
 const rumConfig = require('../packages/rum/webpack.config')
+const rumRecorderConfig = require('../packages/rum-recorder/webpack.config')
 const buildEnv = require('./build-env')
 
 const app = express()
 
 app.use(express.static(path.join(__dirname, '../sandbox')))
-app.use(middleware(webpack(withBuildEnv(rumConfig(null, { mode: 'development' })))))
-app.use(middleware(webpack(withBuildEnv(logsConfig(null, { mode: 'development' })))))
+for (const config of [rumConfig, logsConfig, rumRecorderConfig]) {
+  app.use(middleware(webpack(withBuildEnv(config(null, { mode: 'development' })))))
+}
 
 const port = 8080
 app.listen(port, () => console.log(`server listening on port ${port}.`))

test/app/app.ts

@@ -1,5 +1,5 @@
 import { datadogLogs, LogsUserConfiguration } from '@datadog/browser-logs'
-import { datadogRum, RumUserConfiguration } from '@datadog/browser-rum'
+import { datadogRum, RumUserConfiguration } from '@datadog/browser-rum-recorder'
 
 declare global {
   interface Window {

test/app/package.json

@@ -8,10 +8,11 @@
   },
   "dependencies": {
     "@datadog/browser-logs": "file:../../packages/logs",
-    "@datadog/browser-rum": "file:../../packages/rum"
+    "@datadog/browser-rum-recorder": "file:../../packages/rum-recorder"
   },
   "resolutions": {
-    "@datadog/browser-core": "file:../../packages/core"
+    "@datadog/browser-core": "file:../../packages/core",
+    "@datadog/browser-rum": "file:../../packages/rum"
   },
   "devDependencies": {
     "ts-loader": "6.2.1",

test/app/yarn.lock

@@ -2,21 +2,28 @@
 # yarn lockfile v1
 
 
-"@datadog/browser-core@1.25.0", "@datadog/browser-core@file:../../packages/core":
-  version "1.25.0"
+"@datadog/browser-core@1.26.2", "@datadog/browser-core@file:../../packages/core":
+  version "1.26.2"
   dependencies:
     tslib "^1.10.0"
 
 "@datadog/browser-logs@file:../../packages/logs":
-  version "1.25.0"
+  version "1.26.2"
   dependencies:
-    "@datadog/browser-core" "1.25.0"
+    "@datadog/browser-core" "1.26.2"
     tslib "^1.10.0"
 
-"@datadog/browser-rum@file:../../packages/rum":
-  version "1.25.0"
+"@datadog/browser-rum-recorder@file:../../packages/rum-recorder":
+  version "1.26.2"
   dependencies:
-    "@datadog/browser-core" "1.25.0"
+    "@datadog/browser-core" "1.26.2"
+    "@datadog/browser-rum" "1.26.2"
+    tslib "^1.10.0"
+
+"@datadog/[email protected]", "@datadog/browser-rum@file:../../packages/rum":
+  version "1.26.2"
+  dependencies:
+    "@datadog/browser-core" "1.26.2"
     tslib "^1.10.0"
 
 "@webassemblyjs/[email protected]":

test/e2e/tsconfig.json

@@ -15,6 +15,7 @@
     "paths": {
       "@datadog/browser-logs": ["../../packages/logs/src"],
       "@datadog/browser-rum": ["../../packages/rum/src"],
+      "@datadog/browser-rum-recorder": ["../../packages/rum-recorder/src"],
       "@datadog/browser-core": ["../../packages/core/src"]
     }
   },

tsconfig.base.json

@@ -14,7 +14,8 @@
       }
     ],
     "paths": {
-      "@datadog/browser-core": ["./packages/core/src"]
+      "@datadog/browser-core": ["./packages/core/src"],
+      "@datadog/browser-rum": ["./packages/rum/src"]
     }
   }
 }

tslint.json

@@ -20,7 +20,7 @@
     "no-implicit-dependencies": [
       true,
       "dev",
-      ["@datadog/browser-logs", "@datadog/browser-rum", "@datadog/browser-core"]
+      ["@datadog/browser-logs", "@datadog/browser-rum", "@datadog/browser-rum-recorder", "@datadog/browser-core"]
     ],
     "no-null-keyword": true,
     "no-submodule-imports": [true],