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.
[developer-overview]
Once a source map is uploaded, identifier chips beside each stackframe in the Stacktrace indicate whether the frame contains minified or unminified code. A chip will also indicate whether code is unminified based on a source map that's over 30 days old.
Generating a Source Map
The process of generating a source map varies with your development tool. If your site is built using an eCommerce platform like Magento or Shopify, there should be an option in the tool to generate source maps along with the bundle process. Consult your tool's help documentation or support resources to learn how to generate a source map.
Private vs Public Source Maps
Noibu accommodates both private and public source maps. A private source map is an offline file that you must Upload Manually from the Technical Details tab. To ensure your source maps address script paths accurately, you should upload a new map with each release. A public source map is uploaded to your site along with the minified code, and can be accessed via the browser's web tools. If you have a public source map available on your site, Noibu will detect the map by looking at your script, and apply the map to any relevant stackframes. This happens automatically; there is no need to notify Noibu of the public source map or upload anything to the Noibu platform.
Review the table below for the pros and cons of each method:
| Source Map Type | Pros | Cons |
|---|---|---|
| Public | Noibu pulls your source map from your website, so you won't have to manually upload a new source map with every release. | Your original source code will be–indirectly–publicly available, which may pose a security risk. |
| Private | Your source maps are not publicly available, which poses no security risk. | You must manually upload a source map, and adjust/reupload the map with each release. |
Troubleshooting
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.
Other symptoms of this issue include:
- Most frames of issues that include Stacktraces do not open.
- Affected frames display the error message listed above.
- Affected frames have the domain's name as part of the URL.
Learn more about the Stacktrace section.