Tracking down an error from a minified production stack trace

It so happens when I test an app on the staging environment, somehow, the app failed to boot up. A dreaded blank page appears!

This is very strange, because we’ve already put in error handling code inside the app. The error page should have appeared instead.

Opening the Chrome DevTools, a stack trace appears.

Uncaught (in promise) TypeError: Cannot read property 'status' of undefined
    at https://8f75411bb72d8b.cloudfront.net/assets/0-381ee66b.js:6:191090
    at i (https://8f75411bb72d8b.cloudfront.net/assets/vendor-9545be50818b3ad1ae1a-dll-production.js:72:207476)
    at Generator._invoke (https://8f75411bb72d8b.cloudfront.net/assets/vendor-9545be50818b3ad1ae1a-dll-production.js:72:208572)
    at Generator.t.(anonymous function) [as throw] (https://8f75411bb72d8b.cloudfront.net/assets/vendor-9545be50818b3ad1ae1a-dll-production.js:72:207655)
    at r (https://8f75411bb72d8b.cloudfront.net/assets/0-381ee66b.js:6:187550)
    at https://8f75411bb72d8b.cloudfront.net/assets/0-381ee66b.js:6:187669

This stack trace is not very useful because it is of a minified file. Locating the 191090th character in the 6th line is not that easy.

Also, if I open Chrome DevTools after the error is thrown, it may not resolve the source map for errors thrown beforehand.

My instinct is to just refresh the page with the DevTools open, so that the problem would be caught by the DevTools.

However, this time the app loads perfectly!

I haven’t copied the stack trace, and now the bug ran away. This problem never came up again for a while. My lesson:

Copy the stack trace before refreshing your browser.

Few weeks later, I opened the app as usual, and the blank page came back again. Now I copied the stack trace (which is the one you see above).

I opened the Chrome DevTools, and again, source map is not resolved, so I need to resolve it by myself.

I installed source-map-cli:

yarn global add source-map-cli

Make sure you have the source map file with you.

Let’s look at the stack trace again:

Uncaught (in promise) TypeError: Cannot read property 'status' of undefined
    at https://8f75411bb72d8b.cloudfront.net/assets/0-381ee66b.js:6:191090

Run the CLI tool with the source map corresponding to your file, and provide the line and column numbers:

source-map resolve 0-381ee66b.js.map 6 191090

Since the source map generated by most tools also include the source code by default, the source map file is enough to pinpoint the problem:

Maps to webpack:///src/startApp.js:38:21 (status)
    if (
      (e.message && e.message === 'Network Error') ||
      (+e.response.status === 503)) {
                   ^

As you can see, there’s a bug in the error handling code. We assumed that the error object e has the response property (they are set when the error comes from axios).

In this case the error came from somewhere else and caused the error-handling code to crash. To fix, we changed it to:

      (e.response && +e.response.status === 503)) {

So another lesson here is:

Never make any assumption about an error object — it may be thrown from anywhere.