@dynatrace/rum-javascript-sdk 1.331.18 → 1.333.2

package/docs/1-overview.md

@@ -0,0 +1,405 @@
+---
+title: RUM JavaScript SDK Overview
+---
+# @dynatrace/rum-javascript-sdk
+
+A JavaScript API for interacting with the Dynatrace Real User Monitoring (RUM) JavaScript. This package provides both synchronous and asynchronous wrappers for the Dynatrace RUM API, along with TypeScript support and testing utilities.
+
+## Installation
+
+```bash
+npm install @dynatrace/rum-javascript-sdk
+```
+
+## Overview
+
+This package provides two main API approaches for interacting with the Dynatrace RUM JavaScript, as well as types and a Playwright testing framework:
+
+- **Synchronous API**: Safe wrapper functions that gracefully handle cases where the RUM JavaScript is not available
+- **Asynchronous API**: Promise-based functions that wait for the RUM JavaScript to become available
+- **User Actions API**: Manual control over user action creation and lifecycle (see [User Actions API](./4-useractions.md))
+- **TypeScript Support**: Comprehensive type definitions for all RUM API functions
+- **Testing Framework**: Playwright-based utilities for testing RUM integration
+
+## Quick Start
+
+### Synchronous API (Recommended for most use cases)
+
+```typescript
+import { sendEvent, identifyUser } from '@dynatrace/rum-javascript-sdk/api';
+
+// Send a custom event - safely handles cases where RUM JavaScript is not loaded
+sendEvent({
+  'event_properties.component_name': 'UserProfile',
+  'event_properties.action': 'view'
+});
+
+// Identify the current user
+identifyUser('user@example.com');
+```
+
+### Asynchronous API (When you need to ensure RUM JavaScript is available)
+
+```typescript
+import { sendEvent, identifyUser } from '@dynatrace/rum-javascript-sdk/api/promises';
+
+try {
+  // Wait for RUM JavaScript to be available (with 10s timeout by default)
+  await sendEvent({
+    'event_properties.component_name': 'UserProfile',
+    'event_properties.action': 'view'
+  });
+  
+  await identifyUser('user@example.com');
+} catch (error) {
+  console.error('RUM JavaScript not available:', error);
+}
+```
+
+## API Reference
+
+### Synchronous API (`@dynatrace/rum-javascript-sdk/api`)
+
+The synchronous API provides safe wrapper functions that gracefully handle cases where the Dynatrace RUM JavaScript is not available. These functions will execute as no-ops if the JavaScript is not loaded, making them safe to use in any environment.
+
+#### `sendEvent(fields, eventContext?): void`
+
+Sends a custom event to Dynatrace RUM.
+
+**Parameters:**
+- `fields: ApiCreatedEventPropertiesEvent` - Event properties object. Must be serializable JSON with properties prefixed with `event_properties.`, plus optional `duration` and `start_time` properties.
+- `eventContext?: unknown` - Optional context for event modification callbacks.
+
+**Example:**
+```typescript
+import { sendEvent } from '@dynatrace/rum-javascript-sdk/api';
+
+sendEvent({
+  'event_properties.page_name': 'checkout',
+  'event_properties.step': 'payment',
+  'event_properties.amount': 99.99,
+  'duration': 1500,
+  'start_time': Date.now()
+});
+```
+
+#### `addEventModifier(eventModifier): Unsubscriber | undefined`
+
+Registers a function to modify events before they are sent to Dynatrace.
+
+**Parameters:**
+- `eventModifier: (jsonEvent: Readonly<JSONEvent>, eventContext?: EventContext) => JSONEvent | null` - Function that receives an event and returns a modified version or null to cancel the event.
+
+**Returns:**
+- `Unsubscriber | undefined` - Function to remove the modifier, or undefined if the RUM JavaScript is not available.
+
+**Example:**
+```typescript
+import { addEventModifier } from '@dynatrace/rum-javascript-sdk/api';
+
+const unsubscribe = addEventModifier((event, context) => {
+  // Add user context to all events
+  return {
+    ...event,
+    'event_properties.user_tier': 'premium'
+  };
+});
+
+// Later, remove the modifier
+unsubscribe?.();
+```
+
+#### `runHealthCheck(config?): Promise<unknown[] | undefined> | undefined`
+
+Runs a health check on the RUM JavaScript to diagnose potential issues.
+
+**Parameters:**
+- `config?: HealthCheckConfig` - Optional configuration object:
+  - `logVerbose?: boolean` - Include verbose information in the health check
+  - `returnDiagnosticData?: boolean` - Return diagnostic data as array instead of just logging
+  - `runDetailedOverrideCheck?: boolean` - Log additional information about overridden native APIs
+
+**Returns:**
+- `Promise<unknown[] | undefined> | undefined` - Promise resolving to diagnostic data (if requested), or undefined if the RUM JavaScript is not available.
+
+**Example:**
+```typescript
+import { runHealthCheck } from '@dynatrace/rum-javascript-sdk/api';
+
+const diagnostics = await runHealthCheck({
+  logVerbose: true,
+  returnDiagnosticData: true
+});
+
+if (diagnostics) {
+  console.log('RUM Health Check Results:', diagnostics);
+}
+```
+
+#### `identifyUser(value): void`
+
+Associates the current session with a specific user identifier.
+
+**Parameters:**
+- `value: string` - User identifier (name, email, user ID, etc.)
+
+**Example:**
+```typescript
+import { identifyUser } from '@dynatrace/rum-javascript-sdk/api';
+
+// Identify user after login
+identifyUser('john.doe@example.com');
+```
+
+#### `sendSessionPropertyEvent(fields): void`
+
+Sends session-level properties that will be attached to all subsequent events in the session.
+
+**Parameters:**
+- `fields: ApiCreatedSessionPropertiesEvent` - Session properties object. All keys must be prefixed with `session_properties.` and follow naming conventions (lowercase, numbers, underscores, dots).
+
+**Example:**
+```typescript
+import { sendSessionPropertyEvent } from '@dynatrace/rum-javascript-sdk/api';
+
+sendSessionPropertyEvent({
+  'session_properties.user_type': 'premium',
+  'session_properties.subscription_tier': 'gold',
+  'session_properties.region': 'us_east'
+});
+```
+
+#### `sendExceptionEvent(error, fields?): void`
+
+Sends an exception event. Marks the exception event with `characteristics.is_api_reported` and `error.source` = `api` to make it clear on DQL side where errors are coming from.
+Only available if the Errors module is enabled.
+
+**Parameters:**
+
+- `error: Error` - The error object to report. Must be an instance of the standard JavaScript `Error` class.
+- `fields: ApiCreatedEventPropertiesEvent` - Optional Event properties object. Must be serializable JSON with properties prefixed with `event_properties.`, plus optional `duration` and `start_time` properties.
+
+**Example:**
+```typescript
+import { sendExceptionEvent } from '@dynatrace/rum-javascript-sdk/api';
+
+const yourError = new Error("Your Error Message");
+
+sendExceptionEvent(yourError);
+```
+```typescript
+import { sendExceptionEvent } from '@dynatrace/rum-javascript-sdk/api';
+
+const yourError = new Error("Your Error Message");
+
+sendExceptionEvent(yourError, { "event_properties.component": "myExampleComponent" });
+```
+
+### Asynchronous API (`@dynatrace/rum-javascript-sdk/promises`)
+
+The asynchronous API provides Promise-based functions that wait for the Dynatrace RUM JavaScript to become available. These functions will throw a `DynatraceError` if the RUM JavaScript is not available within the specified timeout. This is useful for scenarios where you don't want to
+enable the RUM JavaScript before the user gives their consent.
+
+#### `sendEvent(fields, eventContext?, timeout?): Promise<void>`
+
+Async wrapper for sending custom events, with automatic waiting for RUM JavaScript availability.
+
+**Parameters:**
+- `fields: ApiCreatedEventPropertiesEvent` - Event properties object
+- `eventContext?: unknown` - Optional context for event modification callbacks
+- `timeout?: number` - Timeout in milliseconds to wait for RUM JavaScript (default: 10,000)
+
+**Throws:**
+- `DynatraceError` - If RUM JavaScript is not available within timeout
+
+**Example:**
+```typescript
+import { sendEvent } from '@dynatrace/rum-javascript-sdk/api/promises';
+
+try {
+  await sendEvent({
+    'event_properties.conversion': 'purchase',
+    'event_properties.value': 149.99
+  }, undefined, 15000); // 15 second timeout
+} catch (error) {
+  console.error('Failed to send event:', error.message);
+}
+```
+
+#### `addEventModifier(eventModifier, timeout?): Promise<Unsubscriber>`
+
+Async wrapper for registering event modifiers, with automatic waiting for RUM JavaScript availability.
+
+**Parameters:**
+- `eventModifier: (jsonEvent: Readonly<JSONEvent>, eventContext?: EventContext) => JSONEvent | null` - Event modifier function
+- `timeout?: number` - Timeout in milliseconds to wait for RUM JavaScript (default: 10,000)
+
+**Returns:**
+- `Promise<Unsubscriber>` - Promise resolving to unsubscriber function
+
+**Example:**
+```typescript
+import { addEventModifier } from '@dynatrace/rum-javascript-sdk/api/promises';
+
+const unsubscribe = await addEventModifier((event) => ({
+  ...event,
+  'event_properties.environment': 'production'
+}));
+```
+
+#### `runHealthCheck(config?, timeout?): Promise<unknown[] | undefined>`
+
+Async wrapper for running health checks, with automatic waiting for RUM JavaScript availability.
+
+**Parameters:**
+- `config?: HealthCheckConfig` - Optional health check configuration
+- `timeout?: number` - Timeout in milliseconds to wait for RUM JavaScript (default: 10,000)
+
+**Returns:**
+- `Promise<unknown[] | undefined>` - Promise resolving to diagnostic data
+
+#### `identifyUser(value, timeout?): Promise<void>`
+
+Async wrapper for user identification, with automatic waiting for RUM JavaScript availability.
+
+**Parameters:**
+- `value: string` - User identifier
+- `timeout?: number` - Timeout in milliseconds to wait for RUM JavaScript (default: 10,000)
+
+#### `sendSessionPropertyEvent(fields, timeout?): Promise<void>`
+
+Async wrapper for sending session properties, with automatic waiting for RUM JavaScript availability.
+
+**Parameters:**
+- `fields: ApiCreatedSessionPropertiesEvent` - Session properties object
+- `timeout?: number` - Timeout in milliseconds to wait for RUM JavaScript (default: 10,000)
+
+#### `sendExceptionEvent(error, fields?): void`
+
+Async wrapper for sending an exception event, with automatic waiting for RUM JavaScript availability.
+Marks the exception event with `characteristics.is_api_reported` and `error.source` = `api` to make it clear on DQL side where errors are coming from.
+Only available if the Errors module is enabled.
+
+**Parameters:**
+
+- `error: Error` - The error object to report. Must be an instance of the standard JavaScript `Error` class.
+- `fields: ApiCreatedEventPropertiesEvent` - Optional Event properties object. Must be serializable JSON with properties prefixed with `event_properties.`, plus optional `duration` and `start_time` properties.
+
+### User Actions API
+
+Both synchronous and asynchronous wrappers are available for the User Actions API. For detailed documentation and examples, see [User Actions API](./4-useractions.md).
+
+**Synchronous API:**
+```typescript
+import {
+  createUserAction,
+  subscribeToUserActions,
+  setAutomaticUserActionDetection,
+  getCurrentUserAction
+} from '@dynatrace/rum-javascript-sdk/api';
+
+// Create a manual user action
+const userAction = createUserAction({ autoClose: false });
+// perform work
+userAction?.finish();
+```
+
+**Asynchronous API:**
+```typescript
+import { createUserAction } from '@dynatrace/rum-javascript-sdk/api/promises';
+
+const userAction = await createUserAction({ autoClose: false });
+// perform work
+userAction.finish();
+```
+
+## Error Handling
+
+### DynatraceError
+
+Both APIs export a `DynatraceError` class for handling RUM-specific errors:
+
+```typescript
+import { sendEvent, DynatraceError } from '@dynatrace/rum-javascript-sdk/promises';
+
+try {
+  await sendEvent({ 'event_properties.test': 'value' });
+} catch (error) {
+  if (error instanceof DynatraceError) {
+    console.error('RUM API Error:', error.message);
+    // Handle RUM-specific error
+  } else {
+    console.error('Unexpected error:', error);
+  }
+}
+```
+
+## TypeScript Support
+
+For detailed type information and usage examples, see [Dynatrace Api Types](./3-types.md).
+
+```typescript
+import type { 
+  ApiCreatedEventPropertiesEvent,
+  ApiCreatedSessionPropertiesEvent,
+  HealthCheckConfig,
+  JSONEvent,
+  EventContext
+} from '@dynatrace/rum-javascript-sdk/types';
+```
+
+## Testing
+
+This package includes a Playwright testing framework for validating RUM integration. See **[Testing with Playwright](./2-testing.md)** for complete documentation including:
+
+- Setup and configuration
+- Fixture usage and ordering
+- Event assertion methods
+- Troubleshooting guide
+
+## Best Practices
+
+### When to Use Synchronous vs Asynchronous API
+
+**Use Synchronous API when:**
+- You want graceful degradation when the RUM JavaScript is not available
+- You're instrumenting existing code and don't want to change control flow
+- You're okay with events being dropped if the RUM JavaScript isn't loaded
+
+**Use Asynchronous API when:**
+- You need to ensure events are actually sent
+- You want to handle RUM JavaScript availability errors explicitly
+- You're building critical instrumentation that must not fail silently
+
+### Event Property Naming
+
+Follow prefix custom event properties with `event_properties.`:
+
+```typescript
+// ✅ Good - properties with prefix are accepted
+sendEvent({
+  'event_properties.action': 'login',
+  'event_properties.method': 'oauth',
+  'event_properties.page_name': 'dashboard',
+  'event_properties.load_time': 1234
+});
+
+// ❌ Avoid - properties without prefix are ignored
+sendEvent({
+  'action': 'click',
+  'data': 'some_value'
+});
+```
+
+### Session Properties
+
+Use session properties for data that applies to the entire user session:
+
+```typescript
+// Set once per session
+sendSessionPropertyEvent({
+  'session_properties.subscription_type': 'premium',
+  'session_properties.region': 'europe',
+  'session_properties.app_version': '2.1.0'
+});
+```