npm install @datadog/browser-rum @datadog/browser-core

<script src="https://www.datadoghq-browser-agent.com/datadog-rum.js"></script>

import { datadogRum } from '@datadog/browser-rum';

datadogRum.init({
    applicationId: 'YOUR_APPLICATION_ID',
    clientToken: 'YOUR_CLIENT_TOKEN',
    site: 'datadoghq.com',
    service: 'your-web-application',
    env: 'production',
    version: '1.0.0',
    sessionSampleRate: 100,
    sessionReplaySampleRate: 20,
    trackUserInteractions: true,
    trackResources: true,
    trackLongTasks: true,
    defaultPrivacyLevel: 'mask-user-input',
    allowedTracingUrls: [
        'https://api.yourapp.com',
        'https://api2.yourapp.com'
    ]
});

<script>
    (function(h,o,u,n,d) {
        h=h[d]=h[d]||{q:[],onReady:function(c){h.q.push(c)}}
        d=o.createElement(u);d.async=1;d.src=n
        n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
    })(window,document,'script','https://www.datadoghq-browser-agent.com/datadog-rum.js','DD_RUM')

    DD_RUM.onReady(function() {
        DD_RUM.init({
            applicationId: 'YOUR_APPLICATION_ID',
            clientToken: 'YOUR_CLIENT_TOKEN',
            site: 'datadoghq.com',
            service: 'your-web-application',
            env: 'production',
            version: '1.0.0',
            sessionSampleRate: 100,
            sessionReplaySampleRate: 20,
            trackUserInteractions: true,
            trackResources: true,
            trackLongTasks: true,
            defaultPrivacyLevel: 'mask-user-input'
        })
    })
</script>

datadogRum.init({
    // Required configuration
    applicationId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
    clientToken: 'dd_client_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    site: 'datadoghq.com', // or 'datadoghq.eu' for EU
    
    // Application metadata
    service: 'frontend-web-app',
    env: 'production',
    version: '1.2.3',
    
    // Data collection settings
    sessionSampleRate: 100,        // Percentage of sessions to track (0-100)
    sessionReplaySampleRate: 20,   // Percentage of sessions for replay (0-100)
    
    // Feature toggles
    trackUserInteractions: true,   // Track clicks, form inputs, taps
    trackResources: true,          // Track resource loading
    trackLongTasks: true,          // Track long running tasks
    trackFrustrations: true,       // Track user frustration signals
    
    // Privacy settings
    defaultPrivacyLevel: 'mask-user-input', // 'allow', 'mask', 'mask-user-input'
    
    // Tracing configuration
    allowedTracingUrls: [
        {
            match: 'https://api.yourapp.com',
            propagatorTypes: ['tracecontext', 'datadog']
        }
    ],
    
    // Custom configuration
    beforeSend: (event) => {
        // Filter or modify events before sending
        if (event.type === 'error' && event.error.isTrusted === false) {
            return false; // Drop untrusted errors
        }
        return true;
    }
});

datadogRum.init({
    // Performance monitoring
    premiumSampleRate: 10,         // Premium features sampling (0-100)
    enablePrivacyForActionName: true, // Hide PII in action names
    
    // Custom context
    context: {
        userId: getCurrentUserId(),
        userRole: getCurrentUserRole(),
        accountType: getCurrentAccountType()
    },
    
    // Error tracking
    trackErrors: true,
    defaultErrorCode: 'UNKNOWN',
    
    // Resource tracking
    resourceSampleRate: 100,
    allowFallbackToLocalStorage: true,
    
    // Session management
    sessionReplaySampleRate: 20,
    replaySampleRate: 20,
    
    // Feature flags
    enableBeforeSendAfter: true,
    usePartitionedCrossSiteSessionCookie: false
});

// Add global context (applies to all events)
datadogRum.setGlobalContext({
    userId: 'user123',
    userRole: 'premium',
    campaign: 'black-friday-2023',
    featureFlags: ['new-checkout-flow', 'beta-analytics']
});

// Add user information
datadogRum.setUser({
    id: 'user123',
    name: 'John Doe',
    email: 'john.doe@example.com',
    plan: 'premium',
    organization: 'Acme Corp'
});

// Add custom attributes to specific events
datadogRum.addTiming('custom_checkout_timing');

// Track custom timing metrics
function trackCustomTiming(name, startTime) {
    const endTime = performance.now();
    const duration = endTime - startTime;
    
    datadogRum.addTiming(name);
    
    // Add custom attributes
    datadogRum.setGlobalContextProperty('custom_timing', {
        name: name,
        duration: duration,
        timestamp: Date.now()
    });
}

// Track custom events
function trackCustomEvent(eventName, eventData) {
    datadogRum.addAction(eventName, eventData);
}

// Example usage
const checkoutStartTime = performance.now();
// ... checkout process ...
trackCustomTiming('checkout_completion', checkoutStartTime);

trackCustomEvent('feature_used', {
    feature_name: 'advanced_search',
    search_query: 'datadog monitoring',
    results_count: 25
});

// Environment configuration
const getRumConfig = () => {
    const configs = {
        development: {
            applicationId: 'dev-app-id',
            clientToken: 'dev-client-token',
            env: 'development',
            sessionSampleRate: 100,
            sessionReplaySampleRate: 100,
            trackErrors: true,
            debug: true
        },
        staging: {
            applicationId: 'staging-app-id',
            clientToken: 'staging-client-token',
            env: 'staging',
            sessionSampleRate: 50,
            sessionReplaySampleRate: 10,
            trackErrors: true,
            debug: false
        },
        production: {
            applicationId: 'prod-app-id',
            clientToken: 'prod-client-token',
            env: 'production',
            sessionSampleRate: 20,
            sessionReplaySampleRate: 5,
            trackErrors: true,
            debug: false
        }
    };
    
    return configs[process.env.NODE_ENV] || configs.development;
};

// Initialize based on environment
const rumConfig = getRumConfig();
datadogRum.init(rumConfig);

// Automatic environment detection
function detectEnvironment() {
    const hostname = window.location.hostname;
    
    if (hostname.includes('localhost') || hostname.includes('127.0.0.1')) {
        return 'development';
    } else if (hostname.includes('staging') || hostname.includes('test')) {
        return 'staging';
    } else {
        return 'production';
    }
}

// Dynamic configuration loading
async function loadRumConfiguration() {
    const environment = detectEnvironment();
    
    try {
        const response = await fetch(`/config/rum-${environment}.json`);
        const config = await response.json();
        return config;
    } catch (error) {
        console.warn('Failed to load RUM config, using defaults:', error);
        return getRumConfig();
    }
}

// Initialize with dynamic configuration
loadRumConfiguration().then(rumConfig => {
    datadogRum.init(rumConfig);
});

// DataDog automatically tracks:
// - Largest Contentful Paint (LCP)
// - First Input Delay (FID) 
// - Cumulative Layout Shift (CLS)

// View performance in DataDog dashboard:
// - Performance > Core Web Vitals
// - Filter by service, environment, or custom tags

// Custom performance monitoring
datadogRum.onReady(() => {
    // Get current performance metrics
    const performance = datadogRum.getInternalContext();
    
    console.log('Current session ID:', performance.sessionId);
    console.log('View ID:', performance.view.id);
});

// Track custom performance metrics
function trackPagePerformance() {
    // Measure Time to Interactive (TTI)
    const measureTTI = () => {
        const observer = new PerformanceObserver((list) => {
            for (const entry of list.getEntries()) {
                if (entry.entryType === 'first-input') {
                    datadogRum.addAction('time_to_interactive', {
                        duration: entry.startTime,
                        type: 'performance'
                    });
                    observer.disconnect();
                }
            }
        });
        observer.observe({ entryTypes: ['first-input'] });
    };

    // Measure Time to First Byte (TTFB)
    const measureTTFB = () => {
        const navigation = performance.getEntriesByType('navigation')[0];
        if (navigation) {
            datadogRum.addAction('time_to_first_byte', {
                duration: navigation.responseStart - navigation.requestStart,
                type: 'performance'
            });
        }
    };

    // Measure Custom Metrics
    const measureCustomMetrics = () => {
        // Custom loading phases
        const phases = {
            'app_loaded': () => window.appLoaded,
            'data_fetched': () => window.dataFetched,
            'ui_ready': () => window.uiReady
        };

        Object.entries(phases).forEach(([phase, checkFn]) => {
            const startTime = performance.now();
            
            const checkInterval = setInterval(() => {
                if (checkFn()) {
                    const duration = performance.now() - startTime;
                    datadogRum.addAction(`phase_${phase}`, {
                        duration: duration,
                        type: 'custom_performance'
                    });
                    clearInterval(checkInterval);
                }
            }, 100);
        });
    };

    measureTTI();
    measureTTFB();
    measureCustomMetrics();
}

// Initialize performance tracking
trackPagePerformance();

// Set up performance budgets
const performanceBudgets = {
    lcp: 2500,      // 2.5 seconds
    fid: 100,       // 100ms
    cls: 0.1,       // 0.1
    ttfb: 500,      // 500ms
    custom_load: 3000 // 3 seconds
};

function checkPerformanceBudgets() {
    // Monitor LCP budget
    const lcpObserver = new PerformanceObserver((list) => {
        const entries = list.getEntries();
        const lastEntry = entries[entries.length - 1];
        
        if (lastEntry.startTime > performanceBudgets.lcp) {
            datadogRum.addError(new Error('LCP budget exceeded'), {
                budget: 'lcp',
                actual: lastEntry.startTime,
                limit: performanceBudgets.lcp,
                severity: 'warning'
            });
        }
    });
    lcpObserver.observe({ entryTypes: ['largest-contentful-paint'] });

    // Monitor FID budget
    const fidObserver = new PerformanceObserver((list) => {
        list.getEntries().forEach((entry) => {
            if ((entry.processingStart - entry.startTime) > performanceBudgets.fid) {
                datadogRum.addError(new Error('FID budget exceeded'), {
                    budget: 'fid',
                    actual: entry.processingStart - entry.startTime,
                    limit: performanceBudgets.fid,
                    severity: 'warning'
                });
            }
        });
    });
    fidObserver.observe({ entryTypes: ['first-input'] });
}

checkPerformanceBudgets();

// DataDog automatically tracks all XHR and fetch requests
// Configure tracing for your API endpoints

datadogRum.init({
    // ... other config ...
    allowedTracingUrls: [
        {
            match: 'https://api.yourapp.com',
            propagatorTypes: ['tracecontext', 'datadog']
        },
        {
            match: 'https://internal-api.yourapp.com',
            propagatorTypes: ['datadog']
        }
    ],
    traceSampleRate: 100
});

// Track custom API metrics
function trackApiCall(endpoint, method, startTime, response) {
    const duration = performance.now() - startTime;
    
    datadogRum.addAction('api_call', {
        endpoint: endpoint,
        method: method,
        status: response.status,
        duration: duration,
        success: response.ok,
        size: response.headers.get('content-length') || 0
    });
    
    // Track errors
    if (!response.ok) {
        datadogRum.addError(new Error(`API Error: ${response.status}`), {
            endpoint: endpoint,
            method: method,
            status: response.status,
            duration: duration
        });
    }
}

// Enhanced fetch wrapper
const originalFetch = window.fetch;
window.fetch = async function(url, options = {}) {
    const startTime = performance.now();
    const method = options.method || 'GET';
    
    try {
        const response = await originalFetch.apply(this, arguments);
        trackApiCall(url, method, startTime, response);
        return response;
    } catch (error) {
        trackApiCall(url, method, startTime, { ok: false, status: 0 });
        throw error;
    }
};

// Comprehensive API error tracking
class ApiErrorTracker {
    constructor() {
        this.errorCounts = new Map();
        this.lastErrorTime = new Map();
        this.rateLimitWindow = 60000; // 1 minute
    }
    
    trackApiError(error, endpoint, method) {
        const key = `${endpoint}:${method}`;
        const now = Date.now();
        
        // Update error counts
        if (!this.errorCounts.has(key)) {
            this.errorCounts.set(key, []);
        }
        
        const errors = this.errorCounts.get(key);
        errors.push(now);
        
        // Clean old errors outside window
        const recentErrors = errors.filter(time => now - time < this.rateLimitWindow);
        this.errorCounts.set(key, recentErrors);
        
        // Track in DataDog
        datadogRum.addError(error, {
            endpoint: endpoint,
            method: method,
            error_count: recentErrors.length,
            error_type: this.categorizeError(error),
            timestamp: now
        });
        
        // Alert on high error rates
        if (recentErrors.length >= 5) {
            this.sendAlert(key, recentErrors.length, endpoint);
        }
    }
    
    categorizeError(error) {
        if (error.name === 'TypeError' && error.message.includes('fetch')) {
            return 'network_error';
        } else if (error.message.includes('4')) {
            return 'client_error';
        } else if (error.message.includes('5')) {
            return 'server_error';
        } else {
            return 'unknown_error';
        }
    }
    
    sendAlert(key, count, endpoint) {
        const lastAlert = this.lastErrorTime.get(key);
        const now = Date.now();
        
        // Rate limit alerts to once per 5 minutes
        if (!lastAlert || now - lastAlert > 300000) {
            datadogRum.addError(new Error(`High error rate detected: ${count} errors in 1 minute`), {
                alert_type: 'high_error_rate',
                endpoint: endpoint,
                error_count: count,
                severity: 'critical'
            });
            
            this.lastErrorTime.set(key, now);
        }
    }
}

// Initialize API error tracking
const apiErrorTracker = new ApiErrorTracker();

// Track fetch errors
window.addEventListener('unhandledrejection', (event) => {
    if (event.reason && event.reason.url) {
        apiErrorTracker.trackApiError(
            event.reason,
            event.reason.url,
            event.reason.config?.method || 'GET'
        );
    }
});

// Monitor resource loading performance
class ResourceMonitor {
    constructor() {
        this.resourceTimings = new Map();
        this.setupResourceObserver();
    }
    
    setupResourceObserver() {
        const observer = new PerformanceObserver((list) => {
            const entries = list.getEntries();
            
            entries.forEach((entry) => {
                if (entry.initiatorType && entry.duration > 0) {
                    this.analyzeResource(entry);
                }
            });
        });
        
        observer.observe({ entryTypes: ['resource'] });
    }
    
    analyzeResource(entry) {
        const resourceData = {
            name: entry.name,
            type: entry.initiatorType,
            duration: entry.duration,
            transferSize: entry.transferSize,
            encodedBodySize: entry.encodedBodySize,
            decodedBodySize: entry.decodedBodySize,
            startTime: entry.startTime,
            timestamp: Date.now()
        };
        
        // Track in DataDog
        datadogRum.addAction('resource_load', resourceData);
        
        // Check for slow resources
        if (entry.duration > 1000) {
            datadogRum.addError(new Error(`Slow resource: ${entry.name}`), {
                resource_name: entry.name,
                resource_type: entry.initiatorType,
                duration: entry.duration,
                threshold: 1000
            });
        }
        
        // Track critical resources separately
        if (this.isCriticalResource(entry.name)) {
            datadogRum.addAction('critical_resource_load', {
                ...resourceData,
                is_critical: true
            });
        }
    }
    
    isCriticalResource(url) {
        const criticalPatterns = [
            /\.css$/,
            /\.js$/,
            /critical/,
            /bundle/,
            /main/
        ];
        
        return criticalPatterns.some(pattern => pattern.test(url));
    }
    
    getResourceSummary() {
        const summary = {
            total: 0,
            byType: {},
            slowResources: [],
            totalLoadTime: 0
        };
        
        // Get all resource entries
        const resources = performance.getEntriesByType('resource');
        
        resources.forEach(resource => {
            summary.total++;
            summary.totalLoadTime += resource.duration;
            
            if (!summary.byType[resource.initiatorType]) {
                summary.byType[resource.initiatorType] = {
                    count: 0,
                    totalDuration: 0,
                    averageDuration: 0
                };
            }
            
            summary.byType[resource.initiatorType].count++;
            summary.byType[resource.initiatorType].totalDuration += resource.duration;
            
            if (resource.duration > 1000) {
                summary.slowResources.push({
                    name: resource.name,
                    duration: resource.duration,
                    type: resource.initiatorType
                });
            }
        });
        
        // Calculate averages
        Object.values(summary.byType).forEach(type => {
            type.averageDuration = type.totalDuration / type.count;
        });
        
        return summary;
    }
}

// Initialize resource monitoring
const resourceMonitor = new ResourceMonitor();

// Track resource summary periodically
setInterval(() => {
    const summary = resourceMonitor.getResourceSummary();
    datadogRum.addAction('resource_summary', summary);
}, 30000); // Every 30 seconds

// Configure session replay
datadogRum.init({
    // ... other config ...
    sessionReplaySampleRate: 20,    // 20% of sessions
    trackUserInteractions: true,    // Track clicks, inputs, taps
    trackFrustrations: true,        // Track rage clicks, dead clicks
    defaultPrivacyLevel: 'mask-user-input', // Mask sensitive input
    enablePrivacyForActionName: true, // Hide PII in action names
    trackResources: true,
    trackLongTasks: true
});

// Add session context
datadogRum.setUser({
    id: getCurrentUserId(),
    name: getCurrentUserName(),
    email: getCurrentUserEmail(),
    role: getCurrentUserRole(),
    account_id: getCurrentAccountId()
});

// Track custom session events
function trackUserJourney(step, data = {}) {
    datadogRum.addAction(`user_journey_${step}`, {
        journey_step: step,
        ...data,
        timestamp: Date.now()
    });
}

// Example usage in user flows
function trackCheckoutFlow(step) {
    const journeyData = {
        step: step,
        cart_value: getCurrentCartValue(),
        items_count: getCartItemCount(),
        payment_method: getSelectedPaymentMethod()
    };
    
    trackUserJourney('checkout', journeyData);
}

// Track feature adoption
function trackFeatureAdoption(featureName, context = {}) {
    datadogRum.addAction('feature_adoption', {
        feature_name: featureName,
        adoption_type: 'first_use',
        ...context,
        timestamp: Date.now()
    });
}

// Enhanced error tracking setup
class EnhancedErrorTracker {
    constructor() {
        this.setupGlobalErrorHandlers();
        this.setupUnhandledRejectionHandler();
        this.setupResourceErrorHandler();
        this.errorCounts = new Map();
    }
    
    setupGlobalErrorHandlers() {
        // JavaScript errors
        window.addEventListener('error', (event) => {
            this.trackError({
                type: 'javascript',
                message: event.message,
                filename: event.filename,
                lineno: event.lineno,
                colno: event.colno,
                error: event.error,
                timestamp: Date.now(),
                userAgent: navigator.userAgent,
                url: window.location.href
            });
        });
    }
    
    setupUnhandledRejectionHandler() {
        // Unhandled promise rejections
        window.addEventListener('unhandledrejection', (event) => {
            this.trackError({
                type: 'promise',
                message: event.reason?.message || 'Unhandled Promise Rejection',
                reason: event.reason,
                stack: event.reason?.stack,
                timestamp: Date.now(),
                userAgent: navigator.userAgent,
                url: window.location.href
            });
        });
    }
    
    setupResourceErrorHandler() {
        // Resource loading errors
        window.addEventListener('error', (event) => {
            if (event.target && (event.target.tagName === 'SCRIPT' || 
                event.target.tagName === 'LINK' || 
                event.target.tagName === 'IMG' ||
                event.target.tagName === 'LINK')) {
                
                this.trackError({
                    type: 'resource',
                    message: event.message,
                    target: event.target.tagName.toLowerCase(),
                    src: event.target.src || event.target.href,
                    timestamp: Date.now(),
                    url: window.location.href
                });
            }
        }, true);
    }
    
    trackError(errorData) {
        // Add error ID and categorize
        errorData.id = this.generateErrorId();
        errorData.category = this.categorizeError(errorData);
        errorData.severity = this.calculateSeverity(errorData);
        
        // Count errors for rate limiting
        const errorKey = `${errorData.type}:${errorData.category}`;
        const count = (this.errorCounts.get(errorKey) || 0) + 1;
        this.errorCounts.set(errorKey, count);
        
        // Add to DataDog
        datadogRum.addError(
            new Error(`${errorData.type}: ${errorData.message}`),
            {
                ...errorData,
                error_count: count,
                user_session: datadogRum.getInternalContext()?.sessionId,
                page_url: window.location.pathname,
                user_agent: navigator.userAgent,
                timestamp: Date.now()
            }
        );
        
        // Log for development
        if (process.env.NODE_ENV === 'development') {
            console.error('Enhanced error tracked:', errorData);
        }
    }
    
    categorizeError(errorData) {
        if (errorData.type === 'javascript') {
            if (errorData.message.includes('NetworkError') || 
                errorData.message.includes('fetch')) {
                return 'network';
            } else if (errorData.message.includes('ReferenceError')) {
                return 'reference';
            } else if (errorData.message.includes('TypeError')) {
                return 'type';
            } else {
                return 'general';
            }
        } else if (errorData.type === 'resource') {
            return errorData.target || 'unknown';
        } else if (errorData.type === 'promise') {
            return 'async';
        }
        
        return 'unknown';
    }
    
    calculateSeverity(errorData) {
        // Calculate error severity based on type and context
        if (errorData.type === 'javascript') {
            if (errorData.category === 'network') return 'high';
            if (errorData.category === 'reference') return 'medium';
            return 'low';
        }
        
        return 'medium';
    }
    
    generateErrorId() {
        return `err_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
    }
    
    getErrorSummary() {
        const summary = {
            totalErrors: Array.from(this.errorCounts.values()).reduce((a, b) => a + b, 0),
            byCategory: {},
            recentErrors: [],
            trends: this.analyzeErrorTrends()
        };
        
        this.errorCounts.forEach((count, key) => {
            const [type, category] = key.split(':');
            if (!summary.byCategory[type]) {
                summary.byCategory[type] = {};
            }
            summary.byCategory[type][category] = count;
        });
        
        return summary;
    }
    
    analyzeErrorTrends() {
        // Analyze error patterns over time
        return {
            totalErrors: Array.from(this.errorCounts.values()).reduce((a, b) => a + b, 0),
            mostCommon: Array.from(this.errorCounts.entries())
                .sort((a, b) => b[1] - a[1])[0],
            errorRate: this.calculateErrorRate()
        };
    }
    
    calculateErrorRate() {
        // Calculate errors per minute
        const totalErrors = Array.from(this.errorCounts.values()).reduce((a, b) => a + b, 0);
        const timeWindow = 5 * 60 * 1000; // 5 minutes
        return Math.round((totalErrors / timeWindow) * 60000); // errors per minute
    }
}

// Initialize enhanced error tracking
const enhancedErrorTracker = new EnhancedErrorTracker();

// Track error summary periodically
setInterval(() => {
    const summary = enhancedErrorTracker.getErrorSummary();
    datadogRum.addAction('error_summary', summary);
}, 60000); // Every minute

{
  "title": "Website Performance Dashboard",
  "description": "Comprehensive website monitoring using DataDog RUM",
  "widgets": [
    {
      "id": 1,
      "layout": { "x": 0, "y": 0, "width": 4, "height": 3 },
      "definition": {
        "title": "Core Web Vitals - LCP",
        "type": "timeseries",
        "requests": [
          {
            "q": "rum.custom.lcp{*} by {env,service}",
            "aggregator": "avg",
            "conditional_formats": [
              {
                "palette": "red",
                "comparator": ">",
                "value": 2500
              },
              {
                "palette": "yellow", 
                "comparator": ">",
                "value": 1500
              }
            ]
          }
        ],
        "yaxis": {
          "label": "LCP (ms)",
          "min": 0,
          "max": 4000
        }
      }
    },
    {
      "id": 2,
      "layout": { "x": 4, "y": 0, "width": 4, "height": 3 },
      "definition": {
        "title": "Error Rate",
        "type": "timeseries",
        "requests": [
          {
            "q": "rum.error{*} by {env,service}.as_count()",
            "aggregator": "sum"
          }
        ],
        "yaxis": {
          "label": "Errors per minute",
          "min": 0
        }
      }
    },
    {
      "id": 3,
      "layout": { "x": 8, "y": 0, "width": 4, "height": 3 },
      "definition": {
        "title": "Page Views",
        "type": "timeseries",
        "requests": [
          {
            "q": "rum.view{*} by {env,service}.as_count()",
            "aggregator": "sum"
          }
        ],
        "yaxis": {
          "label": "Page views per minute",
          "min": 0
        }
      }
    }
  ],
  "template_variables": [
    {
      "name": "env",
      "default": "production",
      "options": ["development", "staging", "production"]
    },
    {
      "name": "service",
      "default": "frontend-web-app",
      "options": ["frontend-web-app", "mobile-app", "admin-panel"]
    }
  ],
  "layout_type": "ordered",
  "is_read_only": false
}

// Dashboard widget configurations for API integration

const performanceWidgets = {
    // Core Web Vitals Overview
    coreWebVitals: {
        title: "Core Web Vitals Overview",
        type: "query_table",
        requests: [
            {
                q: "avg:rum.lcp{*} by {env,service}",
                alias: "LCP (ms)"
            },
            {
                q: "avg:rum.fid{*} by {env,service}", 
                alias: "FID (ms)"
            },
            {
                q: "avg:rum.cls{*} by {env,service}",
                alias: "CLS"
            }
        ],
        formulas: [
            {
                formula: "LCP < 2500 ? 'Good' : (LCP < 4000 ? 'Needs Improvement' : 'Poor')",
                alias: "LCP Status"
            },
            {
                formula: "FID < 100 ? 'Good' : (FID < 300 ? 'Needs Improvement' : 'Poor')",
                alias: "FID Status"
            },
            {
                formula: "CLS < 0.1 ? 'Good' : (CLS < 0.25 ? 'Needs Improvement' : 'Poor')",
                alias: "CLS Status"
            }
        ]
    },
    
    // API Performance
    apiPerformance: {
        title: "API Performance Metrics",
        type: "timeseries",
        requests: [
            {
                q: "avg:rum.resource.duration{type:fetch} by {env,service,endpoint}",
                aggregator: "avg",
                style: {
                    palette: "dog_classic",
                    line_type: "solid",
                    line_width: "normal"
                }
            }
        ],
        yaxis: {
            label: "Response Time (ms)",
            min: 0
        }
    },
    
    // User Engagement
    userEngagement: {
        title: "User Engagement Metrics",
        type: "timeseries",
        requests: [
            {
                q: "sum:rum.view{*} by {env,service}",
                aggregator: "sum",
                style: {
                    palette: "green",
                    line_type: "solid"
                }
            },
            {
                q: "sum:rum.action{*} by {env,service}",
                aggregator: "sum",
                style: {
                    palette: "blue",
                    line_type: "dashed"
                }
            }
        ],
        yaxis: {
            label: "Count",
            min: 0
        }
    }
};

// Define custom metrics in your application
function createCustomMetrics() {
    // Business metrics
    const businessMetrics = {
        // Conversion tracking
        trackConversion: (conversionType, value) => {
            datadogRum.addAction('conversion', {
                conversion_type: conversionType,
                conversion_value: value,
                currency: 'USD',
                timestamp: Date.now()
            });
        },
        
        // Feature usage tracking
        trackFeatureUsage: (featureName, usageData) => {
            datadogRum.addAction('feature_usage', {
                feature_name: featureName,
                ...usageData,
                timestamp: Date.now()
            });
        },
        
        // Custom performance metrics
        trackCustomPerformance: (metricName, value, unit) => {
            datadogRum.addAction('custom_performance', {
                metric_name: metricName,
                metric_value: value,
                metric_unit: unit,
                timestamp: Date.now()
            });
        }
    };
    
    return businessMetrics;
}

// Usage examples
const metrics = createCustomMetrics();

// Track conversions
metrics.trackConversion('signup', 0);
metrics.trackConversion('purchase', 29.99);

// Track feature usage
metrics.trackFeatureUsage('advanced_search', {
    search_query: 'datadog rum',
    results_count: 15,
    filters_applied: 3
});

// Track custom performance
metrics.trackCustomPerformance('checkout_completion_time', 4500, 'ms');
metrics.trackCustomPerformance('data_sync_time', 2.5, 'seconds');

// Create dashboards programmatically using DataDog API
const dashboardApi = {
    // Create a new dashboard
    createDashboard: async (dashboardConfig) => {
        const response = await fetch('https://api.datadoghq.com/api/v1/dashboard', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'DD-API-KEY': 'YOUR_API_KEY',
                'DD-APPLICATION-KEY': 'YOUR_APPLICATION_KEY'
            },
            body: JSON.stringify(dashboardConfig)
        });
        
        if (!response.ok) {
            throw new Error(`Failed to create dashboard: ${response.statusText}`);
        }
        
        return await response.json();
    },
    
    // Update existing dashboard
    updateDashboard: async (dashboardId, dashboardConfig) => {
        const response = await fetch(`https://api.datadoghq.com/api/v1/dashboard/${dashboardId}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'DD-API-KEY': 'YOUR_API_KEY',
                'DD-APPLICATION-KEY': 'YOUR_APPLICATION_KEY'
            },
            body: JSON.stringify(dashboardConfig)
        });
        
        if (!response.ok) {
            throw new Error(`Failed to update dashboard: ${response.statusText}`);
        }
        
        return await response.json();
    },
    
    // Get dashboard by ID
    getDashboard: async (dashboardId) => {
        const response = await fetch(`https://api.datadoghq.com/api/v1/dashboard/${dashboardId}`, {
            headers: {
                'DD-API-KEY': 'YOUR_API_KEY',
                'DD-APPLICATION-KEY': 'YOUR_APPLICATION_KEY'
            }
        });
        
        if (!response.ok) {
            throw new Error(`Failed to get dashboard: ${response.statusText}`);
        }
        
        return await response.json();
    }
};

// Example dashboard creation
const createWebsiteMonitoringDashboard = async () => {
    const dashboardConfig = {
        title: "Website Performance Monitoring",
        description: "Real-time website performance and user experience monitoring",
        widgets: [
            // Core Web Vitals widget
            {
                layout: { x: 0, y: 0, width: 6, height: 4 },
                definition: {
                    title: "Core Web Vitals",
                    type: "timeseries",
                    requests: [
                        {
                            q: "avg:rum.lcp{*} by {env,service}",
                            aggregator: "avg"
                        },
                        {
                            q: "avg:rum.fid{*} by {env,service}",
                            aggregator: "avg"
                        },
                        {
                            q: "avg:rum.cls{*} by {env,service}",
                            aggregator: "avg"
                        }
                    ]
                }
            },
            
            // Error rate widget
            {
                layout: { x: 6, y: 0, width: 6, height: 4 },
                definition: {
                    title: "Error Rate",
                    type: "timeseries",
                    requests: [
                        {
                            q: "sum:rum.error{*} by {env,service}",
                            aggregator: "sum"
                        }
                    ]
                }
            }
        ],
        template_variables: [
            {
                name: "env",
                default: "production",
                options: ["development", "staging", "production"]
            },
            {
                name: "service",
                default: "frontend-web-app",
                options: ["frontend-web-app", "mobile-app"]
            }
        ],
        layout_type: "ordered",
        is_read_only: false
    };
    
    try {
        const result = await dashboardApi.createDashboard(dashboardConfig);
        console.log('Dashboard created successfully:', result.url);
        return result;
    } catch (error) {
        console.error('Failed to create dashboard:', error);
        throw error;
    }
};

// Alert configuration examples

const alertRules = {
    // Core Web Vitals alerts
    coreWebVitals: [
        {
            name: "LCP Performance Alert",
            message: "LCP is exceeding the performance threshold",
            query: "avg(last_5m):avg:rum.lcp{*} > 2500",
            thresholds: {
                critical: 2500,
                warning: 2000
            },
            tags: ["team:frontend", "service:web-app"],
            priority: 1
        },
        {
            name: "FID Performance Alert", 
            message: "First Input Delay is too high",
            query: "avg(last_5m):avg:rum.fid{*} > 100",
            thresholds: {
                critical: 100,
                warning: 80
            },
            tags: ["team:frontend", "service:web-app"],
            priority: 2
        },
        {
            name: "CLS Performance Alert",
            message: "Cumulative Layout Shift is too high",
            query: "avg(last_5m):avg:rum.cls{*} > 0.1",
            thresholds: {
                critical: 0.1,
                warning: 0.05
            },
            tags: ["team:frontend", "service:web-app"],
            priority: 3
        }
    ],
    
    // Error rate alerts
    errorRate: [
        {
            name: "High Error Rate Alert",
            message: "Error rate is exceeding acceptable levels",
            query: "sum(last_5m):sum:rum.error{*} > 100",
            thresholds: {
                critical: 100,
                warning: 50
            },
            tags: ["team:frontend", "service:web-app"],
            priority: 1
        },
        {
            name: "JavaScript Error Alert",
            query: "sum(last_5m):sum:rum.error{type:javascript} > 50",
            thresholds: {
                critical: 50,
                warning: 25
            },
            tags: ["team:frontend", "service:web-app"],
            priority: 2
        }
    ],
    
    // User experience alerts
    userExperience: [
        {
            name: "Low Page Views Alert",
            message: "Page views have dropped significantly",
            query: "sum(last_10m):sum:rum.view{*} < 100",
            thresholds: {
                critical: 100,
                warning: 150
            },
            tags: ["team:product", "service:web-app"],
            priority: 3
        }
    ]
};

// Create alerts programmatically
const alertApi = {
    createAlert: async (alertConfig) => {
        const response = await fetch('https://api.datadoghq.com/api/v1/monitor', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'DD-API-KEY': 'YOUR_API_KEY',
                'DD-APPLICATION-KEY': 'YOUR_APPLICATION_KEY'
            },
            body: JSON.stringify(alertConfig)
        });
        
        if (!response.ok) {
            throw new Error(`Failed to create alert: ${response.statusText}`);
        }
        
        return await response.json();
    },
    
    createAllAlerts: async () => {
        const allAlerts = [
            ...alertRules.coreWebVitals,
            ...alertRules.errorRate,
            ...alertRules.userExperience
        ];
        
        const results = [];
        
        for (const alertConfig of allAlerts) {
            try {
                const result = await alertApi.createAlert(alertConfig);
                results.push({ success: true, config: alertConfig, result });
            } catch (error) {
                results.push({ success: false, config: alertConfig, error: error.message });
            }
        }
        
        return results;
    }
};

// Integrate DataDog alerts with external systems

const alertIntegrations = {
    // Slack integration
    slack: {
        webhookUrl: 'https://hooks.slack.com/services/YOUR/SLACK/WEBHOOK',
        
        sendSlackAlert: async (alertData) => {
            const message = {
                text: `:warning: DataDog Alert: ${alertData.title}`,
                attachments: [
                    {
                        color: alertData.priority === 'critical' ? 'danger' : 'warning',
                        fields: [
                            {
                                title: 'Alert',
                                value: alertData.message,
                                short: false
                            },
                            {
                                title: 'Environment',
                                value: alertData.env || 'unknown',
                                short: true
                            },
                            {
                                title: 'Service',
                                value: alertData.service || 'unknown',
                                short: true
                            },
                            {
                                title: 'Severity',
                                value: alertData.priority || 'unknown',
                                short: true
                            }
                        ]
                    }
                ]
            };
            
            await fetch(this.webhookUrl, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(message)
            });
        }
    },
    
    // Email integration
    email: {
        sendGridApiKey: 'YOUR_SENDGRID_API_KEY',
        
        sendEmailAlert: async (alertData, recipients) => {
            const email = {
                personalizations: [
                    {
                        to: recipients.map(email => ({ email })),
                        subject: `DataDog Alert: ${alertData.title}`
                    }
                ],
                from: { email: 'alerts@yourapp.com' },
                content: [
                    {
                        type: 'text/html',
                        value: `
                            <h2>DataDog Alert</h2>
                            <p><strong>Alert:</strong> ${alertData.title}</p>
                            <p><strong>Message:</strong> ${alertData.message}</p>
                            <p><strong>Environment:</strong> ${alertData.env}</p>
                            <p><strong>Service:</strong> ${alertData.service}</p>
                            <p><strong>Severity:</strong> ${alertData.priority}</p>
                            <p><strong>Timestamp:</strong> ${new Date(alertData.timestamp).toISOString()}</p>
                        `
                    }
                ]
            };
            
            await fetch('https://api.sendgrid.com/v3/mail/send', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${this.sendGridApiKey}`
                },
                body: JSON.stringify(email)
            });
        }
    },
    
    // PagerDuty integration
    pagerDuty: {
        integrationKey: 'YOUR_PAGERDUTY_INTEGRATION_KEY',
        
        sendPagerDutyAlert: async (alertData) => {
            const incident = {
                routing_key: this.integrationKey,
                event_action: 'trigger',
                dedup_key: `datadog-${alertData.id}`,
                payload: {
                    summary: `${alertData.title}: ${alertData.message}`,
                    source: 'DataDog RUM',
                    severity: alertData.priority === 'critical' ? 'critical' : 'error',
                    component: alertData.service,
                    group: alertData.env,
                    class: 'performance',
                    custom_details: {
                        alert_id: alertData.id,
                        query: alertData.query,
                        value: alertData.value,
                        threshold: alertData.threshold
                    }
                }
            };
            
            await fetch('https://events.pagerduty.com/v2/enqueue', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(incident)
            });
        }
    }
};

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Web Application</title>
</head>
<body>
    <!-- Your application content -->
    
    <!-- DataDog RUM SDK -->
    <script src="https://www.datadoghq-browser-agent.com/datadog-rum.js"></script>
    <script>
        // Initialize DataDog RUM
        (function() {
            // Configuration based on environment
            const config = {
                development: {
                    applicationId: 'dev-application-id',
                    clientToken: 'dev-client-token',
                    env: 'development',
                    sessionSampleRate: 100,
                    sessionReplaySampleRate: 100,
                    debug: true
                },
                staging: {
                    applicationId: 'staging-application-id',
                    clientToken: 'staging-client-token', 
                    env: 'staging',
                    sessionSampleRate: 50,
                    sessionReplaySampleRate: 20,
                    debug: false
                },
                production: {
                    applicationId: 'prod-application-id',
                    clientToken: 'prod-client-token',
                    env: 'production',
                    sessionSampleRate: 20,
                    sessionReplaySampleRate: 5,
                    debug: false
                }
            };
            
            // Detect environment
            function getEnvironment() {
                const hostname = window.location.hostname;
                if (hostname.includes('localhost') || hostname.includes('127.0.0.1')) {
                    return 'development';
                } else if (hostname.includes('staging')) {
                    return 'staging';
                } else {
                    return 'production';
                }
            }
            
            const environment = getEnvironment();
            const rumConfig = config[environment];
            
            // Initialize DataDog RUM
            DD_RUM.onReady(function() {
                DD_RUM.init({
                    ...rumConfig,
                    service: 'your-web-application',
                    version: '1.0.0',
                    trackUserInteractions: true,
                    trackResources: true,
                    trackLongTasks: true,
                    trackFrustrations: true,
                    defaultPrivacyLevel: 'mask-user-input',
                    allowedTracingUrls: [
                        'https://api.yourapp.com',
                        'https://internal-api.yourapp.com'
                    ],
                    beforeSend: (event) => {
                        // Filter or modify events before sending
                        if (event.type === 'error' && event.error.isTrusted === false) {
                            return false; // Drop untrusted errors
                        }
                        return true;
                    }
                });
                
                // Set user context if available
                if (window.currentUser) {
                    DD_RUM.setUser({
                        id: window.currentUser.id,
                        name: window.currentUser.name,
                        email: window.currentUser.email,
                        role: window.currentUser.role
                    });
                }
                
                // Add global context
                DD_RUM.setGlobalContext({
                    page_category: window.pageCategory || 'general',
                    campaign: window.campaign || 'organic'
                });
            });
        })();
    </script>
</body>
</html>

// React integration example
import { useEffect } from 'react';
import { datadogRum } from '@datadog/browser-rum';

// DataDog RUM provider for React
export function DataDogProvider({ children, config }) {
    useEffect(() => {
        // Initialize DataDog RUM
        if (!datadogRum.getInternalContext()) {
            datadogRum.init(config);
        }
        
        // Track route changes
        const originalPushState = history.pushState;
        const originalReplaceState = history.replaceState;
        
        const trackRouteChange = (method) => {
            return function(...args) {
                const url = args[2];
                if (url) {
                    datadogRum.startView({
                        name: document.title,
                        url: url
                    });
                }
                return method.apply(this, args);
            };
        };
        
        history.pushState = trackRouteChange(originalPushState);
        history.replaceState = trackRouteChange(originalReplaceState);
        
        // Track initial view
        datadogRum.startView({
            name: document.title,
            url: window.location.href
        });
        
        return () => {
            history.pushState = originalPushState;
            history.replaceState = originalReplaceState;
        };
    }, [config]);
    
    return children;
}

// Usage in React app
function App() {
    const rumConfig = {
        applicationId: process.env.REACT_APP_DD_APPLICATION_ID,
        clientToken: process.env.REACT_APP_DD_CLIENT_TOKEN,
        site: 'datadoghq.com',
        service: 'react-web-app',
        env: process.env.NODE_ENV,
        version: process.env.REACT_APP_VERSION,
        sessionSampleRate: 100,
        sessionReplaySampleRate: 20,
        trackUserInteractions: true,
        trackResources: true,
        trackLongTasks: true,
        defaultPrivacyLevel: 'mask-user-input'
    };
    
    return (
        <DataDogProvider config={rumConfig}>
            <div className="App">
                {/* Your app components */}
            </div>
        </DataDogProvider>
    );
}

// Custom hook for tracking user interactions
export function useDataDogTracking() {
    const trackUserAction = (actionName, data = {}) => {
        datadogRum.addAction(actionName, {
            ...data,
            timestamp: Date.now()
        });
    };
    
    const trackCustomError = (error, context = {}) => {
        datadogRum.addError(error, {
            ...context,
            timestamp: Date.now()
        });
    };
    
    const trackPerformanceMetric = (metricName, value, unit = 'ms') => {
        datadogRum.addAction('performance_metric', {
            metric_name: metricName,
            metric_value: value,
            metric_unit: unit,
            timestamp: Date.now()
        });
    };
    
    return {
        trackUserAction,
        trackCustomError,
        trackPerformanceMetric
    };
}

// Usage in components
function CheckoutButton({ onCheckout }) {
    const { trackUserAction, trackCustomError, trackPerformanceMetric } = useDataDogTracking();
    
    const handleCheckout = async () => {
        const startTime = performance.now();
        
        try {
            trackUserAction('checkout_started', {
                button_type: 'primary',
                cart_value: getCurrentCartValue()
            });
            
            await onCheckout();
            
            const duration = performance.now() - startTime;
            trackPerformanceMetric('checkout_duration', duration);
            
            trackUserAction('checkout_completed', {
                success: true,
                duration: duration
            });
            
        } catch (error) {
            trackCustomError(error, {
                action: 'checkout',
                cart_value: getCurrentCartValue()
            });
            
            trackUserAction('checkout_failed', {
                error_message: error.message
            });
            
            throw error;
        }
    };
    
    return (
        <button onClick={handleCheckout}>
            Checkout
        </button>
    );
}

// Enhanced API monitoring with DataDog RUM
class ApiMonitor {
    constructor() {
        this.setupInterceptors();
        this.metrics = new Map();
        this.errorCounts = new Map();
    }
    
    setupInterceptors() {
        // Fetch interceptor
        const originalFetch = window.fetch;
        window.fetch = async (...args) => {
            const url = args[0];
            const options = args[1] || {};
            const startTime = performance.now();
            
            try {
                const response = await originalFetch.apply(this, args);
                const duration = performance.now() - startTime;
                
                this.trackApiCall(url, options.method || 'GET', duration, response);
                return response;
                
            } catch (error) {
                const duration = performance.now() - startTime;
                this.trackApiError(url, options.method || 'GET', duration, error);
                throw error;
            }
        };
        
        // XMLHttpRequest interceptor
        const originalXHR = window.XMLHttpRequest;
        window.XMLHttpRequest = function() {
            const xhr = new originalXHR();
            const startTime = performance.now();
            
            // Track request details
            let method, url;
            xhr.open = function(_method, _url, ...args) {
                method = _method;
                url = _url;
                return originalXHR.prototype.open.apply(xhr, [method, url, ...args]);
            };
            
            xhr.addEventListener('loadend', () => {
                const duration = performance.now() - startTime;
                const success = xhr.status >= 200 && xhr.status < 300;
                
                this.trackApiCall(url, method, duration, {
                    ok: success,
                    status: xhr.status
                });
            });
            
            xhr.addEventListener('error', () => {
                const duration = performance.now() - startTime;
                this.trackApiError(url, method, duration, new Error('Network error'));
            });
            
            return xhr;
        }.bind(this);
    }
    
    trackApiCall(url, method, duration, response) {
        // Extract endpoint name
        const endpoint = this.extractEndpoint(url);
        
        // Track in DataDog
        datadogRum.addAction('api_call', {
            endpoint: endpoint,
            method: method,
            duration: duration,
            status: response.status || (response.ok ? 200 : 500),
            success: response.ok,
            size: response.headers?.get('content-length') || 0,
            timestamp: Date.now()
        });
        
        // Track metrics for alerting
        this.updateEndpointMetrics(endpoint, duration, response.ok);
        
        // Check for slow API calls
        if (duration > 2000) {
            datadogRum.addError(new Error(`Slow API call: ${endpoint}`), {
                endpoint: endpoint,
                method: method,
                duration: duration,
                threshold: 2000,
                severity: 'warning'
            });
        }
    }
    
    trackApiError(url, method, duration, error) {
        const endpoint = this.extractEndpoint(url);
        
        datadogRum.addError(error, {
            endpoint: endpoint,
            method: method,
            duration: duration,
            error_type: this.categorizeApiError(error),
            timestamp: Date.now()
        });
        
        // Track error counts for alerting
        const errorKey = `${endpoint}:${method}`;
        const count = (this.errorCounts.get(errorKey) || 0) + 1;
        this.errorCounts.set(errorKey, count);
        
        // Alert on high error rates
        if (count >= 10) {
            datadogRum.addError(new Error(`High error rate for ${endpoint}`), {
                endpoint: endpoint,
                error_count: count,
                time_window: '5_minutes',
                severity: 'critical'
            });
        }
    }
    
    extractEndpoint(url) {
        try {
            const urlObj = new URL(url);
            return urlObj.pathname;
        } catch {
            return url;
        }
    }
    
    categorizeApiError(error) {
        if (error.name === 'TypeError' && error.message.includes('fetch')) {
            return 'network_error';
        } else if (error.message.includes('4')) {
            return 'client_error';
        } else if (error.message.includes('5')) {
            return 'server_error';
        } else {
            return 'unknown_error';
        }
    }
    
    updateEndpointMetrics(endpoint, duration, success) {
        if (!this.metrics.has(endpoint)) {
            this.metrics.set(endpoint, {
                totalCalls: 0,
                successfulCalls: 0,
                totalDuration: 0,
                errorRate: 0,
                averageDuration: 0
            });
        }
        
        const metrics = this.metrics.get(endpoint);
        metrics.totalCalls++;
        if (success) {
            metrics.successfulCalls++;
        }
        metrics.totalDuration += duration;
        metrics.averageDuration = metrics.totalDuration / metrics.totalCalls;
        metrics.errorRate = (metrics.totalCalls - metrics.successfulCalls) / metrics.totalCalls;
    }
    
    getEndpointMetrics() {
        const summary = {
            endpoints: [],
            totalCalls: 0,
            totalErrors: 0,
            averageResponseTime: 0
        };
        
        let totalDuration = 0;
        
        this.metrics.forEach((metrics, endpoint) => {
            summary.endpoints.push({
                endpoint: endpoint,
                ...metrics
            });
            
            summary.totalCalls += metrics.totalCalls;
            summary.totalErrors += (metrics.totalCalls - metrics.successfulCalls);
            totalDuration += metrics.totalDuration;
        });
        
        summary.averageResponseTime = summary.totalCalls > 0 
            ? totalDuration / summary.totalCalls 
            : 0;
        
        return summary;
    }
}

// Initialize API monitoring
const apiMonitor = new ApiMonitor();

// Track API metrics periodically
setInterval(() => {
    const metrics = apiMonitor.getEndpointMetrics();
    datadogRum.addAction('api_metrics_summary', metrics);
}, 60000); // Every minute