diff --git a/docs/platforms/javascript/common/index.mdx b/docs/platforms/javascript/common/index.mdx index b8e1406753cda..2d6d89442f20b 100644 --- a/docs/platforms/javascript/common/index.mdx +++ b/docs/platforms/javascript/common/index.mdx @@ -4,9 +4,9 @@ - + -Check out the other SDKs we support in the left-hand dropdown. +This guide focuses on plain JavaScript. If you're working with React, Next.js, or any other framework, choose the fitting SDK from the left-hand dropdown. @@ -14,7 +14,13 @@ Check out the other SDKs we support in the left-hand dropdown. - + + + + + + + @@ -22,7 +28,7 @@ Check out the other SDKs we support in the left-hand dropdown. - + ## Features @@ -39,20 +45,24 @@ Select which Sentry features you'd like to install in addition to Error Monitori - -## Install - + ## Step 1: Install - + In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/). You can also collect and analyze performance profiles from real users with [profiling](/product/explore/profiling/). @@ -140,3 +150,4 @@ To view and resolve the recorded error, log into [sentry.io](https://sentry.io) + diff --git a/docs/platforms/javascript/config.yml b/docs/platforms/javascript/config.yml index eebad82b5c1f6..43522a70c3073 100644 --- a/docs/platforms/javascript/config.yml +++ b/docs/platforms/javascript/config.yml @@ -1,4 +1,5 @@ title: Browser JavaScript +description: Learn how to manually set up Sentry in your JavaScript app and capture your first errors. platformTitle: JavaScript sidebar_title: JavaScript caseStyle: camelCase diff --git a/platform-includes/getting-started-complete/javascript.mdx b/platform-includes/getting-started-complete/javascript.mdx new file mode 100644 index 0000000000000..9cb7b43c75f81 --- /dev/null +++ b/platform-includes/getting-started-complete/javascript.mdx @@ -0,0 +1,61 @@ + + +## Step 1: Install + +Choose the features you want to configure, and this guide will show you how: + + + + + +### Install the Sentry SDK + + + +## Step 2: Configure + +### Initialize the Sentry SDK + + + +## Step 3: Add Readable Stack Traces With Source Maps (Optional) + + + +## Step 4: Avoid Ad Blockers With Tunneling (Optional) + + + +## Step 5: Verify Your Setup + + + +### View Captured Data in Sentry + +Now, head over to your project on [Sentry.io](https://sentry.io) to view the collected data (it takes a couple of moments for the data to appear). + + + +At this point, you should have integrated Sentry into your JavaScript application and should already be sending data to your Sentry project. + +Now's a good time to customize your setup and look into more advanced topics. Our next recommended steps for you are: + +- Extend Sentry to your backend using one of our [SDKs](/) +- Learn how to [manually capture errors](/platforms/javascript/usage/) +- Continue to [customize your configuration](/platforms/javascript/configuration/) +- Get familiar with [Sentry's product features](/product) like tracing, insights, and alerts + + + +- Find various support topics in troubleshooting +- [Get support](https://sentry.zendesk.com/hc/en-us/) + + diff --git a/platform-includes/getting-started-config/javascript.mdx b/platform-includes/getting-started-config/javascript.mdx index 5e4de083a78eb..33e1aa2c52edd 100644 --- a/platform-includes/getting-started-config/javascript.mdx +++ b/platform-includes/getting-started-config/javascript.mdx @@ -1,16 +1,4 @@ - - -Once this is done, Sentry's JavaScript SDK will capture all unhandled exceptions, transactions, and Session Replays, based on the sample rates set. - -Note, that configuration differs slightly depending on how you installed the Sentry SDK. Make sure to follow the instructions in the correct tab, depending on if you installed the Sentry SDK via NPM, using the Loader Script, or via CDN. +Initialize Sentry as early as possible in your application's lifecycle. The setup differs slightly depending on how you installed the Sentry SDK. Be sure to follow the instructions in the related tab (npm, Loader, CDN): ```javascript {tabTitle:npm} import * as Sentry from "@sentry/browser"; @@ -39,13 +27,13 @@ Sentry.init({ }), // ___PRODUCT_OPTION_END___ user-feedback ], - // ___PRODUCT_OPTION_START___ logs + // Enable logs to be sent to Sentry enableLogs: true, // ___PRODUCT_OPTION_END___ logs - // ___PRODUCT_OPTION_START___ performance + // Set tracesSampleRate to 1.0 to capture 100% // of transactions for tracing. // We recommend adjusting this value in production @@ -56,8 +44,8 @@ Sentry.init({ // Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/], // ___PRODUCT_OPTION_END___ performance - // ___PRODUCT_OPTION_START___ session-replay + // Capture Replay for 10% of all sessions, // plus for 100% of sessions with an error // Learn more at @@ -100,13 +88,13 @@ Sentry.init({ }), // ___PRODUCT_OPTION_END___ user-feedback ], - // ___PRODUCT_OPTION_START___ logs + // Enable logs to be sent to Sentry enableLogs: true, // ___PRODUCT_OPTION_END___ logs - // ___PRODUCT_OPTION_START___ performance + // Set tracesSampleRate to 1.0 to capture 100% // of transactions for tracing. // We recommend adjusting this value in production @@ -117,8 +105,8 @@ Sentry.init({ // Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/], // ___PRODUCT_OPTION_END___ performance - // ___PRODUCT_OPTION_START___ session-replay + // Capture Replay for 10% of all sessions, // plus for 100% of sessions with an error // Learn more at @@ -163,13 +151,13 @@ Sentry.init({ }), // ___PRODUCT_OPTION_END___ user-feedback ], - // ___PRODUCT_OPTION_START___ logs + // Enable logs to be sent to Sentry enableLogs: true, // ___PRODUCT_OPTION_END___ logs - // ___PRODUCT_OPTION_START___ performance + // Set tracesSampleRate to 1.0 to capture 100% // of transactions for tracing. // We recommend adjusting this value in production @@ -180,8 +168,8 @@ Sentry.init({ // Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/], // ___PRODUCT_OPTION_END___ performance - // ___PRODUCT_OPTION_START___ session-replay + // Capture Replay for 10% of all sessions, // plus for 100% of sessions with an error // Learn more at diff --git a/platform-includes/getting-started-install/javascript.mdx b/platform-includes/getting-started-install/javascript.mdx index 75dfbc2276f86..9d60a9204014b 100644 --- a/platform-includes/getting-started-install/javascript.mdx +++ b/platform-includes/getting-started-install/javascript.mdx @@ -1,16 +1,8 @@ -In order to get started using the Sentry JavaScript SDK, add the following code to the top of your application, before all other scripts: +We recommend installing Sentry via a package manager. If that isn't an option for you, you can use the [Loader Script](/platforms/javascript/install/loader/) or a CDN bundle. +#### Option 1: Packet Manager (Recommended) -```html - -``` - -The Loader Script allows you to configure some SDK features from the Sentry UI, without having to redeploy your application. The [Loader Script documentation](/platforms/javascript/install/loader/) shows more information about how to use it. - -Alternatively, you can also install the SDK via a package manager: +Run the command for your preferred package manager to add the Sentry SDK to your application: ```bash {tabTitle:npm} npm install @sentry/browser --save @@ -24,12 +16,20 @@ yarn add @sentry/browser pnpm add @sentry/browser ``` - +#### Option 2: Loader Script -We also support installation via [CDN bundles](/platforms/javascript/install/loader/#cdn). +In Sentry, go to +**Settings > Projects > (select project) > SDK Setup > Loader Script**. +Enable the features you want (for example, Tracing or Session Replay), copy the script tag, and place it before all other scripts in your app. - +#### Option 3: CDN Bundle -If you're updating your Sentry SDK to the latest version, check out our [migration guide](https://github.com/getsentry/sentry-javascript/blob/master/MIGRATION.md) to learn more about breaking changes. +Sentry provides different bundles that include specific feature combinations. Go to our list of [available bundles](/platforms/javascript/install/loader/#cdn) and copy the one that fits your needs. +Next, place the script tag before all other scripts in your app. -If you are using our previous Browser JavaScript SDK, you can access the legacy SDK documentation, until further notice. + + If you're updating your Sentry SDK to the latest version, check out our + [migration + guide](https://github.com/getsentry/sentry-javascript/blob/master/MIGRATION.md) + to learn more about breaking changes. + diff --git a/platform-includes/getting-started-verify/javascript.mdx b/platform-includes/getting-started-verify/javascript.mdx index 6889458446923..10e981a36271b 100644 --- a/platform-includes/getting-started-verify/javascript.mdx +++ b/platform-includes/getting-started-verify/javascript.mdx @@ -1,11 +1,46 @@ -```javascript -setTimeout(() => { - throw new Error("Sentry Test Error"); -}); +Let's test your setup and confirm that data reaches your Sentry project. + +### Issues + +To verify that Sentry captures errors and creates issues in your Sentry project, add a button that throws an error when clicked: + +```html + + + ``` - + + Open the page in a browser and click the button to throw an error. + + + + + +### Tracing +To test your tracing configuration, update the previous code to simulate a longer operation and start a trace: + +```html + + + +``` -Errors triggered from within Browser DevTools are sandboxed and won't trigger an error handler. Place the snippet directly in your code instead. +Open the page in a browser and click the button to throw an error and create a trace. - +