Most code running in your browser has been transformed through several processes to decrease latency. While this optimizes your website’s performance, it can obscure the debugging process if something goes wrong. While Noibu’s Stacktrace detects where a line of code is causing an error, it often points to minified source code, rather than the original source code, and it can be a chore to dig backwards through several layers of transformations to find the source file and line of code that’s really to blame.
The solution? Source maps!
As the name suggests, a source map is a guide that helps third-party services–like Noibu–navigate through the labyrinth of transformed and minified code to the original source code. With a source map in place, Noibu’s Stacktrace can point directly at the source file and line of code that’s throwing the error and disrupting your customer’s journey. This takes much of the guesswork out of your debugging process.
Below is a sample of minified code in Noibu's Stacktrace:
Now, take look at the same code snippet, unminified, after uploading a source map:
To upload a source map, go to an Issue Details page, open the Stacktrace section in the Developer tab, and click Upload Source Map. Once you have a source map uploaded, any stackframe impacted by the map will update with an identifier chip. The source map may not address every script path, so some stackframes will be unaffected:
- Minified: Indicates no source map attached; stackframe still presents minified code. This could be because you’ve yet to upload a source map, or the map you’ve uploaded does not address the frame’s script path.
- Unminified: Source map attached, and code has been unminified.
- Unminified (Outdated): Code is unminified, but the attached source map is over 30 days old and might be outdated. We recommend uploading a new source map to accompany every major release.
But what if you have a publicly available source map? In that case, we’ll download the source map directly from your website, which eliminates the need for a manual upload. You’re free to upload a supplemental map as well, but the public map will take precedence over a private map. A stackframe associated to a public source map will be identified with a new identifier chip:
- Public Source Map: Source map downloaded directly from website. This identifier will only appear to customers who have a publicly available source map.
The process of generating a source map varies depending on how your Ecommerce site is built. Learn more about Public and Private Source Maps and How to Upload a Private Source Map.
Note: Upon uploading a source map, you may see an error message that reads, “Unable to parse Javascript file. Look at stack frames below for more information.” This is likely because your domain doesn’t have Noibu whitelisted. Whitelisting is necessary for source maps to function properly.