๐Ÿš‘ JavaScript

Catch Every Frontend Error โ€” window.onerror to Monitoring

๐Ÿ“… Jul 4, 2026 โฑ 3 min read

Your site is broken for someone right now โ€” and without error reporting, you'll never know. The safety nets:

The two global handlers

// synchronous errors anywhere
window.addEventListener("error", (e) => {
  logError({ msg: e.message, src: e.filename, line: e.lineno });
});

// rejected promises nobody .catch()ed โ€” the modern blind spot
window.addEventListener("unhandledrejection", (e) => {
  logError({ msg: String(e.reason), type: "promise" });
});

A DIY logger (20 lines, free)

const seen = new Set();
function logError(info) {
  const key = info.msg + info.line;
  if (seen.has(key)) return;          // don't spam duplicates
  seen.add(key);
  navigator.sendBeacon("/api/errors", JSON.stringify({
    ...info,
    url: location.href,
    ua: navigator.userAgent,
    time: Date.now(),
  }));   // sendBeacon survives page unloads; fetch might not
}

A tiny PHP/Node endpoint appends to a log file โ€” review weekly, fix the top recurring error. This loop is 80% of what paid tools do.

The graduation path

Real products use Sentry (generous free tier): source-mapped stack traces, grouping, release tracking, user context. Resume line either way: "implemented frontend error monitoring" โ€” it signals production thinking, which is exactly what separates fresher candidates.

โ† All Articles