Flashduty Docs
中文EnglishRoadmapAPI官网控制台
中文EnglishRoadmapAPI官网控制台
  1. Performance Monitoring
  • Introduction
  • On-call
    • Getting Started
      • Quick start
      • FAQ
      • Product Comparison
    • Incidents
      • What is an Incident
      • View Incidents
      • Handle Incidents
      • Escalations and Assignments
      • Custom Fields
      • Custom Actions
      • Alert Noise Reduction
      • Past Incidents
      • Outlier Incidents
    • Configure On-call
      • Channels
      • Integrate Alerts
      • Alert Noise Reduction
      • Escalation Rules
      • Label Enrichment
      • Schedules
      • Templates
      • Service Calendars
      • Preferences
      • Alert Routing
      • Silence and Inhibition
      • Filters
      • Notification Bots
      • Alert Pipeline
    • Advanced Features
      • Referencing Variables
      • Dynamic Assignment
      • Insights
    • Integrations
      • Alerts integration
        • Standard Alert Integration
        • Email Integration
        • Nightingale/FlashCat Integration
        • Prometheus Integration
        • Grafana Integration
        • Zabbix Integration
        • Uptime Kuma Integration
        • Alibaba Cloud ARMS Integration
        • Alibaba Cloud Monitor CM Event Integration
        • Alibaba Cloud Monitor CM Metrics Integration
        • Alibaba Cloud SLS Integration
        • AWS CloudWatch Integration
        • Azure Monitor Integration
        • Baidu Cloud BCM Integration
        • Huawei Cloud CES Integration
        • Influxdata Integration
        • Open Falcon Integration
        • PagerDuty Integration
        • Tencent BlueKing Integration
        • Tencent Cloud CLS Integration
        • Tencent Cloud Monitor CM Integration
        • Tencent Cloud EventBridge
        • OceanBase Integration
        • Graylog Integration
        • Skywalking Integration
        • Sentry Integration
        • Jiankongbao Integration
        • AWS EventBridge Integration
        • Dynatrace Integration
        • Huawei Cloud LTS Integration
        • GCP Integration
        • Splunk Alert Events Integration
        • AppDynamics Alert Integration
        • SolarWinds Alert Events Integration
        • Volcengine CM Alert Events Integration
        • Volcengine CM Event Center Integration
        • Volcengine TLS Integration
        • OpManager Integration
        • Meraki Integration
        • Keep Integration
        • ElastAlert2 Alert Integration
        • StateCloud Alert Events
        • Guance Alert Events
        • Zilliz Alert Events
        • Huawei Cloud APM Alerts
        • zstack integration
      • Change integration
        • Standard Change Event
        • Jira Issue Events
      • IM integration
        • Feishu (Lark) Integration Guide
        • Dingtalk Integration
        • WeCom Integration
        • Slack Integration
        • Microsoft Teams Integration
      • Single Sign-On
        • Authing Integration
        • Keycloak Guide
        • OpenLDAP Guide
      • Webhooks
        • Alert webhook
        • Incident webhook
        • Costom action
  • RUM
    • Getting Started
      • Introduction
      • Quick start
      • FAQ
    • Applications
      • Applications
      • SDK Integration
      • Advanced Configuration
      • Analysis Dashboard
    • Performance Monitoring
      • Overview
      • Metrics
      • Performance Analysis
      • Performance Optimize
    • Error Tracking
      • Overview
      • Error Reporting
      • Issues
      • Source Mapping
      • Error Grouping
      • Issue States
      • Issue Alerting
    • Others
      • Terminology
      • Data Collection
      • Data Security
  • Platform
    • Teams and Members
    • Permissions
    • Single Sign-On
  • Terms
    • Terms of Service
    • User Agreement/Privary Policy
    • SLA
    • Data Security
  1. Performance Monitoring

Overview

Overview#

Flashduty RUM (Real User Monitoring) provides powerful tools to help you quickly diagnose and optimize frontend performance issues. The performance monitoring module allows you to quickly identify performance bottlenecks, locate root causes, and implement optimization measures to ensure a smooth experience for your users.

Core Features#

1.
Performance metrics monitoring: Automatically collects and analyzes key performance metrics (such as FCP, LCP, CLS, FID, etc.), providing a comprehensive view of performance data to help you understand the overall performance of your website.
2.
Resource loading analysis: Monitors and analyzes the loading performance of static resources (such as JS, CSS, images, etc.), identifies slowly loading resources, and provides optimization suggestions.
3.
API performance tracking: Tracks and analyzes the performance of backend API calls, including metrics such as response time and success rate, to help optimize interface performance.
4.
Performance issue diagnosis: Provides comprehensive performance issue diagnosis capabilities, including performance bottleneck analysis, resource loading optimization suggestions, API call analysis, etc., helping you quickly locate and resolve performance issues.

Value and Benefits#

1.
Improve user experience: Optimize website performance, reduce page loading time, and increase user satisfaction.
2.
Increase conversion rates: Improve website performance to increase user retention and conversion rates.
3.
Data-driven decisions: Make optimization decisions based on performance data and continuously improve product performance.

Use Cases#

1.
Performance optimization: Identify and solve website performance bottlenecks to improve overall performance.
2.
Resource optimization: Analyze and optimize static resource loading to increase page loading speed.
3.
API optimization: Monitor and optimize backend API performance to improve interface response speed.
4.
User experience analysis: Understand user experience through performance data and make targeted product improvements.

Performance Monitoring Process#

Flashduty RUM's performance optimization consists of three key phases: Issue Identification, Data Collection, and Issue Localization. Through this systematic approach, you can efficiently resolve performance issues.

1. Issue Identification#

Quickly discovering the triggers for performance issues is the first step in diagnosis. Flashduty RUM provides the following ways to help you identify issues:
Data analysis: View data trends of core performance metrics (such as LCP, FID, or INP) through the "Application Management - Data Analysis" module to identify anomalies or performance bottlenecks.
User feedback: Discover potential issues through user reports (such as slow page loading or interaction lag).
Anomaly detection: Observe abnormal trends in "Application Management - Data Analysis," such as increased resource loading failure rates or extended API response times.
2025-05-15-19-59-04

Initial Assessment#

Impact scope: Determine the user groups affected by the issue (e.g., specific regions, devices, or browsers).
Severity: Assess the direct impact of the issue on user experience.
Business impact: Analyze the impact of the issue on key business metrics (such as conversion rate or user retention).

2. Data Collection#

Flashduty RUM provides rich performance data and contextual information to help you fully understand the problem background.

Core Performance Data#

Page loading metrics: Including LCP (Largest Contentful Paint), FCP (First Contentful Paint), TTI (Time to Interactive).
Resource loading time: Analysis of loading times for images, scripts, CSS, and other resources.
JavaScript performance: Monitoring script execution time and scripts that block rendering.
Network requests: Recording API request latency, success rates, and error rates.

Contextual Information#

User environment: Browser type, device model, operating system, and network conditions.
Error logs: Capture detailed information about JavaScript errors, network errors, and resource loading failures.
System resources: Analysis of CPU usage, memory consumption, and DOM operation frequency.

3. Issue Localization and Classification#

Through Flashduty RUM's visualization tools and analysis features, you can categorize performance issues and precisely locate root causes. Here are common types of issues and their characteristics:
Issue TypeTypical ManifestationPossible CausesKey Metrics
Slow page loadingLong white screen time, slow first render- Oversized resources
- Render-blocking scripts or CSS
- Slow server response		LCP, FCP, TTI
Interaction delaysNo response to clicks, operation lag- Long JavaScript execution time
- Too many event listeners
- Frequent DOM operations		FID, INP, TBT
Resource loading abnormalitiesImage/script loading failure, timeout- CDN configuration errors
- Unstable network
- Incorrect resource paths		Resource loading time, Failure rate, DNS resolution time
JavaScript errorsFunctionality failure, console errors- Code logic errors
- Browser compatibility issues
- Memory leaks		Error rate, Memory usage, CPU usage
Network connection issuesRequest timeout, connection interruption- Slow API response
- Poor network quality
- Cross-domain configuration errors		Request latency, Connection success rate, Bandwidth usage

Issue Localization Tools#

Flashduty RUM provides multiple tools to help you deeply analyze performance issues and locate root causes.

1. Performance Waterfall Chart#

The performance waterfall chart shows the complete timeline of page loading, helping you identify bottlenecks.
2025-05-15-19-59-45

Key Timestamps#

Navigation start: The time when the user initiates the page request.
DNS lookup: Time spent on domain name resolution.
TCP connection: Time spent establishing a connection to the server.
Time to First Byte (TTFB): Time spent receiving the first byte of the server response.
DOM complete: The time when the page DOM structure is fully loaded.

Resource Loading Analysis#

Critical path: Identify critical resources affecting page rendering.
Blocking resources: Discover scripts or stylesheets that block rendering.
Loading order: Optimize resource loading priorities.
Resource size: Check for oversized resources.

2. Error Analysis#

Flashduty RUM captures and categorizes frontend errors, providing detailed contextual information.

Error Types#

JavaScript runtime errors: Such as uncaught exceptions or syntax errors.
Network request errors: Such as API timeouts or 4xx/5xx errors.
Resource loading errors: Such as image or script loading failures.
Framework-related errors: Such as component rendering errors in React or Vue.

Error Context#

Error stack: Provides detailed call stack information.
User action sequence: Recreates the operation path that triggered the error.
Environment information: Includes browser, device, and network status.
Related performance data: Associates errors with changes in performance metrics.

Optimization Suggestions#

After locating the root cause of an issue, you can implement optimizations based on Flashduty RUM's analysis results. Here are some common optimization directions:
Slow page loading: Compress resources, optimize critical CSS, enable CDN.
Interaction delays: Reduce JavaScript execution time, optimize event listeners.
Resource loading abnormalities: Check CDN configuration, ensure resource paths are correct.
JavaScript errors: Fix code logic, add error boundaries, optimize memory usage.
Network connection issues: Optimize API performance, implement retry mechanisms.

Next Steps#

Metrics Reporting
Performance Analysis
Diagnosis and Optimization

添加官方技术支持微信

在这里，获得使用上的任何帮助，快速上手FlashDuty

微信扫码交流
上一页
Analysis Dashboard
下一页
Metrics
Built with