test: add local debugging endpoint and react demo (#755)

Author: williazz

.eslintrc.js

@@ -2,7 +2,7 @@ module.exports = {
     env: {
         browser: true
     },
-    ignorePatterns: ['playwright*.config.ts', '**/*.spec.ts'],
+    ignorePatterns: ['playwright*.config.ts', '**/*.spec.ts', 'examples/**'],
     extends: [
         'plugin:@typescript-eslint/recommended',
         'plugin:@typescript-eslint/recommended-requiring-type-checking',
@@ -171,7 +171,6 @@ module.exports = {
         indent: 'off',
         'jsdoc/check-alignment': 'error',
         'jsdoc/check-indentation': 'error',
-        'jsdoc/newline-after-description': 'error',
         'linebreak-style': 'off',
         'max-classes-per-file': ['error', 1],
         'new-parens': 'off',

CONTRIBUTING.md

@@ -4,6 +4,15 @@ Thank you for your interest in contributing to our project. Whether it's a bug r
 
 Please read through this document before submitting any issues or pull requests to ensure we have all the necessary information to effectively respond to your bug report or contribution.
 
+## Local Development Tools
+
+The `Examples/` directory contains tools to help developers locally debug RUM telemetry without any dependencies:
+
+-   **aws-rum-web-ui** - Captures and visualizes RUM payloads via a local server and React UI
+-   **spa-react-demo** - Single Page Application example demonstrating RUM integration in a React app
+
+These tools are designed for local debugging and testing of RUM telemetry collection.
+
 ## Reporting Bugs/Feature Requests
 
 We welcome you to use the GitHub issue tracker to report bugs or suggest features.

Examples/aws-rum-web-ui/.gitignore

@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.jsonl
+recordingids.json

Examples/aws-rum-web-ui/README.md

@@ -0,0 +1,35 @@
+# AWS RUM Web UI
+
+A local debugging tool for capturing and visualizing AWS RUM telemetry without any dependencies.
+
+## Purpose
+
+This tool helps developers locally debug RUM telemetry by:
+
+-   Capturing RUM requests via a local Express server
+-   Visualizing payloads in a React UI with AWS Cloudscape Design System
+-   Inspecting session replay events and metadata
+-   Monitoring real-time telemetry data
+
+## Quick Start
+
+```bash
+npm install
+npm run dev
+```
+
+This starts:
+
+-   Server on port 3000 (captures RUM requests)
+-   React UI on port 5173 (visualizes logs)
+
+## Usage
+
+1. Configure your RUM client endpoint to `http://localhost:3000`
+2. Open `http://localhost:5173` to view captured telemetry
+3. Logs are stored in `server/logs.jsonl`
+
+## API Endpoints
+
+-   `POST /appmonitors/:appmonitorId` - Capture RUM payloads
+-   `GET /api/logs` - Retrieve all captured logs

Examples/aws-rum-web-ui/SCRIPTS.md

@@ -0,0 +1,51 @@
+# AwsRumWebUI Development Scripts
+
+## Available Commands
+
+### `npm run dev`
+
+Start both the server and client in development mode (with existing logs)
+
+### `npm run dev:clean`
+
+**Clean start** - Removes all log files and starts fresh
+
+-   Deletes `events.jsonl`
+-   Deletes `requests.jsonl`
+-   Deletes `sessionreplay.jsonl`
+-   Resets `recordingids.json`
+-   Then starts the dev server
+
+### `npm run clean`
+
+Clean up log files without starting the server
+
+### `npm run server`
+
+Start only the backend server (port 3000)
+
+### `npm run client`
+
+Start only the frontend client (port 5173)
+
+## Log Files Location
+
+All log files are stored in `server/api/`:
+
+-   `events.jsonl` - Individual RUM events
+-   `requests.jsonl` - Raw HTTP requests
+-   `sessionreplay.jsonl` - Session replay events
+-   `recordingids.json` - Index of recording IDs
+
+## Usage Examples
+
+```bash
+# Start fresh (recommended for testing)
+npm run dev:clean
+
+# Continue with existing logs
+npm run dev
+
+# Just clean logs without starting
+npm run clean
+```

Examples/aws-rum-web-ui/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+import { defineConfig, globalIgnores } from 'eslint/config';
+
+export default defineConfig([
+    globalIgnores(['dist']),
+    {
+        files: ['**/*.{ts,tsx}'],
+        extends: [
+            js.configs.recommended,
+            tseslint.configs.recommended,
+            reactHooks.configs.flat.recommended,
+            reactRefresh.configs.vite
+        ],
+        languageOptions: {
+            ecmaVersion: 2020,
+            globals: globals.browser
+        }
+    }
+]);

Examples/aws-rum-web-ui/index.html

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