[RUM-12600] Continuous Benchmarking (#3927)

Author: amortemousque

.gitlab-ci.yml

@@ -587,6 +587,20 @@ bump-chrome-version-scheduled-failure:
   dependencies:
     - bump-chrome-version-scheduled
 
+########################################################################################################################
+# Performance benchmark
+########################################################################################################################
+
+performance-benchmark:
+  stage: task
+  extends: .base-configuration
+  only:
+    variables:
+      - $TARGET_TASK_NAME == "performance-benchmark-scheduled"
+  script:
+    - yarn
+    - yarn test:performance
+
 ########################################################################################################################
 # Check expired telemetry
 ########################################################################################################################

LICENSE-3rdparty.csv

@@ -24,6 +24,8 @@ dev,@types/node-forge,MIT,Copyright Microsoft Corporation
 dev,@types/pako,MIT,Copyright Microsoft Corporation
 dev,@types/react,MIT,Copyright Microsoft Corporation
 dev,@types/react-dom,MIT,Copyright Microsoft Corporation
+dev,@types/react-window,MIT,Copyright Microsoft Corporation
+dev,@vitejs/plugin-react,MIT,Copyright (c) 2019-present Evan You & Vite Contributors
 dev,@webextension-toolbox/webpack-webextension-plugin,MIT,Copyright 2018 Henrik Wenz ([email protected])
 dev,ajv,MIT,Copyright 2015-2017 Evgeny Poberezkin
 dev,browserstack-local,MIT,Copyright 2016 BrowserStack
@@ -60,13 +62,16 @@ dev,pako,MIT,(C) 2014-2017 Vitaly Puzrin and Andrey Tupitsin
 dev,prettier,MIT,Copyright James Long and contributors
 dev,puppeteer,Apache-2.0,Copyright 2017 Google Inc.
 dev,react-router-dom,MIT,Copyright (c) React Training LLC 2015-2019 Copyright (c) Remix Software Inc. 2020-2021 Copyright (c) Shopify Inc. 2022-2023
+dev,react-window,MIT,Copyright (c) 2018 Brian Vaughn
+dev,recharts,MIT,Copyright (c) 2015-present recharts
 dev,style-loader,MIT,Copyright JS Foundation and other contributors
 dev,terser-webpack-plugin,MIT,Copyright JS Foundation and other contributors
 dev,ts-loader,MIT,Copyright 2015 TypeStrong
 dev,ts-node,MIT,Copyright 2014 Blake Embrey
 dev,tsconfig-paths-webpack-plugin,MIT,Copyright 2016 Jonas Kello
 dev,typescript,Apache-2.0,Copyright Microsoft Corporation
 dev,typescript-eslint,MIT,Copyright (c) 2019 typescript-eslint and other contributors
+dev,vite,MIT,Copyright (c) 2019-present, VoidZero Inc. and Vite contributors
 dev,webpack,MIT,Copyright JS Foundation and other contributors
 dev,webpack-cli,MIT,Copyright JS Foundation and other contributors
 dev,webpack-dev-middleware,MIT,Copyright JS Foundation and other contributors

eslint.config.mjs

@@ -26,6 +26,8 @@ export default tseslint.config(
       'packages/*/esm',
       'developer-extension/dist',
       'test/**/dist',
+      'test/apps/react-heavy-spa',
+      'test/apps/react-shopist-like',
       'sandbox',
       'coverage',
       'rum-events-format',
@@ -50,6 +52,7 @@ export default tseslint.config(
           './tsconfig.scripts.json',
           './developer-extension/tsconfig.webpack.json',
           './test/e2e/tsconfig.json',
+          './test/performance/tsconfig.json',
           './performances/tsconfig.json',
 
           './test/apps/**/tsconfig.json',
@@ -453,7 +456,7 @@ export default tseslint.config(
   },
 
   {
-    files: ['test/e2e/**/*.ts'],
+    files: ['test/e2e/**/*.ts', 'test/performance/**/*.ts'],
     rules: {
       // E2E codebase is importing @datadog/browser-* packages referenced by tsconfig.
       'import/no-extraneous-dependencies': 'off',

package.json

@@ -6,7 +6,8 @@
     "packages/*",
     "developer-extension",
     "performances",
-    "test/e2e"
+    "test/e2e",
+    "test/performance"
   ],
   "type": "module",
   "scripts": {
@@ -35,6 +36,9 @@
     "test:e2e:ci:bs": "yarn build && yarn build:apps && yarn test:e2e:bs",
     "test:compat:tsc": "node scripts/check-typescript-compatibility.ts",
     "test:compat:ssr": "scripts/cli check_server_side_rendering_compatibility",
+    "test:performance": "yarn test:e2e:init && playwright test --config test/performance/playwright.config.ts",
+    "test:performance:debug": "playwright test --config test/performance/playwright.config.ts --debug",
+    "test:performance:ui": "playwright test --config test/performance/playwright.config.ts --ui",
     "json-schemas:sync": "scripts/cli update_submodule && yarn json-schemas:generate",
     "json-schemas:generate": "scripts/cli build_json2type && node scripts/generate-schema-types.ts",
     "size": "node scripts/show-bundle-size.ts",

scripts/build/build-test-apps.ts

@@ -16,6 +16,8 @@ runMain(async () => {
 
   buildApp('test/apps/vanilla')
   buildApp('test/apps/react-router-v6-app')
+  buildApp('test/apps/react-heavy-spa')
+  buildApp('test/apps/react-shopist-like')
   await buildReactRouterv7App()
   await buildExtensions()
 

test/apps/react-heavy-spa/.gitignore

@@ -0,0 +1,3 @@
+dist
+node_modules
+.yarn/*

test/apps/react-heavy-spa/README.md

@@ -0,0 +1,52 @@
+# React Heavy SPA - Observability App
+
+A complex, JavaScript-heavy single-page application built with React + TypeScript for performance benchmarking and profiling of Datadog Browser SDK.
+
+## Pages
+
+- 📊 **Dashboard** – Displays metrics cards, charts, and a service grid using Recharts. Triggering CLS due to multiple large dataset fetches.
+- 📝 **Logs Explorer** – Provides log search, filtering, and a virtualized table with 2,000 logs.
+- 🖥️ **Infrastructure** – Visualizes a host map and table with 3,000 hosts, where heavy DOM manipulation causes INP delays during filtering or interaction.
+- ⚙️ **Settings** – Manages user and team settings with form submissions.
+
+## Performance metrics target
+
+Target to have Web Vitals in the “Needs improvement” score range.
+
+- **LCP**: ~3000ms
+- **CLS**: ~0.13
+- **INP**: ~300ms
+- **TBT**: ~45000ms
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 20+ (recommended)
+- Yarn (uses Yarn by default)
+
+### Installation
+
+```bash
+# Install dependencies
+yarn install
+```
+
+### Development
+
+```bash
+# Run development server (opens browser automatically)
+yarn dev
+```
+
+The app will be available at `http://localhost:5173`
+
+### Building for Production
+
+```bash
+# Create production build (includes TypeScript compilation)
+yarn build
+
+# Preview production build
+yarn preview
+```

test/apps/react-heavy-spa/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/dd_icon_rgb.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Heavy SPA Benchmark - Datadog Web UI</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

test/apps/react-heavy-spa/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "heavy-spa",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --open",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@datadog/browser-rum": "^6.23.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.20.0",
+    "react-window": "^1.8.10",
+    "recharts": "^2.10.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.9.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@types/react-window": "^1.8.8",
+    "@vitejs/plugin-react": "^4.3.3",
+    "globals": "^15.11.0",
+    "typescript": "~5.6.2",
+    "vite": "^5.4.10"
+  }
+}