-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
feat(source-maps): Add doc explaining Debug IDs #13100
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
priscilawebdev
merged 20 commits into
master
from
priscila/feat/source-maps/add-debug-ids-doc
Mar 26, 2025
Merged
Changes from all commits
Commits
Show all changes
20 commits
Select commit
Hold shift + click to select a range
047ad12
feat(source-maps): Add doc explaining Debug IDs
priscilawebdev 93b1327
Update docs/platforms/javascript/common/sourcemaps/debug-ids/index.mdx
priscilawebdev ee01726
feedback
priscilawebdev 087a347
add one more redirect
priscilawebdev 0ef287f
Update docs/platforms/javascript/common/sourcemaps/troubleshooting_js…
priscilawebdev 52ec520
Update docs/platforms/javascript/common/sourcemaps/troubleshooting_js…
priscilawebdev 0c762c0
Update docs/platforms/javascript/common/sourcemaps/troubleshooting_js…
priscilawebdev e24d193
Update docs/platforms/javascript/common/sourcemaps/troubleshooting_js…
priscilawebdev b8076fc
Update docs/platforms/javascript/common/sourcemaps/troubleshooting_js…
priscilawebdev 65d332c
Update docs/platforms/javascript/common/sourcemaps/troubleshooting_js…
priscilawebdev 1123482
Update docs/platforms/javascript/common/sourcemaps/troubleshooting_js…
priscilawebdev 9dbbff2
Update docs/platforms/javascript/common/sourcemaps/troubleshooting_js…
priscilawebdev f4124a2
Update docs/platforms/javascript/common/sourcemaps/troubleshooting_js…
priscilawebdev 9019f5f
Update docs/platforms/javascript/common/sourcemaps/troubleshooting_js…
priscilawebdev 295c533
Update docs/platforms/javascript/common/sourcemaps/troubleshooting_js…
priscilawebdev 72ad839
Update docs/platforms/javascript/common/sourcemaps/troubleshooting_js…
priscilawebdev 78f08df
Update docs/platforms/javascript/common/sourcemaps/troubleshooting_js…
priscilawebdev 59ebf8a
Update docs/platforms/javascript/common/sourcemaps/troubleshooting_js…
priscilawebdev 313ab62
Update docs/platforms/javascript/common/sourcemaps/troubleshooting_js…
priscilawebdev 0fc6e4c
add specific version for next.js
priscilawebdev File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
10 changes: 0 additions & 10 deletions
10
.../platforms/javascript/common/sourcemaps/troubleshooting_js/artifact-bundles.mdx
This file was deleted.
Oops, something went wrong.
Binary file added
BIN
+191 KB
...vascript/common/sourcemaps/troubleshooting_js/debug-ids/img/bad-stack-trace.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+637 KB
...rms/javascript/common/sourcemaps/troubleshooting_js/debug-ids/img/debug-ids.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+107 KB
...ascript/common/sourcemaps/troubleshooting_js/debug-ids/img/good-stack-trace.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
80 changes: 80 additions & 0 deletions
80
docs/platforms/javascript/common/sourcemaps/troubleshooting_js/debug-ids/index.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| --- | ||
| title: What are Debug IDs | ||
| sidebar_order: 7 | ||
| --- | ||
|
|
||
| This documentation provides an in-depth look at Debug IDs, explaining how they work and why Sentry recommends using them. Visit [Uploading Source Maps](https://docs.sentry.io/platforms/javascript/guides/react/sourcemaps/uploading/) if you're looking for our guides on how to upload source maps. | ||
|
|
||
| ## Introduction | ||
|
|
||
| Modern web applications often use some kind of build process when using JavaScript. This build process takes some input JavaScript, transforms it in some way, then outputs JavaScript that is served alongside the website. Some example transformations include minifying JavaScript code (so the final JavaScript bundle is smaller and faster to load) or removing TypeScript types (only JavaScript can run on the browser). | ||
|
|
||
| As a result, the JavaScript code running in production is typically not the same as the code written by the developer in the source editor. Instead, it has undergone several transformations, such as minification, transpilation, downcompilation, bundling, polyfilling, and others, aimed at improving performance and ensuring cross-browser compatibility. Some common tools that transform code in such ways are Babel, Vite, Webpack, Rollup, Terser, or SWC - which are often used by higher-level tools like Next.js, Nuxt, Create React App, and similar. | ||
|
|
||
| Stack traces are essential to debug errors, but stack traces that come from generated JavaScript are often unreadable or unusable! They look nothing like the code you wrote and you can't connect them to your source code repository. | ||
|
|
||
| To ensure Sentry (and other tools) can provide stack traces that are both readable and useful, you'll want to generate and use [source maps](https://firefox-source-docs.mozilla.org/devtools-user/debugger/how_to/use_a_source_map/index.html). Source maps are additional pieces information (often stored as files) that map the transformed JavaScript back to the original code. This allows Sentry to associate the error with your original source, which means you’ll get stack traces that look like the code you wrote, not the code you generated. | ||
|
|
||
| To connect source maps to a JavaScript file, we relied on filenames, but these often were unreliable. For example, when you changed the subpath of where your javascript files are served it would mean that the filenames no longer match and the corresponding sourcemap would not be able to be found by Sentry. | ||
|
|
||
| `//# source mappingURL=http://example.com/path/to/your/source-map.js.map` | ||
|
|
||
| Given the url-based filename approach was unreliable, we came up with [Debug IDs](/platforms/javascript/sourcemaps/debug-ids#what-are-debug-ids). | ||
|
|
||
| ## What are Debug IDs | ||
|
|
||
| Inspired by approaches in native language ecosystems, Debug IDs are globally unique ids that identify a transformed JavaScript file and its associated source map. | ||
|
|
||
|  | ||
|
|
||
| When using sentry-cli or Sentry plugins for Webpack, Vite, or Rollup, Debug IDs are deterministically generated based on the source file contents. Note that deterministic Debug IDs for esbuild are not currently supported. | ||
|
|
||
| This approach is Sentry's recommended and most reliable method for associating minified JavaScript files with their original source code, making it easier to trace errors back to their source. Because debug IDs will generally change across releasess if the file content is changed **creating a release is no longer required**. Release names were previously used to disambiguate sourcemaps with the same name across deployments. | ||
|
|
||
| <Alert> | ||
|
|
||
| If you want to learn more about the rationale behind Debug IDs, we suggest taking a look at our [engineering blog](https://sentry.engineering/blog/the-case-for-debug-ids). | ||
|
|
||
| </Alert> | ||
|
|
||
| ## How Sentry uses Debug IDs | ||
|
|
||
| <PlatformSection notSupported={["javascript.nextjs"]}> | ||
| To use Debug IDs, ensure that you're using **Sentry's SDK version 7.47 or higher**. Once you're on a supported version, follow the steps outlined below: | ||
| </PlatformSection> | ||
| <PlatformSection supported={["javascript.nextjs"]}> | ||
| For Debug IDs with Next.js, you’ll need **Sentry's SDK version 8.0.0 or higher**. Once you're on a supported version, follow the steps outlined below: | ||
| </PlatformSection> | ||
|
|
||
|
|
||
| 1. **A globally unique Debug ID is generated**: During the build process, if you are using one of Sentry's Bundler Plugins or Sentry CLI a Debug ID is generated, which is globally unique and ideally deterministic. | ||
|
|
||
| 2. **Debug IDs are embedded in minified files**: Each minified JavaScript file includes a special comment, such as `//# debugId=DEBUG_ID`, where `DEBUG_ID` is the unique identifier generated in the previous step. | ||
|
|
||
| 3. **The same Debug ID is added to source maps**: Source maps also include the same Debug ID as a new attribute, linking the minified JavaScript file to its corresponding source map. | ||
|
|
||
| 4. **Stack traces in Sentry link the Debug ID**: When an error occurs, Sentry's event contains the Debug ID, which allows Sentry to automatically link the error to the correct source map. This ensures the stack trace is resolved back to the original source code, providing you with clearer and more accurate debugging information—even if the JavaScript has been minified or transformed. | ||
|
|
||
| ### Why use Debug IDs to uniminify your code? | ||
|
|
||
| Unminifying your code is essential for effective debugging. While there are other [legacy ways](https://docs.sentry.io/platforms/javascript/sourcemaps/troubleshooting_js/legacy-uploading-methods/) to achieve this at Sentry, using **Debug IDs are recommended by Sentry** as it is the most reliable method. By unminifying your code, you get much clearer stack traces when errors occur. Instead of seeing obfuscated code, you'll see the exact code you originally wrote, making it far easier to understand and resolve issues. Below are examples that demonstrates the difference: | ||
|
|
||
| #### Bad Stack Trace | ||
|  | ||
|
|
||
| #### Good Stack Trace | ||
|  | ||
|
|
||
| ## Retention Policy | ||
|
|
||
| Artifacts including Debug IDs have a retention period of _90 days_, using a _time to idle_ expiration mechanism. | ||
| This means that uploaded Debug IDs are retained for as long as they are actively being used for event processing. | ||
| Once an ID has not been used to process incoming events for at least 90 days, it will automatically expire and be eligible for deletion. | ||
|
|
||
| ## Associating a Release with Debug IDs | ||
|
|
||
| Since you might still want to know to which release an specific Debug ID is connected to, we designed a new way to still associate a `release` to your bundle. | ||
|
|
||
| The new Debug ID format supports a new kind of association to a `release` and optionally `dist`, known as weak release association. This type of association **will not require the creation of a `release`** before uploading source maps and will consequently allow the creation of a `release` as a separate step down the pipeline. | ||
|
|
||
| With an associated `release` and optionally `dist` you will be able to quickly go to the Debug ID from your `release` in Sentry, without having to worry about which Debug ID was used for your errors. | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
platform-includes/migration/javascript-v8/other-changes/javascript.nextjs.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
36 changes: 0 additions & 36 deletions
36
platform-includes/sourcemaps/artifact-bundles/javascript.mdx
This file was deleted.
Oops, something went wrong.
Binary file not shown.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -585,6 +585,16 @@ const userDocsRedirects = [ | |
| '/platforms/:platform/guides/:guide/sourcemaps/:section(generating|validating|best-practices|artifact-and-release-bundles)/', | ||
| destination: '/platforms/:platform/guides/:guide/sourcemaps/', | ||
| }, | ||
| { | ||
| source: '/platforms/javascript/sourcemaps/troubleshooting_js/artifact-bundles/', | ||
| destination: '/platforms/javascript/sourcemaps/troubleshooting_js/debug-ids/', | ||
| }, | ||
|
Comment on lines
+588
to
+591
Member
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This was the only change I made to the file, the rest was likely due to my code formatter |
||
| { | ||
| source: | ||
| '/platforms/:platform/guides/:guide/sourcemaps/troubleshooting_js/artifact-bundles/', | ||
| destination: | ||
| '/platforms/:platform/guides/:guide/sourcemaps/troubleshooting_js/debug-ids/', | ||
| }, | ||
| { | ||
| source: '/platforms/minidump/crashpad/:path*', | ||
| destination: '/platforms/native/guides/crashpad/:path*', | ||
|
|
@@ -997,7 +1007,7 @@ const userDocsRedirects = [ | |
| source: '/platforms/php/:productfeature/troubleshooting/:path*', | ||
| destination: '/platforms/php/troubleshooting/:path*', | ||
| }, | ||
| { | ||
| { | ||
| source: '/product/explore/feature-flags/:path*', | ||
| destination: '/product/issues/issue-details/feature-flags/:path*', | ||
| }, | ||
|
|
@@ -1009,14 +1019,16 @@ const userDocsRedirects = [ | |
| source: '/product/tracing/:path*', | ||
| destination: '/concepts/key-terms/tracing/:path*', | ||
| }, | ||
| // Redirects for JavaScript tracing docs | ||
| // Redirects for JavaScript tracing docs | ||
| { | ||
| source: '/platforms/javascript/tracing/trace-propagation/:path*', | ||
| destination: '/platforms/javascript/tracing/distributed-tracing/:path*', | ||
| }, | ||
| { | ||
| source: '/platforms/javascript/guides/:guide/tracing/instrumentation/performance-metrics/', | ||
| destination: '/platforms/javascript/guides/:guide/tracing/span-metrics/performance-metrics/', | ||
| source: | ||
| '/platforms/javascript/guides/:guide/tracing/instrumentation/performance-metrics/', | ||
| destination: | ||
| '/platforms/javascript/guides/:guide/tracing/span-metrics/performance-metrics/', | ||
| }, | ||
| { | ||
| source: '/platforms/javascript/guides/:guide/tracing/trace-propagation/:path*', | ||
|
|
@@ -1027,7 +1039,8 @@ const userDocsRedirects = [ | |
| destination: '/platforms/javascript/tracing/instrumentation/:path*', | ||
| }, | ||
| { | ||
| source: '/platforms/javascript/guides/:guide/tracing/instrumentation/custom-instrumentation/:path*', | ||
| source: | ||
| '/platforms/javascript/guides/:guide/tracing/instrumentation/custom-instrumentation/:path*', | ||
| destination: '/platforms/javascript/guides/:guide/tracing/instrumentation/:path*', | ||
| }, | ||
| { | ||
|
|
@@ -1040,22 +1053,27 @@ const userDocsRedirects = [ | |
| }, | ||
| { | ||
| source: '/platforms/dart/guides/flutter/upload-debug/#when-to-upload', | ||
| destination: '/platforms/dart/guides/flutter/debug-symbols/#when-to-upload-debug-symbols', | ||
| destination: | ||
| '/platforms/dart/guides/flutter/debug-symbols/#when-to-upload-debug-symbols', | ||
| }, | ||
| { | ||
| source: '/platforms/dart/guides/flutter/upload-debug/#source-context', | ||
| destination: '/platforms/dart/guides/flutter/debug-symbols/dart-plugin/#configuration', | ||
| destination: | ||
| '/platforms/dart/guides/flutter/debug-symbols/dart-plugin/#configuration', | ||
| }, | ||
| { | ||
| source: '/platforms/dart/guides/flutter/upload-debug/#uploading-source-code-context-for-flutter-android-ios-and-macos', | ||
| source: | ||
| '/platforms/dart/guides/flutter/upload-debug/#uploading-source-code-context-for-flutter-android-ios-and-macos', | ||
| destination: '/platforms/dart/guides/flutter/debug-symbols/manual-upload/', | ||
| }, | ||
| { | ||
| source: '/platforms/dart/guides/flutter/upload-debug/#uploading-for-android-ndk', | ||
| destination: '/platforms/dart/guides/flutter/debug-symbols/manual-upload/#android-ndk', | ||
| destination: | ||
| '/platforms/dart/guides/flutter/debug-symbols/manual-upload/#android-ndk', | ||
| }, | ||
| { | ||
| source: '/platforms/dart/guides/flutter/upload-debug/#automatically-upload-debug-symbols', | ||
| source: | ||
| '/platforms/dart/guides/flutter/upload-debug/#automatically-upload-debug-symbols', | ||
| destination: '/dart/guides/flutter/debug-symbols/dart-plugin/', | ||
| }, | ||
| { | ||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@smeubank I will improve this in a follow-up. will try to have something similar to what we display in that hydration issue