Source Mapping

When troubleshooting errors, it's helpful to know exactly where the error occurred in the JavaScript code. You can upload your application's source map and source file to find the exact location of the error.

On the Instances tab, when you expand on the script origin of the error, the Source Mapping section allows you to upload a source map and source file to further troubleshoot the error. When you upload the map and files, the HTML snippet will populate with the file source code and highlight exactly where in the source code the error occurred.

To upload a source map and source file:

  1. Expand on an error message.
  2. Click on a stack frame.
  3. In the Properties section, scroll down to Source Mapping.
  4. Click Upload to upload the JSON source map and source files (The max size allowed for source map and source files is 10 MB).
Once the source map and source file are uploaded, the HTML snippet will populate with highlighted JavaScript where the error occurred. You can use these details to fix the errors.

Source Mapping Tips and Recommendations

You have a few options for which source map and source files to upload. You can:

  • Only upload the source map file (if the source map file also contains the source file).
  • Upload the source map file first and then upload the source file.

  • Only upload the source file (without the source map file).

If you upload the source map file after uploading source file, the source file uploaded will be removed automatically.

You can upload one or more source files. Once the source map files is uploaded, the UI shows a list of source files associated with that source map file.

We recommend that you use different names for source files that share the same source map. Even if the source files are located in different paths, if the first source file is named /path/to/myBrowserApp.js and the second source file is named /different/path/to/myBrowserApp.js, if you upload the first source file /path/to/myBrowserApp.js, and later upload the second source file /different/path/to/myBrowserApp.js, if you were to go back to the stack associated with the first source file, you would need to re-upload the first source file again. This is because the source files are persisted using their file name as an identifier.

(Optional) Add Application Release Information in the JavaScript Agent

Before using the Source Mapping functionality, you can add your application's release information, such as release name, version, or key, in your application. When errors occur, the JavaScript Agent sends beacons containing error information and the release ID. When you upload the source map and source file to troubleshoot errors, the release IDs will match and highlight the exact line of code that caused the error. See Add Application Release Details to configure the release ID.