Debugging Production Errors with Ajax Interceptor, Source Maps, and Manual Mapping

After a release, many developers encounter unexpected runtime errors in production and feel anxious; the article first identifies two main causes: complex live data that differs from UAT testing and front‑end code bugs that were not caught during testing.

Solution 1 – Assume a backend data issue: Use the Chrome extension ajax-interceptor (clone from git clone https://github.com/YGYOOO/ajax-interceptor.git ) to intercept API responses, replace erroneous data, and verify whether the problem originates from the data.

Solution 2 – When the error points to a minified bundle: The root cause is often missing source maps because the build used hidden-source-map instead of source-map . The article shows the visual difference and demonstrates how to enable proper debugging.

Method 1: Add the source‑map file in Chrome DevTools (ensure the # sourceMappingURL=index.js.map comment points to the correct .map file).

Method 2: Manual mapping – install the source-map library ( npm i source-map -D ), create a source.js script, and use the following code to locate the original position of an error:

const { SourceMapConsumer } = require('source-map')
const fs = require('fs')
const rawSourceMap = fs.readFileSync('./dist/index.js.map', 'utf-8')
function originalPositionFor(errInfo) {
  const [bundleName, line, column] = errInfo.split(':')
  SourceMapConsumer.with(rawSourceMap, null, consumer => {
    const originalPosition = consumer.originalPositionFor({
      line: parseInt(line),
      column: parseInt(column),
    })
    console.log('bundle name = ', bundleName)
    console.log('original position = ', originalPosition)
  })
}

Method 3: Use Charles proxy to inject the # sourceMappingURL=index.js.map comment into the response, either pointing to a local map file or a remote URL, allowing Chrome to map the minified code back to the original source.

By connecting index.js with its corresponding index.js.map , developers can view the original source in the browser, set breakpoints, and quickly identify the exact line causing the error.

The article encourages readers to share alternative solutions in the comments to foster collective learning.