Suggest an edit

Improve this article

Refine the answer for “How do you track errors on the frontend?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

To track errors on the frontend, you combine **tools, code, and analytics**. Here are the key methods:

---

### 1. `window.onerror` **and** `window.addEventListener('error')`

This is the basic way to catch most unhandled JavaScript errors:

```js
window.onerror = function(message, source, lineno, colno, error) {
  // log the error to the server or console
};
```

Additionally:

```js
window.addEventListener('error', (event) => {
  // catch resource loading errors (images, styles)
});
```

---

### 2. `window.addEventListener('unhandledrejection')`

Catches unhandled `Promise` errors (very common):

```js
window.addEventListener('unhandledrejection', function(event) {
  // log event.reason
});
```

---

### 3. **Using ready-made tools (error analytics)**

Connected via an SDK, they automatically catch:

- JS errors and asynchronous operation errors,
- the call stack, browser, device,
- the user's session and their actions before the error.

Popular services:

- **Sentry**
- **Rollbar**
- **LogRocket**
- **Bugsnag**
- **Datadog RUM**

---

### 4. **Sending errors to the server**

Every caught error should be sent to the backend or a third-party service:

```js
fetch('/log-error', {
  method: 'POST',
  body: JSON.stringify({ message, stack, url }),
});
```

---

### 5. **Linking errors to user events (event analytics)**

It's useful to link errors to actions:
- what was clicked,
- which URL,
- where the user was.
This can be done manually or through services like **Sentry + session replay**.

---

### 6. **Custom loggers and console interceptors (for SPAs)**

Intercept `console.error` and `console.warn` to analyze even non-fatal issues.

```js
const origConsoleError = console.error;
console.error = function(...args) {
  sendToLogger(args);
  origConsoleError.apply(console, args);
};
```

---

**Conclusion:**
To track errors on the frontend, you need coverage at every level: global traps, Promise handling, analytics tools, action context. Without it, the product has no visibility into where and how it breaks for the user.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts286 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.