Flashduty RUM Error Reporting

Overview

This document introduces error types, capture mechanisms, manual reporting methods, React integration, and the definition of reported error data structures.

Error Types

Flashduty RUM can monitor the following types of errors:

JavaScript Errors

Includes code syntax errors, runtime exceptions, and unhandled Promise exceptions. These issues may cause page functionality to fail, severely affecting user experience.

Network Errors

Monitors communication issues with backend services or third-party APIs:

XHR/Fetch request failures

Request timeouts

Cross-origin (CORS) errors

HTTP 4xx/5xx status codes

Resource Loading Errors

Monitors cases where web page resources fail to load:

Image loading failures

Script loading failures

Stylesheet loading failures

Font file loading failures

Custom Errors

In addition to automatically captured errors, you can manually report custom errors using the RUM SDK to track specific issues such as business logic errors.

Reporting Methods

Automatic Error Capture

Flashduty RUM SDK automatically captures the following types of browser errors:

Uncaught exceptions: JavaScript exceptions thrown at runtime (such as TypeError, ReferenceError).

Unhandled Promise rejections: Promise errors not handled by .catch().

Network errors: XHR or Fetch request failures (such as 4xx, 5xx status codes or network interruptions).

React rendering errors: Exceptions during React component rendering (requires error boundaries).

提示

Automatically captured errors include stack traces, error messages, and source information by default.

Errors from browser extensions or third-party scripts (such as network source) are filtered to avoid data pollution.

Manual Error Reporting

Through the addError API, you can manually report handled exceptions, custom errors, or other errors not automatically captured. Manual reporting is suitable for the following scenarios:

Recording handled errors in business logic.

Attaching contextual information (such as user ID, page state) for troubleshooting.

Monitoring exceptions from third-party services or asynchronous operations.

Example: Reporting Custom Errors

Example: Reporting Network Errors

Example: Reporting Handled Exceptions

React Error Boundary Integration

Flashduty RUM supports capturing component rendering errors through React error boundaries and reporting error information. You can call the addError API in componentDidCatch, attaching component stack information for debugging.

Example: React Error Boundary

Usage

Error Data Structure

Each error record contains the following properties to describe error details and context:

Property	Type	Description
`error.source`	string	Error source (such as `console`, `network`, `custom`, `source`, `report`).
`error.type`	string	Error type or error code (such as `TypeError`, `NetworkError`).
`error.message`	string	Concise, highly readable error message.
`error.stack`	string	Error stack trace or supplementary information.
`error.causes`	Array	List of associated errors providing additional context (optional).
`context`	Object	Custom contextual information (such as page state, user ID), passed through `addError`.

Error Filtering and Configuration

To ensure the accuracy and relevance of error data, Flashduty RUM applies the following filtering rules:

Default filtering:

Only process errors with source as custom, source, report, or console.

Ignore irrelevant errors from browser extensions, third-party scripts, or network sources.

Stack requirement: Errors must contain stack trace information, otherwise they may be ignored.

Custom filtering:

Use the beforeSend callback to customize error handling logic, filter or modify error data.

Example: Custom Error Filtering

FAQ and Best Practices

FAQ

Why are some errors not aggregated?

Confirm whether the stack trace is complete, or if custom fingerprints conflict.

Check if sourcemap is correctly uploaded; if not, the stack may not be properly resolved.

How to reduce noise from third-party script errors?

Use the beforeSend callback to filter specific error sources or messages.

Example:

What if custom grouping doesn't work?

Ensure the fingerprint property is correctly set and its value is a string.

Check if the beforeSend callback is being correctly called.

Best Practices

Enrich contextual information:

Attach business-related context (such as user ID, operation type) in addError to facilitate problem localization.

Example: { userId: "12345", action: "submit_form" }.

Optimize error boundaries:

Configure error boundaries for critical React components to ensure rendering errors are captured.

Record component names and versions to track issues.

Control error volume:

Use sampling rates or beforeSend to filter low-value errors and avoid data overload.

Prioritize monitoring critical errors that impact user experience.

Analysis and visualization:

View error data trends and distribution in the "Analysis Dashboard" - "Error Analysis" tab.

View error rankings under different error categories in the dashboard to resolve key exception issues.

Next Steps

View Errors

Error Reporting

Flashduty RUM Error Reporting#

Overview#

Error Types#

JavaScript Errors#

Network Errors#

Resource Loading Errors#

Custom Errors#

Reporting Methods#

Automatic Error Capture#

Manual Error Reporting#

Example: Reporting Custom Errors#

Example: Reporting Network Errors#

Example: Reporting Handled Exceptions#

React Error Boundary Integration#

Example: React Error Boundary#

Usage#

Error Data Structure#

Error Filtering and Configuration#

Example: Custom Error Filtering#

FAQ and Best Practices#

FAQ#

Best Practices#

Next Steps#

Flashduty RUM Error Reporting

Overview

Error Types

JavaScript Errors

Network Errors

Resource Loading Errors

Custom Errors

Reporting Methods

Automatic Error Capture

Manual Error Reporting

Example: Reporting Custom Errors

Example: Reporting Network Errors

Example: Reporting Handled Exceptions

React Error Boundary Integration

Example: React Error Boundary

Usage

Error Data Structure

Error Filtering and Configuration

Example: Custom Error Filtering

FAQ and Best Practices

FAQ

Best Practices

Next Steps