How do you track errors on the frontend?
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:
window.onerror = function(message, source, lineno, colno, error) {
// log the error to the server or console
};Additionally:
window.addEventListener('error', (event) => {
// catch resource loading errors (images, styles)
});2. window.addEventListener('unhandledrejection')
Catches unhandled Promise errors (very common):
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:
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.
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.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.