Skip to main content

​
Overview

Flashduty RUM Insights dashboard provides out-of-the-box visualization dashboards that automatically collect and analyze multi-dimensional data including user sessions, performance, resources, and errors. This helps you gain comprehensive insights into your application’s real-world performance, quickly identify performance bottlenecks and issues, and continuously optimize user experience. The Insights dashboard includes four main analysis dimensions:

Overview

Key metrics at a glance

Performance Analysis

Comprehensive application experience monitoring

Error Analysis

Quick error identification and diagnosis

Resource Analysis

Fine-grained resource optimization

​
Overview

RUM Insights Overview
The Overview module focuses on core metrics across multiple dimensions:
Metric TypeDescription
Traffic MetricsMonitor PV (Page Views), UV (Unique Visitors), and sessions to understand overall traffic trends
User DistributionGain insights into user sources and active regions based on geographic location and device types
Health & Performance MetricsDisplay Core Web Vitals: LCP (Largest Contentful Paint), FID (First Input Delay), CLS (Cumulative Layout Shift)
Errors & ExceptionsTrack error rates by type to quickly identify potential risk areas

​
Performance Analysis

RUM Performance Analysis
The Performance Analysis module focuses on full-chain monitoring of application loading and interaction experience:
  • Page Performance: Monitor trends and sample distribution of core page loading metrics like FCP, LCP, and CLS
  • Long Tasks: Long Animation Frames where rendering updates are delayed beyond 50 milliseconds
  • XHR and Fetch Requests: Analyze API loading performance to identify slow endpoints
  • Static Resources: Analyze static resource loading times to identify performance bottlenecks during application loading
For more information about the displayed data, see Data Collection.

​
Error Analysis

RUM Error Analysis
The Error Analysis module provides comprehensive error monitoring and diagnosis capabilities:
  • Page Error Rate: Pages with the most errors, helping you prioritize which pages need attention
  • Top Issues: Issues affecting the most users, see Error Grouping for details
  • Code Errors: Categorized display of error types, see Error Tracking for details
  • API and Resource Errors: Monitor which APIs and static resources generate the most errors

​
Resource Analysis

RUM Resource Analysis
The Resource Analysis module helps you identify resources that have the greatest impact on your application:
  • Resource Ranking: Monitor the most frequently loaded and heaviest resources to identify optimization priorities
  • Resource Loading Timeline: Monitor resource timing trends (DNS resolution, TCP connection, loading time, etc.)
  • XHR and Fetch Requests: Distinguish distribution trends of different request types, methods, and error status codes
  • Third-party Resources: Resources where the host address doesn’t match the current page host are identified as third-party resources

​
FAQ

This may occur due to:
  1. Connection Reuse (Keep-Alive): When resource requests use keep-alive to maintain connections, DNS lookups and TCP connection processes only occur on the first request, with subsequent requests reusing the same connection
  2. Cross-origin Resources: If resources are loaded cross-origin without the appropriate headers configured, the browser cannot collect complete performance data (primary cause)
  3. Browser Compatibility: In rare cases, some browsers may not support the Performance API
  1. Cross-origin Resources: If resources are loaded cross-origin without cross-origin access permissions set, the browser cannot obtain resource status information
  2. Browser Compatibility: Some browsers may not support the Performance API (rare)
1. Collect timing data for cross-origin resourcesAdd the following to the HTTP response headers of cross-origin resources:
Timing-Allow-Origin: *
See MDN documentation Resource Timing API.2. Collect status codes for cross-origin resourcesAdd the following to the HTTP response headers of cross-origin resources:
Access-Control-Allow-Origin: *
Add crossorigin="anonymous" to the HTML tags that reference the resource:
<img src="https://static.example.com/logo.png" crossorigin="anonymous" />
See MDN documentation Access-Control-Allow-Origin and crossorigin attribute.
Logged-in User IdentificationFor applications that require user login (such as SaaS products, membership systems, e-commerce platforms, etc.), see User Sessions.Device Fingerprint IdentificationFor applications without login state (such as corporate websites, marketing pages, etc.), we recommend generating stable fingerprints based on multi-dimensional data like browser characteristics and device information, then reporting them as user identifiers.