Integrating Error Tracking (Sentry/Monitoring Concepts)0%

Integrating Error Tracking (Sentry/Monitoring Concepts)

Beginner12 min read•Updated: Jul 11, 2026

Integrating Error Tracking Concepts in Modern JavaScript

In production applications, users rarely report bugs—they simply abandon the site when something breaks. Application Error Tracking & Performance Monitoring (APM) systems (such as Sentry, Datadog, Bugsnag, and Rollbar) automatically capture, group, and alert on runtime crashes in real-time, complete with stack traces, breadcrumbs, and environment metadata.

1. How Modern Error Trackers Work

Output

Runtime Crash Occurs in Browser
               │
Global Handlers Catch Error (window.onerror / unhandledrejection)
               │
Enrich with Metadata:
├── 1. Stack Trace (Mapped via uploaded Source Maps)
├── 2. Breadcrumbs (Last 20 clicks, console logs, and API calls)
├── 3. User Identity (UID, email, tenant)
└── 4. Environment (Browser version, OS, git commit release)
               │
Compressed HTTP POST Dispatch (Non-blocking via sendBeacon / fetch)
               │
               ▼
Sentry / Monitoring Platform (Alerts Slack & PagerDuty!)

2. What are Breadcrumbs?

Breadcrumbs are a trail of user actions and telemetry events recorded before a crash occurs. When an exception is thrown, the breadcrumb trail explains how the user got there:

JSON

1[
2  { "category": "ui.click", "message": "button#checkout clicked", "timestamp": 171000 },
3  { "category": "navigation", "from": "/cart", "to": "/payment", "timestamp": 171005 },
4  { "category": "fetch", "url": "/api/v1/charge", "status": 500, "timestamp": 171008 },
5  { "level": "error", "message": "TypeError: Cannot read property 'receipt' of undefined" }
6]

3. Building an In-House Mini-Sentry SDK

Understanding how monitoring SDKs operate under the hood:

JavaScript

1class MiniErrorTracker {
constructor(config) {
  this.endpoint = config.endpoint;
  this.release = config.release || '1.0.0';
  this.user = null;
  this.breadcrumbs = [];
  this.maxBreadcrumbs = 20;
8 
  this.init();
}
11 
init() {
  // 1. Intercept UI clicks for breadcrumbs
  document.addEventListener('click', (e) => {
    const tag = e.target.tagName.toLowerCase();
    const id = e.target.id ? `#${e.target.id}` : '';
    this.addBreadcrumb('ui.click', `Clicked ${tag}${id}`);
  });
19 
  // 2. Global error catching
  window.addEventListener('error', (event) => {
    this.captureException(event.error || new Error(event.message));
  });
24 
  window.addEventListener('unhandledrejection', (event) => {
    this.captureException(event.reason);
  });
}
29 
setUser(user) {
  this.user = user;
}
33 
addBreadcrumb(category, message) {
  if (this.breadcrumbs.length >= this.maxBreadcrumbs) {
    this.breadcrumbs.shift(); // Evict oldest
  }
  this.breadcrumbs.push({
    category,
    message,
    timestamp: Date.now()
  });
}
44 
captureException(error) {
  const payload = {
    name: error?.name || 'Error',
    message: error?.message || String(error),
    stack: error?.stack,
    release: this.release,
    user: this.user,
    url: window.location.href,
    userAgent: navigator.userAgent,
    breadcrumbs: [...this.breadcrumbs]
  };
56 
  // Send asynchronously without blocking main thread
  const blob = new Blob([JSON.stringify(payload)], { type: 'application/json' });
  navigator.sendBeacon(this.endpoint, blob);
}
61}

4. Linking Source Maps with Release Tags

For monitoring services to de-obfuscate minified stack traces back to original TypeScript/ES6 lines:

1
Every application build is tagged with a unique Release Hash (e.g. Git commit SHA: release: "git_a98f12").
2
The CI/CD pipeline uploads .map files directly to Sentry tagged with that exact release hash.
3
When a client crashes, Sentry matches the crash release hash to the uploaded source map and displays the exact TypeScript line number!

Interactive Quiz• Knowledge Check

Practice Quiz

Question 1

What are "Breadcrumbs" in error tracking systems like Sentry?

Question 2

Why is tagging each production build with a unique Release identifier (e.g. Git commit hash) critical for error monitoring?

Question 3

What browser API is ideal for transmitting crash reports when an error occurs immediately before page unload?

Question 4

Why should personally identifiable information (PII) like passwords and credit card numbers be sanitized before sending to error trackers?

Question 5

In an error monitoring platform, what is "Error Grouping" (Fingerprinting)?

Next Lesson

Crash Reporting & Telemetry Buffering

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

Related Lessons

Previous Lesson	Next Lesson
Logging Architecture & Structured Log Levels	Crash Reporting & Telemetry Buffering

Practice Quiz

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

Previous Next

PreviousPrevNext