-
-
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
Changes from 4 commits
047ad12
93b1327
ee01726
087a347
0ef287f
52ec520
0c762c0
e24d193
b8076fc
65d332c
1123482
9dbbff2
f4124a2
9019f5f
295c533
72ad839
78f08df
59ebf8a
313ab62
0fc6e4c
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
This file was deleted.
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,74 @@ | ||||||
| --- | ||||||
| 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 | ||||||
|
|
||||||
| Developers of modern websites often use some kind of build process when they add JavaScript to the site. 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](https://developer.mozilla.org/en-US/docs/Glossary/Minification), [transpilation](https://www.typescriptlang.org/), [downcompilation](https://babeljs.io/), [transformation](https://rollupjs.org/), [polyfilling](https://developer.mozilla.org/en-US/docs/Glossary/Polyfill), and others, aimed at improving performance and ensuring cross-browser compatibility. | ||||||
priscilawebdev marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||||||
|
|
||||||
| 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, you can’t connect them to your source code repository, and minified variables or function names make you lose context about what is happening. | ||||||
priscilawebdev marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||||||
|
|
||||||
| 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 files that map the transformed JavaScript back to the original code. This allows Sentry to trace the error to your original source, which means you’ll get stack traces that look like the code you wrote, not the code you generated. | ||||||
priscilawebdev marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||||||
|
|
||||||
| To connect source maps to a JavaScript file, we relied on filenames, but these often were unreliable. For example, a new deploy of a source map with the same filename would mean the source mapping gets incorrectly applied. | ||||||
priscilawebdev marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||||||
|
|
||||||
| `//# source mappingURL=http://example.com/path/to/your/source map.map` | ||||||
priscilawebdev marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||||||
|
|
||||||
| Given the url-based filename approach was unreliable, we came up with [Debug IDs](/platforms/javascript/sourcemaps/debug-ids#what-is-a-debug-id). | ||||||
priscilawebdev marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||||||
|
|
||||||
| ## 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 bundler 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. | ||||||
priscilawebdev marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||||||
|
|
||||||
| 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. As a result, **creating a release is no longer required**. | ||||||
priscilawebdev marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||||||
|
|
||||||
| <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 | ||||||
|
|
||||||
| To use Debug IDs, you need **version 7.47** or higher of one of our [JavaScript SDKs](https://github.com/getsentry/sentry-javascript). Once you're using a supported SDK, the process works as follows: | ||||||
|
||||||
| To use Debug IDs, you need **version 7.47** or higher of one of our [JavaScript SDKs](https://github.com/getsentry/sentry-javascript). Once you're using a supported SDK, the process works as follows: | |
| To use Debug IDs, you need **version 7.47.0** or higher of one of our [JavaScript SDKs](https://github.com/getsentry/sentry-javascript). Once you're using a supported SDK, the process works as follows: |
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.
technically for nextjs at least i think v8 is required
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.
should we hide this info then? I got it from somewhere
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.
I wouldn't hide it, but maybe show it differently if the selected platform is Next.js. The nextjs sdk indeed supports sourcemaps from 8.0.0 onwards.
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.
yes but it can be that JavaScript is selected and it provides an overall info so I have to say about Next JS, right?
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.
nevermind
priscilawebdev marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
priscilawebdev marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
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
priscilawebdev marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
priscilawebdev marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
This file was deleted.
| 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/', | ||
| }, | ||
| { | ||
|
|
||
Uh oh!
There was an error while loading. Please reload this page.