RUM Analysis Dashboard

Overview

Flashduty RUM analysis dashboard provides out-of-the-box visualization dashboards that automatically collect and analyze multi-dimensional data including user sessions, performance, resources, and errors, helping you fully understand your application's real-world performance, quickly locate performance bottlenecks and abnormal issues, and continuously optimize user experience.

The analysis dashboard primarily includes 4 analytical dimensions: Overview, Performance Analysis, Error Analysis, and Resource Analysis.

1. Overview — Key Metrics at a Glance

The overview module focuses on the core metrics of your application across multiple dimensions, including:

Traffic Metrics: Monitor PV (page views), UV (unique visitors), and session count to help you grasp overall access trends.

User Distribution: Combine geographic location, device type, and other information to gain insights into user sources and active regions.

Health and Performance Metrics: Highlight three browser performance metrics: Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift.

Anomalies and Errors: Statistics on various error rates to quickly identify potential risk points and ensure application stability.

2. Performance Analysis — Comprehensive Control of Application Experience

The performance analysis module focuses on full-chain monitoring of application loading and interaction experience, including:

Page Performance: Monitor trends and sample distribution of core page loading metrics such as FCP, LCP, CLS, and FCP.

Long Tasks: A long animation frame is when a rendering update is delayed beyond 50 milliseconds.

XHR and Fetch Requests: Analyze the loading performance of XHR and Fetch interfaces to locate slow interfaces.

Static Resources: Analyze the loading time of static resources to identify performance bottlenecks during application loading.

For more information about the displayed data, see Data Collection.

3. Error Analysis — Fast Location and Diagnosis of Errors

The error analysis module provides you with comprehensive error monitoring and diagnostic capabilities, including:

Page Error Rate: Pages with the most errors, helping you identify which pages need priority attention.

Top Issues: Ranking of issues affecting the most users, helping you identify problems that need priority attention. If you need to understand the issue grouping strategy, check Error Grouping.

Code Errors: Categorized display of error types. If you need to dig deeper, refer to Error Tracking to investigate critical frontend errors and understand when new errors appear.

API and Resource Errors: Monitor which APIs and static resources produce the most errors.

4. Resource Analysis — Fine-grained Resource Optimization

The resource analysis module helps you identify which resources have the greatest impact on your application:

Resource Ranking: Monitor the most loaded and heaviest resources to identify optimization priorities.

Resource Loading Timeline: Monitor resource timing trends collected by the browser SDK (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 resource address (host) does not match the current page address (host) are identified as third-party resources.

Frequently Asked Questions

Why is the size or timing data for some resources 0?

Connection Reuse (Keep-Alive): When resource requests use keep-alive to maintain connections, DNS queries and TCP connection processes only occur on the first request, with subsequent requests reusing the same connection, so related data may not be recorded or may be 0.

Cross-origin Resource Loading: If resources are loaded cross-origin without configuring related header information, the browser cannot collect complete performance data. This is the main reason for missing data.

Browser Compatibility: In rare cases, some browsers may not support the Performance API, making it impossible to obtain resource-related performance data.

Why is the `resource_status` for some resources 0?

Cross-origin Resource Loading: If resources are loaded cross-origin without setting cross-origin access permissions, the browser cannot obtain resource status information.

Browser Compatibility: Some browsers may not support the Performance API, preventing relevant data collection (extremely rare).

How to solve missing data for cross-origin resources?

Support collecting timing data for cross-origin resources

Add Timing-Allow-Origin to the HTTP response headers of cross-origin resources

Timing-Allow-Origin: *

For more information on CORS, see Resource Timing API in the MDN Web Docs.

Support collecting status codes for cross-origin resources

Add Access-Control-Allow-Origin to the HTTP response headers of cross-origin resources

Access-Control-Allow-Origin: *

Add crossorigin="anonymous" to the HTML tag referencing the resource, such as:

For detailed information, see Access-Control-Allow-Origin header and crossorigin attribute in the MDN Web Docs.

How to collect user information

Logged-in User Identification: For applications requiring user login (such as SaaS products, membership systems, e-commerce platforms, etc.), you can refer to User Identification Collection

Device Fingerprint Identification: For applications without login state (such as corporate websites, marketing pages, public content platforms, etc.), it is recommended to generate stable fingerprints based on browser characteristics, device information, and other multi-dimensional data and report user identifiers

Analysis Dashboard

Overview#

1. Overview — Key Metrics at a Glance#

2. Performance Analysis — Comprehensive Control of Application Experience#

3. Error Analysis — Fast Location and Diagnosis of Errors#

4. Resource Analysis — Fine-grained Resource Optimization#

Frequently Asked Questions#

Why is the size or timing data for some resources 0?#

Why is the resource_status for some resources 0?#

How to solve missing data for cross-origin resources?#

How to collect user information#