-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
Add source maps upload instructions for CRA #7628
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
Merged
Changes from all commits
Commits
Show all changes
8 commits
Select commit
Hold shift + click to select a range
78ec0ed
Add source maps upload instructions for CRA
8dfd067
Update src/includes/sourcemaps-create-react-app.mdx
smeubank a1df050
Update javascript.mdx
smeubank 948823f
style(lint): Auto commit lint changes
getsantry[bot] 7134ec4
Add to overview page
9870a64
Apply suggestions from code review
db0a5d4
Use hardcoded link to please linter
bb4dbcb
...
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
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -0,0 +1,114 @@ | ||||||
<Include name="debug-id-requirement.mdx" /> | ||||||
|
||||||
## Automatic Setup | ||||||
|
||||||
The easiest way to configure uploading source maps with Sentry CLI is by using the Sentry Wizard: | ||||||
|
||||||
<Include name="sourcemaps-wizard-instructions.mdx" /> | ||||||
|
||||||
If you want to configure source maps upload with the CLI manually instead, follow the steps below. | ||||||
|
||||||
## Manual Setup | ||||||
|
||||||
### 1. Generate Source Maps | ||||||
|
||||||
Verify that you are generating source maps when building your React app. | ||||||
This should already be the case, unless you set the `GENERATE_SOURCEMAPS` environment variable to "false". | ||||||
|
||||||
**Make sure to run a production build.** | ||||||
In the next steps we will modify and upload the artifacts that were generated during the build. | ||||||
Running a development build will not emit the necessary files. | ||||||
|
||||||
### 2. Configure Sentry CLI | ||||||
|
||||||
Install Sentry CLI as a dev-dependency with the package manager of your choice: | ||||||
|
||||||
```bash {tabTitle:npm} | ||||||
npm install @sentry/cli --save-dev | ||||||
``` | ||||||
|
||||||
```bash {tabTitle:Yarn} | ||||||
yarn add @sentry/cli --dev | ||||||
``` | ||||||
|
||||||
```bash {tabTitle:pnpm} | ||||||
pnpm add @sentry/cli --save-dev | ||||||
``` | ||||||
|
||||||
<Note> | ||||||
|
||||||
For more info on `sentry-cli` configuration visit the [Sentry CLI configuration docs](/product/cli/configuration/). | ||||||
|
||||||
</Note> | ||||||
|
||||||
Make sure `sentry-cli` is configured for your project. For that you can use environment variables: | ||||||
|
||||||
<SignInNote /> | ||||||
|
||||||
<OrgAuthTokenNote /> | ||||||
|
||||||
```bash {filename:.env} | ||||||
SENTRY_ORG=___ORG_SLUG___ | ||||||
SENTRY_PROJECT=___PROJECT_SLUG___ | ||||||
# Auth tokens can be obtained from | ||||||
# https://sentry.io/settings/auth-tokens/ | ||||||
SENTRY_AUTH_TOKEN=___ORG_AUTH_TOKEN___ | ||||||
``` | ||||||
|
||||||
### 3. Inject Debug IDs Into Build Artifacts | ||||||
|
||||||
Debug IDs are used to match the stack frame of an event with its corresponding minified source and source map file. | ||||||
Visit [What are Artifact Bundles](/platforms/javascript/sourcemaps/troubleshooting_js/artifact-bundles/) if you want to learn more about Artifact Bundles and Debug IDs. | ||||||
|
||||||
To inject Debug IDs, use the following command **every time after building your application**: | ||||||
lforst marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
|
||||||
```bash | ||||||
sentry-cli sourcemaps inject /path/to/build | ||||||
``` | ||||||
|
||||||
Make sure to replace `/path/to/build` with the actual path where your build output is generated. | ||||||
In a Create React App application, this is usually the `build` folder. | ||||||
|
||||||
#### Verify Debug IDs Were Injected Into Build Artifacts | ||||||
|
||||||
After running the `sentry-cli sourcemaps inject` command, minified source files should contain a `debugId` comment at the end: | ||||||
|
||||||
```javascript {filename:exampleMinifiedFile.js} | ||||||
... | ||||||
//# debugId=<debug_id> | ||||||
//# sourceMappingURL=<sourcemap_url> | ||||||
``` | ||||||
|
||||||
Source maps should now contain a field named `debug_id`: | ||||||
|
||||||
```json {filename:exampleSourceMap.js.map} | ||||||
{ | ||||||
... | ||||||
"debug_id":"<debug_id>", | ||||||
... | ||||||
} | ||||||
``` | ||||||
|
||||||
### 4. Upload Artifacts | ||||||
|
||||||
After you've injected Debug IDs into your artifacts, upload them using the following command: | ||||||
lforst marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
|
||||||
```bash | ||||||
sentry-cli sourcemaps upload /path/to/build | ||||||
``` | ||||||
|
||||||
#### Verify That Artifact Bundles Were Uploaded | ||||||
|
||||||
Open up Sentry and navigate to **Project Settings > Source Maps**. | ||||||
If you choose “Artifact Bundles” in the tabbed navigation, you'll see all the artifact bundles that have been successfully uploaded to Sentry. | ||||||
|
||||||
### 5. Deploy Your Application | ||||||
|
||||||
If you're following this guide from your local machine, then you've successfully: | ||||||
|
||||||
1. Generated minified source and source map files (artifacts) by running your application's build process | ||||||
2. Injected Debug IDs into the artifacts you've just generated | ||||||
lforst marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
3. Uploaded those artifacts to Sentry with our upload command | ||||||
|
||||||
The last step is deploying a new version of your application using the generated artifacts you created in step one. | ||||||
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.
Suggested change
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 is critical |
||||||
**We strongly recommend running everything you've configured above inside your CI/CD pipeline** to ensure each subsequent deploy will have readable stack traces in Sentry error events. |
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
3 changes: 3 additions & 0 deletions
3
src/platform-includes/sourcemaps/upload/create-react-app/javascript.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,3 @@ | ||
In this guide, you'll learn how to upload source maps for Create React App using our `sentry-cli` tool. | ||
|
||
<Include name="sourcemaps-create-react-app.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 |
---|---|---|
@@ -1,7 +1,7 @@ | ||
--- | ||
title: Sentry CLI | ||
description: "Upload your source maps using Sentry CLI." | ||
sidebar_order: 8 | ||
sidebar_order: 6 | ||
--- | ||
|
||
<PlatformContent includePath="sourcemaps/upload/cli" /> |
9 changes: 9 additions & 0 deletions
9
src/platforms/javascript/common/sourcemaps/uploading/create-react-app.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,9 @@ | ||
--- | ||
title: Create React App | ||
description: "Upload source maps using Create React App and Sentry CLI." | ||
sidebar_order: 7 | ||
supported: | ||
- javascript.react | ||
--- | ||
|
||
<PlatformContent includePath="sourcemaps/upload/create-react-app" /> |
2 changes: 1 addition & 1 deletion
2
src/platforms/javascript/common/sourcemaps/uploading/esbuild.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 |
---|---|---|
@@ -1,7 +1,7 @@ | ||
--- | ||
title: esbuild | ||
description: "Upload your source maps with the Sentry esbuild Plugin." | ||
sidebar_order: 5 | ||
sidebar_order: 4 | ||
--- | ||
|
||
<PlatformContent includePath="sourcemaps/upload/esbuild" /> |
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
src/platforms/javascript/common/sourcemaps/uploading/rollup.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 |
---|---|---|
@@ -1,7 +1,7 @@ | ||
--- | ||
title: Rollup | ||
description: "Upload your source maps with the Sentry Rollup Plugin." | ||
sidebar_order: 3 | ||
sidebar_order: 5 | ||
--- | ||
|
||
<PlatformContent includePath="sourcemaps/upload/rollup" /> |
2 changes: 1 addition & 1 deletion
2
src/platforms/javascript/common/sourcemaps/uploading/systemjs.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
2 changes: 1 addition & 1 deletion
2
src/platforms/javascript/common/sourcemaps/uploading/uglifyjs.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
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 |
---|---|---|
@@ -1,7 +1,7 @@ | ||
--- | ||
title: Vite | ||
description: "Upload your source maps with the Sentry Vite Plugin." | ||
sidebar_order: 4 | ||
sidebar_order: 3 | ||
--- | ||
|
||
<PlatformContent includePath="sourcemaps/upload/vite" /> |
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.
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.
"Artifact Bundles" and "Debug IDs" are terms we invented which is why we capitalize them. If we lowercase them here we need to do this over the entire docs.