Error Reporting

This document covers exception types, capture mechanisms, manual reporting methods, React integration, and the data structure definition for reported exceptions.

Exception Types

RUM can monitor the following types of exceptions:

JavaScript Exceptions
Network Exceptions
Resource Loading Exceptions
Custom Exceptions

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

Reporting Methods

Automatic Error Capture

RUM SDK automatically captures the following types of browser errors:

Error Type	Description
Uncaught Exceptions	JavaScript exceptions thrown at runtime (e.g., `TypeError`, `ReferenceError`)
Unhandled Promise Rejections	Promise errors not handled by `.catch()`
Network Errors	XHR or Fetch request failures (e.g., 4xx, 5xx status codes or network interruption)
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. Applicable Scenarios:

Log handled errors in business logic
Attach context information (such as user ID, page state) for troubleshooting
Monitor exceptions from third-party services or asynchronous operations

// Report custom error with context
const error = new Error("Login failed");
window.FC_RUM.addError(error, {
  pageStatus: "beta",
  userId: "12345",
  action: "login_attempt",
});

fetch("https://api.example.com/data").catch((error) => {
  window.FC_RUM.addError(error, {
    requestUrl: "https://api.example.com/data",
    method: "GET",
  });
});

try {
  // Business logic that might throw an exception
  riskyOperation();
} catch (error) {
  window.FC_RUM.addError(error, {
    operation: "riskyOperation",
    timestamp: Date.now(),
  });
}

React Error Boundary Integration

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.

Create Error Boundary Component

class ErrorBoundary extends React.Component {
  componentDidCatch(error, info) {
    const renderingError = new Error(error.message);
    renderingError.name = "ReactRenderingError";
    renderingError.stack = info.componentStack; // Component stack
    renderingError.cause = error; // Original error

    window.FC_RUM.addError(renderingError, {
      component: this.props.componentName || "Unknown",
      version: "1.0.0",
    });
  }

  render() {
    return this.props.children;
  }
}

Wrap Components with Error Boundary

<ErrorBoundary componentName="UserProfile">
  <UserProfile />
</ErrorBoundary>

Error Data Structure

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

string

Error source (e.g., console, network, custom, source, report)

string

Error type or error code (e.g., TypeError, NetworkError)

string

Concise, readable error message

string

Error stack trace or supplementary information

Array

List of related errors providing additional context (optional)

Object

Custom context information (e.g., page state, user ID), passed via addError

Error Filtering and Configuration

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

Default Filtering Rules

Only processes errors with source of custom, source, report, or console
Ignores irrelevant errors from browser extensions, third-party scripts, or network source

Stack Requirements

Errors must contain stack trace information, otherwise they may be ignored

Custom Filtering

Use beforeSend callback to customize error handling logic, filtering or modifying error data

Custom Error Filtering Example

window.FC_RUM.init({
  beforeSend: (event) => {
    if (event.type === "error") {
      // Ignore specific error messages
      if (event.error.message.includes("ThirdPartyScript")) {
        return false; // Discard this error
      }
      // Add global context
      event.context = { ...event.context, appVersion: "2.1.0" };
    }
    return true;
  },
});

FAQ

Why aren't some errors being grouped?

Confirm stack trace is complete, or check if custom fingerprints conflict
Check if sourcemap is correctly uploaded; if not, stacks may not be parsed correctly

How to reduce third-party script error noise?

Use beforeSend callback to filter specific error sources or messages:

beforeSend: (event) => {
  if (event.error.source === "network") return false;
  return true;
};

What if custom grouping isn't working?

Ensure fingerprint attribute is correctly set and value is a string
Check if beforeSend callback is being called correctly

Best Practices

Enrich Context Information

Attach business-related context in addError (such as user ID, action type) for easier problem location.Example: { userId: "12345", action: "submit_form" }

Optimize Error Boundaries

Configure error boundaries for key React components to ensure rendering errors are captured. Record component names and versions for easier issue tracking.

Control Error Volume

Use sampling rates or beforeSend to filter low-value errors and avoid data overload. Prioritize monitoring critical errors affecting user experience.

Analysis & Visualization

View error data trends and distribution in the “Insights” - “Exception Analysis” Tab to resolve key exception issues.

Next Steps

View Exceptions

Learn how to view and analyze Issues in the error tracking module

首页

产品简介

通用配置

开发者

安全合规

更新日志

Exception Types

Reporting Methods

Automatic Error Capture

Manual Error Reporting

React Error Boundary Integration

Error Data Structure

Error Filtering and Configuration

Custom Error Filtering Example

FAQ

Best Practices

Enrich Context Information

Optimize Error Boundaries

Control Error Volume

Analysis & Visualization

Next Steps

View Exceptions

​Exception Types

​Reporting Methods

​Automatic Error Capture

​Manual Error Reporting

​React Error Boundary Integration

​Error Data Structure

​Error Filtering and Configuration

​Custom Error Filtering Example

​FAQ

​Best Practices

Enrich Context Information

Optimize Error Boundaries

Control Error Volume

Analysis & Visualization

​Next Steps

View Exceptions

Exception Types

Reporting Methods

Automatic Error Capture

Manual Error Reporting

React Error Boundary Integration

Error Data Structure

Error Filtering and Configuration

Custom Error Filtering Example

FAQ

Best Practices

Next Steps