Skip to content

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 8 commits into from
Aug 16, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 114 additions & 0 deletions src/includes/sourcemaps-create-react-app.mdx
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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Visit [What are Artifact Bundles](/platforms/javascript/sourcemaps/troubleshooting_js/artifact-bundles/) if you want to learn more about Artifact Bundles and Debug IDs.
Visit [What are Artifact Bundles](/platforms/javascript/sourcemaps/troubleshooting_js/artifact-bundles/) if you want to learn more about artifact bundles and debug IDs.

Copy link
Contributor Author

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.


To inject Debug IDs, use the following command **every time after building your application**:

```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:

```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
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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
The last step is deploying a new version of your application using the generated artifacts you created in step one.
The last step is deploying a new version of your application using the generated artifacts you created.

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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.
8 changes: 8 additions & 0 deletions src/platform-includes/sourcemaps/overview/javascript.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,14 @@ The easiest way to configure uploading source maps is by using the Sentry Wizard

If you want to configure source maps upload manually, follow the guide for your bundler or build tool below.

<PlatformSection supported={["javascript.react"]}>

### Create React App

If you used Create React App to set up your React application see our <PlatformLink to="/sourcemaps/uploading/create-react-app/">Create React App</PlatformLink> guide to upload source maps.

</PlatformSection>

### Sentry Bundler Support

- <PlatformLink to="/sourcemaps/uploading/webpack/">Webpack</PlatformLink>
Expand Down
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" />
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" />
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" />
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" />
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: Hosting Publicly
description: "Learn about publicly hosting your source maps, including how to address various security concerns."
redirect_from:
- /platforms/javascript/sourcemaps/hosting-publicly/
sidebar_order: 9
sidebar_order: 10
---

<Note>
Expand Down
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" />
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: SystemJS
description: "Upload your source maps using SystemJS and Sentry CLI."
sidebar_order: 7
sidebar_order: 9
notSupported:
- javascript.svelte
- javascript.sveltekit
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: UglifyJS
description: "Upload your source maps using UglifyJS and Sentry CLI."
sidebar_order: 6
sidebar_order: 8
notSupported:
- javascript.svelte
- javascript.vue
Expand Down
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" />