Senior LevelReact JS & React 19
How do you integrate enterprise telemetry (Sentry/Datadog) into React Error Boundaries with source maps?
❓ Interview Prompt: Explain Error Boundary telemetry, `componentDidCatch`, `Sentry.captureException()`, `componentStack`, and hidden production source maps.
Integrating production telemetry into React Error Boundaries:
Telemetry Integration Pattern:
1
Capture 'error' and 'errorInfo.componentStack' inside 'componentDidCatch'.
2
Forward component stack trace to Sentry / Datadog RUM.
3
Source Maps: Upload hidden production build source maps to Sentry so minified stack traces ('at a (main.js:1:500)') decode into readable source code file paths!
Code Implementation Example
jsx
import React from 'react';
import * as Sentry from '@sentry/react';
class TelemetryErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() { return { hasError: true }; }
componentDidCatch(error, errorInfo) {
// Send error and component stack trace to Sentry telemetry!
Sentry.captureException(error, { extra: { componentStack: errorInfo.componentStack } });
}
render() {
return this.state.hasError ? <FallbackUI /> : this.props.children;
}
}💡Logging component stack traces to Sentry in Error Boundaries.
🎯 Interview Key Takeaway
Forward componentStack to Sentry in componentDidCatch and upload production source maps for decoded stack traces.
#Error Boundary#Sentry#Telemetry#Source Maps#Senior
Back to all React JS & React 19 Questions→