Skip to main content
This document covers error types, capture mechanisms, manual reporting methods, React integration, and the error data structure definition.

​
Error Types

RUM can monitor the following types of errors:
Includes syntax errors, runtime exceptions, and unhandled Promise rejections. These issues can cause page functionality to fail, severely impacting user experience.

​
Reporting Methods

​
Automatic Error Capture

RUM SDK automatically captures the following types of browser errors:
Error TypeDescription
Uncaught exceptionsRuntime JavaScript exceptions (e.g., TypeError, ReferenceError)
Unhandled Promise rejectionsPromise errors not handled by .catch()
Network errorsXHR or Fetch request failures (e.g., 4xx, 5xx status codes or network interruption)
React rendering errorsExceptions 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 (e.g., network source) are filtered to avoid data pollution.

​
Manual Error Reporting

Using the addError API, you can manually report handled exceptions, custom errors, or other errors not automatically captured. Use cases:
  • Record handled errors in business logic
  • Attach context information (e.g., user ID, page state) for troubleshooting
  • Monitor exceptions from third-party services or async operations
// Report a custom error with context
const error = new Error("Login failed");
window.FC_RUM.addError(error, {
  pageStatus: "beta",
  userId: "12345",
  action: "login_attempt",
});

​
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 to attach component stack information for debugging.
1

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;
  }
}
2

Wrap Components with Error Boundary

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

​
Error Data Structure

Each error record contains the following attributes describing error details and context:
​
error.source
string
Error source (e.g., console, network, custom, source, report)
​
error.type
string
Error type or error code (e.g., TypeError, NetworkError)
​
error.message
string
Concise, human-readable error message
​
error.stack
string
Error stack trace or supplementary information
​
error.causes
Array
List of related errors providing additional context (optional)
​
context
Object
Custom context information (e.g., page state, user ID) passed via addError

​
Error Filtering and Configuration

To ensure error data accuracy and relevance, RUM applies the following 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
Errors must contain stack trace information, otherwise they may be ignored
Use the beforeSend callback to customize error handling logic, filter or modify 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;
  },
});

​
Frequently Asked Questions

  • Check if the stack trace is complete, or if custom fingerprints conflict
  • Verify that sourcemaps are correctly uploaded; if not, stacks may not be properly parsed
Use the beforeSend callback to filter specific error sources or messages:
beforeSend: (event) => {
  if (event.error.source === "network") return false;
  return true;
};
  • Ensure the fingerprint property is correctly set and the value is a string
  • Check if the beforeSend callback is being called correctly

​
Best Practices

Enrich Context Information

Attach business-related context in addError (e.g., user ID, action type) for easier troubleshooting.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 for easier tracking.

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 Analytics Dashboard - Error Analysis tab to address key issues.

​
Next Steps

View Errors

Learn how to view and analyze Issues in the Error Tracking module