Reporting Client Errors to Monitoring Services0%
Breaking Out of DOM Hierarchies with createPortal

Reporting Client Errors to Monitoring Services

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

Reporting Client Errors to Monitoring Services

1. Why Client-Side Telemetry Is Essential

In production environments, web applications run on thousands of unpredictable user machines with varying browser versions, ad blockers, unstable networks, and unique operating systems.

If a bug causes a component to crash for a user in production:

  • You cannot inspect their browser console.
  • Users rarely report bugs; they simply leave the website.
  • Backend server logs show nothing because the failure occurred on the client.

Professional software engineering requires Client-Side Telemetry and Application Performance Monitoring (APM) using platforms like Sentry, Datadog, or LogRocket.

Output
User Encounters Crash
│
▼
[ErrorBoundary catches error]
│
▼
[Telemetry Agent (e.g. Sentry)]
├─ Captures error stack trace & component stack
├─ Attaches user metadata (browser, OS, screen size, user ID)
├─ Records recent "breadcrumbs" (clicks, route changes, network calls)
└─ Sends payload asynchronously to APM ingest servers

2. Sentry Integration Architecture

Sentry is the most widely adopted error tracking solution in the React ecosystem.

Installation

Bash / Terminal
npm install @sentry/react

Initializing Sentry in src/main.jsx:

JSX
// src/main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import * as Sentry from '@sentry/react';
import App from './App.jsx';
 
Sentry.init({
dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0', // Data Source Name from Sentry dashboard
integrations: [
Sentry.browserTracingIntegration(),
Sentry.replayIntegration()
],
tracesSampleRate: 1.0, // Capture 100% of transactions for performance monitoring
replaysOnErrorSampleRate: 1.0 // Record video replay of session whenever an error occurs!
});
 
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
);

3. Capturing Errors with Sentry's Error Boundary

Sentry provides a drop-in Error Boundary that automatically transmits stack traces, component stacks, and environmental context directly to your cloud dashboard:

JSX
import React from 'react';
import * as Sentry from '@sentry/react';
 
function ErrorFallback({ error, resetError }) {
return (
<div className="error-card">
<h2>Oops! An error occurred.</h2>
<p>{error.message}</p>
<button onClick={resetError}>Try Again</button>
</div>
);
}
 
export default function SafeApplication() {
return (
<Sentry.ErrorBoundary
fallback={ErrorFallback}
showDialog // Optional: Shows a modal prompting user to submit feedback!
>
<MainApplicationContent />
</Sentry.ErrorBoundary>
);
}

4. Enriching Errors with User Context and Breadcrumbs

To make debugging actionable, attach contextual information:

JavaScript
// When a user signs in:
Sentry.setUser({
id: 'usr-401',
email: 'student@mskinstitute.com',
role: 'enterprise_learner'
});
 
// Manual breadcrumbs for critical business actions:
Sentry.addBreadcrumb({
category: 'checkout',
message: 'User initiated payment for Full-Stack Track',
level: 'info'
});
 
// Manual exception capture in try...catch:
try {
processPayment();
} catch (err) {
Sentry.captureException(err, {
tags: { section: 'payment-modal' },
extra: { orderId: 'ord-883' }
});
}
Interactive Quiz

Practice Quiz

Question 1
Why are client-side error monitoring services (like Sentry or Datadog) necessary in production web applications?
Question 2
What is a "Breadcrumb" in telemetry services like Sentry?
Question 3
What is a "DSN" (Data Source Name) in Sentry configuration?
Question 4
How can you capture a caught exception manually in Sentry?
Question 5
What is "Session Replay" in modern frontend monitoring?
Next Lesson

Breaking Out of DOM Hierarchies with createPortal

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Building Fallback UI with react-error-boundaryBreaking Out of DOM Hierarchies with createPortal

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext