From 78ec0ed19b2914a3498dd26237563b2737afc76e Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Mon, 14 Aug 2023 13:12:16 +0200 Subject: [PATCH 1/8] Add source maps upload instructions for CRA --- src/includes/sourcemaps-create-react-app.mdx | 114 ++++++++++++++++++ .../upload/create-react-app/javascript.mdx | 3 + .../common/sourcemaps/uploading/cli.mdx | 2 +- .../sourcemaps/uploading/create-react-app.mdx | 9 ++ .../common/sourcemaps/uploading/esbuild.mdx | 2 +- .../sourcemaps/uploading/hosting-publicly.mdx | 2 +- .../common/sourcemaps/uploading/rollup.mdx | 2 +- .../common/sourcemaps/uploading/systemjs.mdx | 2 +- .../common/sourcemaps/uploading/uglifyjs.mdx | 2 +- .../common/sourcemaps/uploading/vite.mdx | 2 +- 10 files changed, 133 insertions(+), 7 deletions(-) create mode 100644 src/includes/sourcemaps-create-react-app.mdx create mode 100644 src/platform-includes/sourcemaps/upload/create-react-app/javascript.mdx create mode 100644 src/platforms/javascript/common/sourcemaps/uploading/create-react-app.mdx diff --git a/src/includes/sourcemaps-create-react-app.mdx b/src/includes/sourcemaps-create-react-app.mdx new file mode 100644 index 0000000000000..4d0fb5af46e94 --- /dev/null +++ b/src/includes/sourcemaps-create-react-app.mdx @@ -0,0 +1,114 @@ + + +## Automatic Setup + +The easiest way to configure uploading source maps with Sentry CLI is by using the Sentry Wizard: + + + +If you want to configure source maps upload with the CLI, 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 updload 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 +``` + + + +For more info on `sentry-cli` configuration visit the [Sentry CLI configuration docs](/product/cli/configuration/). + + + +Make sure `sentry-cli` is configured for your project. For that you can use environment variables: + + + + + +```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**: + +```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= +//# sourceMappingURL= +``` + +Source maps should now contain a field named `debug_id`: + +```json {filename:exampleSourceMap.js.map} +{ + ... + "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. +**We strongly recommend running all of the things you have configured above to run inside your CI/CD Pipeline**, to ensure each subsequent deploy will have readable stack traces in Sentry error events. diff --git a/src/platform-includes/sourcemaps/upload/create-react-app/javascript.mdx b/src/platform-includes/sourcemaps/upload/create-react-app/javascript.mdx new file mode 100644 index 0000000000000..170bf1ba301fa --- /dev/null +++ b/src/platform-includes/sourcemaps/upload/create-react-app/javascript.mdx @@ -0,0 +1,3 @@ +In this guide, you'll learn how to upload source maps for Create React App using our `sentry-cli` tool. + + diff --git a/src/platforms/javascript/common/sourcemaps/uploading/cli.mdx b/src/platforms/javascript/common/sourcemaps/uploading/cli.mdx index bb9c8d3177e47..dc6178b308579 100644 --- a/src/platforms/javascript/common/sourcemaps/uploading/cli.mdx +++ b/src/platforms/javascript/common/sourcemaps/uploading/cli.mdx @@ -1,7 +1,7 @@ --- title: Sentry CLI description: "Upload your source maps using Sentry CLI." -sidebar_order: 8 +sidebar_order: 6 --- diff --git a/src/platforms/javascript/common/sourcemaps/uploading/create-react-app.mdx b/src/platforms/javascript/common/sourcemaps/uploading/create-react-app.mdx new file mode 100644 index 0000000000000..e6d367f406efc --- /dev/null +++ b/src/platforms/javascript/common/sourcemaps/uploading/create-react-app.mdx @@ -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 +--- + + diff --git a/src/platforms/javascript/common/sourcemaps/uploading/esbuild.mdx b/src/platforms/javascript/common/sourcemaps/uploading/esbuild.mdx index 07f571cbba217..cb1c3595d9807 100644 --- a/src/platforms/javascript/common/sourcemaps/uploading/esbuild.mdx +++ b/src/platforms/javascript/common/sourcemaps/uploading/esbuild.mdx @@ -1,7 +1,7 @@ --- title: esbuild description: "Upload your source maps with the Sentry esbuild Plugin." -sidebar_order: 5 +sidebar_order: 4 --- diff --git a/src/platforms/javascript/common/sourcemaps/uploading/hosting-publicly.mdx b/src/platforms/javascript/common/sourcemaps/uploading/hosting-publicly.mdx index f06006441a4c3..028a1df614efd 100644 --- a/src/platforms/javascript/common/sourcemaps/uploading/hosting-publicly.mdx +++ b/src/platforms/javascript/common/sourcemaps/uploading/hosting-publicly.mdx @@ -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 --- diff --git a/src/platforms/javascript/common/sourcemaps/uploading/rollup.mdx b/src/platforms/javascript/common/sourcemaps/uploading/rollup.mdx index 3c58467e10f79..92942b8208923 100644 --- a/src/platforms/javascript/common/sourcemaps/uploading/rollup.mdx +++ b/src/platforms/javascript/common/sourcemaps/uploading/rollup.mdx @@ -1,7 +1,7 @@ --- title: Rollup description: "Upload your source maps with the Sentry Rollup Plugin." -sidebar_order: 3 +sidebar_order: 5 --- diff --git a/src/platforms/javascript/common/sourcemaps/uploading/systemjs.mdx b/src/platforms/javascript/common/sourcemaps/uploading/systemjs.mdx index af3606157fe5e..8f3d142cd87b8 100644 --- a/src/platforms/javascript/common/sourcemaps/uploading/systemjs.mdx +++ b/src/platforms/javascript/common/sourcemaps/uploading/systemjs.mdx @@ -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 diff --git a/src/platforms/javascript/common/sourcemaps/uploading/uglifyjs.mdx b/src/platforms/javascript/common/sourcemaps/uploading/uglifyjs.mdx index f61aa8bf45bfe..99b91d2c4d162 100644 --- a/src/platforms/javascript/common/sourcemaps/uploading/uglifyjs.mdx +++ b/src/platforms/javascript/common/sourcemaps/uploading/uglifyjs.mdx @@ -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 diff --git a/src/platforms/javascript/common/sourcemaps/uploading/vite.mdx b/src/platforms/javascript/common/sourcemaps/uploading/vite.mdx index bda4bc392215f..47ea43e6bcc72 100644 --- a/src/platforms/javascript/common/sourcemaps/uploading/vite.mdx +++ b/src/platforms/javascript/common/sourcemaps/uploading/vite.mdx @@ -1,7 +1,7 @@ --- title: Vite description: "Upload your source maps with the Sentry Vite Plugin." -sidebar_order: 4 +sidebar_order: 3 --- From 8dfd0674bb785fef228eb73a43b5f8570970890f Mon Sep 17 00:00:00 2001 From: Steven Eubank <47563310+smeubank@users.noreply.github.com> Date: Wed, 16 Aug 2023 09:01:28 +0200 Subject: [PATCH 2/8] Update src/includes/sourcemaps-create-react-app.mdx Co-authored-by: vivianyentran <20403606+vivianyentran@users.noreply.github.com> --- src/includes/sourcemaps-create-react-app.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/includes/sourcemaps-create-react-app.mdx b/src/includes/sourcemaps-create-react-app.mdx index 4d0fb5af46e94..254d2d55b00dd 100644 --- a/src/includes/sourcemaps-create-react-app.mdx +++ b/src/includes/sourcemaps-create-react-app.mdx @@ -6,7 +6,7 @@ The easiest way to configure uploading source maps with Sentry CLI is by using t -If you want to configure source maps upload with the CLI, follow the steps below. +If you want to configure source maps upload with the CLI manually instead, follow the steps below. ## Manual Setup From a1df05062e65c08d7b1fc9ca7c04bc75118237c1 Mon Sep 17 00:00:00 2001 From: Steven Eubank <47563310+smeubank@users.noreply.github.com> Date: Wed, 16 Aug 2023 09:16:20 +0200 Subject: [PATCH 3/8] Update javascript.mdx should we add this here generically or create something specific for react? i'm just thinking it might be good to get people looking at next or browser and missing --- src/platform-includes/sourcemaps/overview/javascript.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/platform-includes/sourcemaps/overview/javascript.mdx b/src/platform-includes/sourcemaps/overview/javascript.mdx index 9206914e130f1..b2b2be482d0a1 100644 --- a/src/platform-includes/sourcemaps/overview/javascript.mdx +++ b/src/platform-includes/sourcemaps/overview/javascript.mdx @@ -22,6 +22,7 @@ If you want to configure source maps upload manually, follow the guide for your If you're using one of Webpack, Vite, Rollup or Esbuild, use the corresponding Sentry plugin instead (see section "Sentry Bundler Support"). +- Create React App - UglifyJS - SystemJS - [GitHub Actions](/product/releases/setup/release-automation/github-actions/) From 948823fd36e39d8e7f7317d1642c4caa1d7f3b45 Mon Sep 17 00:00:00 2001 From: "getsantry[bot]" <66042841+getsantry[bot]@users.noreply.github.com> Date: Wed, 16 Aug 2023 07:18:24 +0000 Subject: [PATCH 4/8] style(lint): Auto commit lint changes --- src/platform-includes/sourcemaps/overview/javascript.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/platform-includes/sourcemaps/overview/javascript.mdx b/src/platform-includes/sourcemaps/overview/javascript.mdx index b2b2be482d0a1..c7018737ddd3b 100644 --- a/src/platform-includes/sourcemaps/overview/javascript.mdx +++ b/src/platform-includes/sourcemaps/overview/javascript.mdx @@ -22,7 +22,9 @@ If you want to configure source maps upload manually, follow the guide for your If you're using one of Webpack, Vite, Rollup or Esbuild, use the corresponding Sentry plugin instead (see section "Sentry Bundler Support"). -- Create React App +- + Create React App + - UglifyJS - SystemJS - [GitHub Actions](/product/releases/setup/release-automation/github-actions/) From 7134ec4870bf570e519303ba58660a69ded96c34 Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Wed, 16 Aug 2023 11:31:57 +0200 Subject: [PATCH 5/8] Add to overview page --- src/platform-includes/sourcemaps/overview/javascript.mdx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/platform-includes/sourcemaps/overview/javascript.mdx b/src/platform-includes/sourcemaps/overview/javascript.mdx index c7018737ddd3b..53c57f777d8fb 100644 --- a/src/platform-includes/sourcemaps/overview/javascript.mdx +++ b/src/platform-includes/sourcemaps/overview/javascript.mdx @@ -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. + + +### Create React App + +If you used Create React App to set up your React application see our Create React App guide to upload source maps. + + + ### Sentry Bundler Support - Webpack From 9870a64a0159c2f983d2699a4b6e3e8f0b33c6bf Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Wed, 16 Aug 2023 11:38:26 +0200 Subject: [PATCH 6/8] Apply suggestions from code review Co-authored-by: vivianyentran <20403606+vivianyentran@users.noreply.github.com> --- src/includes/sourcemaps-create-react-app.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/includes/sourcemaps-create-react-app.mdx b/src/includes/sourcemaps-create-react-app.mdx index 254d2d55b00dd..d913485112bd0 100644 --- a/src/includes/sourcemaps-create-react-app.mdx +++ b/src/includes/sourcemaps-create-react-app.mdx @@ -16,7 +16,7 @@ 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 updload the artifacts that were generated during the 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 @@ -102,7 +102,7 @@ sentry-cli sourcemaps upload /path/to/build 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 +### 5. Deploy Your Application If you're following this guide from your local machine, then you've successfully: @@ -111,4 +111,4 @@ If you're following this guide from your local machine, then you've successfully 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. -**We strongly recommend running all of the things you have configured above to run inside your CI/CD Pipeline**, to ensure each subsequent deploy will have readable stack traces in Sentry error events. +**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. From db0a5d4dcca1a9244f1ef54fc9edc5a2a84b36d2 Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Wed, 16 Aug 2023 11:50:15 +0200 Subject: [PATCH 7/8] Use hardcoded link to please linter --- src/platform-includes/sourcemaps/overview/javascript.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform-includes/sourcemaps/overview/javascript.mdx b/src/platform-includes/sourcemaps/overview/javascript.mdx index 53c57f777d8fb..9635d80a16ef0 100644 --- a/src/platform-includes/sourcemaps/overview/javascript.mdx +++ b/src/platform-includes/sourcemaps/overview/javascript.mdx @@ -10,7 +10,7 @@ If you want to configure source maps upload manually, follow the guide for your ### Create React App -If you used Create React App to set up your React application see our Create React App guide to upload source maps. +If you used Create React App to set up your React application see our [Create React App](/platforms/javascript/guides/react/sourcemaps/uploading) guide to upload source maps. From bb4dbcb98142682edc7270a6a8282b72084a1a40 Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Wed, 16 Aug 2023 12:04:17 +0200 Subject: [PATCH 8/8] ... --- src/platform-includes/sourcemaps/overview/javascript.mdx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/platform-includes/sourcemaps/overview/javascript.mdx b/src/platform-includes/sourcemaps/overview/javascript.mdx index 9635d80a16ef0..7647f6f938efb 100644 --- a/src/platform-includes/sourcemaps/overview/javascript.mdx +++ b/src/platform-includes/sourcemaps/overview/javascript.mdx @@ -10,7 +10,7 @@ If you want to configure source maps upload manually, follow the guide for your ### Create React App -If you used Create React App to set up your React application see our [Create React App](/platforms/javascript/guides/react/sourcemaps/uploading) guide to upload source maps. +If you used Create React App to set up your React application see our Create React App guide to upload source maps. @@ -30,9 +30,6 @@ If you used Create React App to set up your React application see our [Create Re If you're using one of Webpack, Vite, Rollup or Esbuild, use the corresponding Sentry plugin instead (see section "Sentry Bundler Support"). -- - Create React App - - UglifyJS - SystemJS - [GitHub Actions](/product/releases/setup/release-automation/github-actions/)