Engrain by ByteRush

JS.13.02 Mid-level· 11 minCore — asked often

Global error handling and source maps: seeing the errors your users see

Catch every uncaught error with the error and unhandledrejection events, fix the cross-origin "Script error.", read minified stack traces with source maps, and report errors safely.

Comes up in: Debugging, Web fundamentals

Learn#

Pooja’s checkout button works for her, but sales from one phone model dropped by half. No error reached her team: they only saw errors in their own browsers.

Two window events catch what your code did not: error for uncaught exceptions, and unhandledrejection for promises that reject with no handler (JS.11.02). Send both to error reporting, a service that collects errors from real users.

window.addEventListener("error", (event) => {
  report(event.error ?? event.message, { file: event.filename, line: event.lineno });
});
window.addEventListener("unhandledrejection", (event) => {
  report(event.reason, { kind: "promise" });
});

Production code is minified, so stack traces point at app.4f1c.js:1:48211. A source map is a JSON file that maps each position in the built code back to your original file, line and column.

From a minified stack to the line you wroteStep 1 of 4

Console

  • TypeError: Cannot read properties of undefined (reading 'price')
  • at a (app.4f1c.js:1:48211)

Network

    empty

    State

      empty

      A user's browser hits a bug. The stack points into minified code: app.4f1c.js line 1, column 48211.

      Read the steps as text
      1. A user's browser hits a bug. The stack points into minified code: app.4f1c.js line 1, column 48211.
      2. The error handler sends the stack and the release name to the error tracker.
      3. The tracker finds the source map uploaded for release web@2.3.0.
      4. The map turns line 1, column 48211 into the original file and line.

      Predict#

      Predict first

      Your page loads analytics.js from a CDN without the crossorigin attribute. It throws. What does your error handler see?

      Interview angle#

      Say it like this — about 30 seconds

      “I listen for the window error event and unhandledrejection, and in React I add error boundaries for render errors. Each report includes the message, the stack, the cause chain, the release and the page. Cross-origin scripts show only Script error., so I load them with the crossorigin attribute and CORS headers. I build source maps but upload them privately to the error tracker instead of serving them publicly, then map stacks back to the original code.”

      Stays on your device. Nothing is uploaded.
      Follow-up How do you capture all uncaught errors in a web app?
      Window error and unhandledrejection listeners, React error boundaries for rendering, and try/catch where you can recover.
      Follow-up Should you deploy source maps publicly?
      Usually not. Upload them to the error tracker, or serve them only to your team. Public maps expose your original code and comments.
      Follow-up Why do you sometimes see Script error. with no details?
      The error came from a script on another origin loaded without crossorigin, so the browser hides its details.

      Practice#

      On your own

      Build the reporter behind the global handlers: safe for any thrown value, with the cause chain, no duplicates, and a limit.

      Done when

      • The payload has name, message, the cause chain and the context.
      • A thrown string is reported with the name “NonError”.
      • The same name and message are sent once, and never more than limit reports in total.
      Your solution
      Ctrl/⌘ + Enter

      Remember#

      Try to answer each card before you open it. Then add them to your reviews.

      Which two window events catch uncaught errors?

      error and unhandledrejection.

      What does a source map do?

      Maps positions in built code back to the original file, line and column.

      How do you fix "Script error." for a CDN script?

      Add crossorigin="anonymous" and have the CDN send CORS headers.

      What is a hidden source map?

      A map built without the sourceMappingURL comment, uploaded privately to the tracker.

      Go deeper

      Four layers. Stop at the one your interview needs; each ends with a quick check.

      The core ideaEvery round

      event.error is the thrown value; message, filename, lineno and colno describe where. The older window.onerror = (msg, src, line, col, err) => … gets the same data as arguments .

      Check yourself: Which property of the error event holds the Error object?

      event.error (it can be null, so fall back to event.message).

      How it works underneathSenior rounds

      A built file ends with //# sourceMappingURL=app.js.map. The map lists the original sources and a compact mappings string . A hidden source map is built without that comment, so browsers never fetch it, but your tracker can still use it.

      Check yourself: How does the browser find a script's source map?

      Through a sourceMappingURL comment at the end of the file, or a SourceMap header.

      Edge cases and trapsWhere people slip

      Cross-origin scripts give only “Script error.” unless loaded with crossorigin and served with CORS headers.
      Browser extensions also throw errors into your page; filter by file URL. Dedupe and rate-limit, or one bug in a loop sends thousands of reports.

      Check yourself: Why might the same bug flood your tracker?

      It fires on every render or event; dedupe and rate-limit reports.

      In productionStaff-level answers

      Send the release version with every report so the tracker picks the matching maps. Strip personal data such as emails and tokens before sending. In React, an error boundary catches render errors that never reach window (RCT); log them through the same reporter.
      Link errors to traces with OpenTelemetry (QLT.08.01).

      Check yourself: What links a report to the right source map?

      The release or build version sent with the report.

      Finished the five steps? Mark it, and its cards join your reviews.

      Last checked 2026-10-31. Spot a mistake? Use “Report an error” below — fixes are listed on the corrections page.

      Interview questions this answers

      • How do you capture all uncaught errors in a web app?
      • What is a source map? Should you deploy them publicly?
      • Why do you sometimes see "Script error." with no details?