⚗️ [RUM-15520] prototype child process monitoring

package.json

@@ -16,6 +16,9 @@
       "types": "./dist/preload.d.ts",
       "require": "./dist/preload-auto.cjs",
       "import": "./dist/preload.mjs"
+    },
+    "./utility": {
+      "require": "./dist/utility-preload.cjs"
     }
   },
   "typesVersions": {
@@ -40,6 +43,8 @@
     "dist/preload.d.ts",
     "dist/preload.mjs",
     "dist/preload.mjs.map",
+    "dist/utility-preload.cjs",
+    "dist/utility-preload.cjs.map",
     "README.md",
     "LICENSE",
     "LICENSE-3rdparty.csv"
@@ -56,6 +61,7 @@
     "typecheck": "tsc -b --noEmit",
     "dev:init": "cd playground && yarn install",
     "dev": "scripts/cli dev",
+    "playground:test": "yarn build && cd playground && yarn test",
     "test": "vitest",
     "test:unit": "vitest run --coverage",
     "test:e2e:init": "yarn build && cd e2e/app && yarn install && yarn build",

playground/README.md

@@ -45,6 +45,42 @@ This will:
 - Reload Electron when files change
 - Open DevTools by default
 
+## Testing
+
+Automated Playwright tests validate playground scenarios against a mock intake server.
+
+### Run Tests
+
+```bash
+# From playground/
+yarn test
+
+# Or from root
+yarn playground:test
+```
+
+### Creating a Scenario
+
+1. **Add a button + IPC handler** in `src/main.ts` and `src/preload.ts` for the feature you want to test
+2. **Write a test** in `test/<name>.scenario.ts`:
+
+```typescript
+import { test, expect } from './helpers';
+
+test('description', async ({ window, intake }) => {
+  // Click a button in the playground
+  await window.click('#my-button');
+
+  // Assert events arrived at the mock intake
+  const events = await intake.getEventsByType('resource', 10_000);
+  expect(events.length).toBeGreaterThanOrEqual(1);
+});
+```
+
+3. **Run** `yarn test` and iterate
+
+The test harness auto-launches the playground app with SDK events routed to a mock intake server via the `DD_SDK_PROXY` env var.
+
 ## Development with SDK Changes
 
 From the root directory, run:

playground/package.json

@@ -9,7 +9,8 @@
     "build:renderer": "esbuild src/renderer.ts --bundle --format=esm --outfile=dist/renderer.js --sourcemap",
     "build:watch": "concurrently \"tsc --watch\" \"yarn build:renderer --watch\"",
     "start": "yarn build && electron .",
-    "dev": "yarn build && concurrently \"yarn build:watch\" \"electron .\""
+    "dev": "yarn build && concurrently \"yarn build:watch\" \"electron .\"",
+    "test": "yarn build && playwright test -c test/playwright.config.ts"
   },
   "dependencies": {
     "@datadog/browser-rum": "6.30.1",

playground/src/index.html

@@ -172,6 +172,9 @@ <h1>Electron SDK Playground</h1>
       <div class="session-section">
         <h2>Session File Content:</h2>
         <pre id="session-content">Loading...</pre>
+        <button id="copy-session-id" style="margin-top: 8px; padding: 8px 16px; font-size: 13px">
+          Copy Session ID
+        </button>
       </div>
 
       <div class="section-label">SDK Actions</div>
@@ -184,6 +187,27 @@ <h2>Session File Content:</h2>
         <button id="crash-btn">Crash</button>
       </div>
 
+      <div class="section-label">Child Process</div>
+      <div class="button-group">
+        <button id="spawn-ls">Spawn ls</button>
+        <button id="exec-echo">Exec echo</button>
+        <button id="spawn-fail">Spawn fail</button>
+        <button id="exec-timeout">Exec timeout</button>
+      </div>
+
+      <div class="section-label">Utility Process</div>
+      <div class="button-group">
+        <button id="fork-utility">Fork utility</button>
+        <button id="send-message">Send message</button>
+        <button id="crash-utility">Crash utility</button>
+        <button id="throw-utility-error">Throw error</button>
+      </div>
+
+      <div class="section-label">Renderer Process</div>
+      <div class="button-group">
+        <button id="crash-renderer">Crash renderer</button>
+      </div>
+
       <div class="section-label">Fetch</div>
       <div class="button-group">
         <button id="demo-renderer-fetch">Renderer Fetch</button>

playground/src/main.ts

@@ -1,11 +1,13 @@
-import { app, BrowserWindow, ipcMain } from 'electron';
+import { app, BrowserWindow, ipcMain, utilityProcess } from 'electron';
 import * as path from 'node:path';
 import * as fs from 'node:fs';
 import * as https from 'node:https';
-import { init, stopSession, _generateActivity, _generateTelemetryError } from '@datadog/electron-sdk';
+import * as childProcess from 'node:child_process';
+import { init, stopSession, _generateActivity, _generateTelemetryError, _flushTransport } from '@datadog/electron-sdk';
 import { loadWindowState, saveWindowState } from './main/windowState';
 import { setupHotReload } from './main/hotReload';
 
+const isTestMode = process.env.DD_TEST_MODE === '1';
 let mainWindow: BrowserWindow | null = null;
 
 function getSessionFilePath(): string {
@@ -20,6 +22,7 @@ function createWindow() {
     height: savedState?.height ?? 768,
     x: savedState?.x,
     y: savedState?.y,
+    show: !isTestMode,
     webPreferences: {
       preload: path.join(__dirname, 'preload.js'),
       contextIsolation: true,
@@ -56,6 +59,10 @@ ipcMain.handle('get-session-file', () => {
   }
 });
 
+ipcMain.handle('flushTransport', async () => {
+  await _flushTransport();
+});
+
 ipcMain.handle('stop-session', () => {
   stopSession();
 });
@@ -102,6 +109,117 @@ ipcMain.handle('crash', () => {
   process.crash();
 });
 
+// --- Child process demo handlers ---
+
+ipcMain.handle('child-process:spawn-ls', () => {
+  return new Promise<string>((resolve, reject) => {
+    const child = childProcess.spawn('ls', ['-la']);
+    let stdout = '';
+    child.stdout.on('data', (data: Buffer) => {
+      stdout += data.toString();
+    });
+    child.on('close', () => resolve(stdout));
+    child.on('error', reject);
+  });
+});
+
+ipcMain.handle('child-process:exec-echo', () => {
+  return new Promise<string>((resolve, reject) => {
+    childProcess.exec('echo hello world', (error, stdout) => {
+      if (error) reject(error);
+      else resolve(stdout.trim());
+    });
+  });
+});
+
+ipcMain.handle('child-process:spawn-fail', () => {
+  return new Promise<string>((resolve) => {
+    const child = childProcess.spawn('nonexistent-command-xyz');
+    child.on('error', (err) => resolve(`Error: ${err.message}`));
+    child.on('close', (code) => resolve(`Exited with code ${code}`));
+  });
+});
+
+ipcMain.handle('child-process:exec-timeout', () => {
+  return new Promise<string>((resolve) => {
+    childProcess.exec('sleep 10', { timeout: 100 }, (error) => {
+      resolve(error ? `Timeout: ${error.message}` : 'Completed');
+    });
+  });
+});
+
+// --- Utility process demo handlers ---
+
+const WORKER_PATH = path.join(__dirname, 'workers', 'demo-worker.js');
+
+ipcMain.handle('utility-process:fork', () => {
+  return new Promise<string>((resolve) => {
+    const child = utilityProcess.fork(WORKER_PATH, [], { serviceName: 'dd-demo-fork' });
+    child.once('message', (msg: { ready?: boolean }) => {
+      if (msg.ready) resolve(`Worker forked, pid: ${child.pid}`);
+    });
+    child.once('exit', (code: number) => resolve(`Worker exited with code ${code}`));
+  });
+});
+
+ipcMain.handle('utility-process:send-message', () => {
+  return new Promise<string>((resolve) => {
+    const child = utilityProcess.fork(WORKER_PATH, [], { serviceName: 'dd-demo-message' });
+    child.on('message', (msg: { ready?: boolean; reply?: string }) => {
+      if (msg.ready) {
+        child.postMessage({ action: 'ping' });
+      } else if (msg.reply) {
+        resolve(`Reply: ${msg.reply}`);
+        child.kill();
+      }
+    });
+    child.once('exit', () => resolve('Worker exited'));
+  });
+});
+
+ipcMain.handle('utility-process:crash', () => {
+  return new Promise<string>((resolve) => {
+    const child = utilityProcess.fork(WORKER_PATH, [], { serviceName: 'dd-demo-crash-worker' });
+    child.once('message', (msg: { ready?: boolean }) => {
+      if (msg.ready) {
+        child.postMessage({ action: 'crash' });
+      }
+    });
+    child.once('exit', (code: number) => resolve(`Worker crashed, exit code: ${code}`));
+  });
+});
+
+ipcMain.handle('utility-process:throw-error', () => {
+  return new Promise<string>((resolve) => {
+    const child = utilityProcess.fork(WORKER_PATH, [], { serviceName: 'dd-demo-throw-worker' });
+    child.once('message', (msg: { ready?: boolean }) => {
+      if (msg.ready) child.postMessage({ action: 'throw-error' });
+    });
+    child.once('exit', (code: number) => resolve(`Worker exited with code: ${code}`));
+  });
+});
+
+// --- Renderer process demo handlers ---
+
+ipcMain.handle('renderer-process:crash', () => {
+  return new Promise<string>((resolve) => {
+    const win = new BrowserWindow({
+      width: 400,
+      height: 300,
+      show: !isTestMode,
+      webPreferences: { contextIsolation: true, nodeIntegration: false },
+    });
+    void win.loadURL('about:blank');
+    win.webContents.once('did-finish-load', () => {
+      // Wait for at least one renderer poll cycle so the process is tracked
+      setTimeout(() => {
+        win.webContents.forcefullyCrashRenderer();
+        resolve('Renderer crashed');
+      }, 3000);
+    });
+  });
+});
+
 void app.whenReady().then(async () => {
   // Initialize SDK on app ready (before window creation)
   console.log('Initializing SDK from main process...');
@@ -121,6 +239,8 @@ void app.whenReady().then(async () => {
     ...CONF.staging,
     service: 'electron-playground',
     env: 'dev',
+    // Allow tests to redirect events to a mock intake server
+    ...(process.env.DD_SDK_PROXY ? { proxy: process.env.DD_SDK_PROXY } : {}),
   });
   console.log('SDK init result:', result);
 

playground/src/preload.ts

@@ -11,4 +11,14 @@ contextBridge.exposeInMainWorld('electronAPI', {
   generateUnhandledRejection: () => ipcRenderer.invoke('generateUnhandledRejection'),
   crash: () => ipcRenderer.invoke('crash'),
   mainFetchApi: () => ipcRenderer.invoke('main:fetch-api'),
+  flushTransport: () => ipcRenderer.invoke('flushTransport'),
+  spawnLs: () => ipcRenderer.invoke('child-process:spawn-ls'),
+  execEcho: () => ipcRenderer.invoke('child-process:exec-echo'),
+  spawnFail: () => ipcRenderer.invoke('child-process:spawn-fail'),
+  execTimeout: () => ipcRenderer.invoke('child-process:exec-timeout'),
+  forkUtility: () => ipcRenderer.invoke('utility-process:fork'),
+  sendMessage: () => ipcRenderer.invoke('utility-process:send-message'),
+  crashUtility: () => ipcRenderer.invoke('utility-process:crash'),
+  throwUtilityError: () => ipcRenderer.invoke('utility-process:throw-error'),
+  crashRenderer: () => ipcRenderer.invoke('renderer-process:crash'),
 });

playground/src/renderer.ts

@@ -13,7 +13,7 @@ datadogRum.init({
   sessionSampleRate: 100,
   trackResources: true,
   trackLongTasks: true,
-  trackUserInteractions: true,
+  trackUserInteractions: false,
 });
 
 // Type definition for the exposed API
@@ -26,6 +26,16 @@ interface ElectronAPI {
   generateUnhandledRejection: () => Promise<void>;
   crash: () => Promise<void>;
   mainFetchApi: () => Promise<unknown>;
+  flushTransport: () => Promise<void>;
+  forkUtility: () => Promise<string>;
+  sendMessage: () => Promise<string>;
+  crashUtility: () => Promise<string>;
+  throwUtilityError: () => Promise<string>;
+  crashRenderer: () => Promise<string>;
+  spawnLs: () => Promise<string>;
+  execEcho: () => Promise<string>;
+  spawnFail: () => Promise<string>;
+  execTimeout: () => Promise<string>;
 }
 
 declare global {
@@ -68,6 +78,18 @@ async function refreshSessionDisplay() {
   }
 }
 
+const copySessionIdBtn = document.getElementById('copy-session-id') as HTMLButtonElement;
+copySessionIdBtn.addEventListener('click', () => {
+  try {
+    const parsed = JSON.parse(sessionContent.textContent ?? '');
+    if (parsed.id) {
+      void navigator.clipboard.writeText(parsed.id as string);
+    }
+  } catch {
+    // Session content not valid JSON
+  }
+});
+
 if (stopBtn && sessionContent) {
   // Load session file content on page load
   void refreshSessionDisplay();
@@ -200,3 +222,18 @@ if (rendererFetchBtn) {
 }
 
 setupDemoButton('main-fetch', 'main:fetch-api', () => window.electronAPI.mainFetchApi());
+
+// Utility process buttons
+setupDemoButton('fork-utility', 'utility-process:fork', () => window.electronAPI.forkUtility());
+setupDemoButton('send-message', 'utility-process:send-message', () => window.electronAPI.sendMessage());
+setupDemoButton('crash-utility', 'utility-process:crash', () => window.electronAPI.crashUtility());
+setupDemoButton('throw-utility-error', 'utility-process:throw-error', () => window.electronAPI.throwUtilityError());
+
+// Renderer process buttons
+setupDemoButton('crash-renderer', 'renderer-process:crash', () => window.electronAPI.crashRenderer());
+
+// Child process buttons
+setupDemoButton('spawn-ls', 'child-process:spawn-ls', () => window.electronAPI.spawnLs());
+setupDemoButton('exec-echo', 'child-process:exec-echo', () => window.electronAPI.execEcho());
+setupDemoButton('spawn-fail', 'child-process:spawn-fail', () => window.electronAPI.spawnFail());
+setupDemoButton('exec-timeout', 'child-process:exec-timeout', () => window.electronAPI.execTimeout());

playground/src/workers/demo-worker.ts

@@ -0,0 +1,27 @@
+/**
+ * Demo utility process worker for playground testing.
+ * Receives messages via parentPort and responds.
+ */
+
+// Enable Datadog SDK error forwarding for this utility process
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+require('@datadog/electron-sdk/utility');
+
+process.parentPort.on('message', (e: Electron.MessageEvent) => {
+  const { action } = e.data as { action: string };
+
+  if (action === 'ping') {
+    process.parentPort.postMessage({ reply: 'pong' });
+  } else if (action === 'crash') {
+    process.crash();
+  } else if (action === 'exit-clean') {
+    process.exit(0);
+  } else if (action === 'exit-error') {
+    process.exit(1);
+  } else if (action === 'throw-error') {
+    throw new Error('Uncaught error in utility process');
+  }
+});
+
+// Signal that the worker is ready
+process.parentPort.postMessage({ ready: true });