diff --git a/docs/product/sentry-basics/integrate-frontend/initialize-sentry-sdk.mdx b/docs/product/sentry-basics/integrate-frontend/initialize-sentry-sdk.mdx index b8b2226f4190e..c4bdefd82b256 100644 --- a/docs/product/sentry-basics/integrate-frontend/initialize-sentry-sdk.mdx +++ b/docs/product/sentry-basics/integrate-frontend/initialize-sentry-sdk.mdx @@ -25,72 +25,37 @@ The sample application is a basic frontend-only application using React and webp 1. Open the `frontend-tutorial` project in your preferred code editor. -## 2. Add the Sentry React SDK +## 2. Initialize the Sentry React SDK Sentry captures data by using a platform-specific SDK that you add to your application's runtime. To use the SDK, import and configure it in your source code. This demo project uses [Sentry's React SDK](https://github.com/getsentry/sentry-javascript/tree/develop/packages/react). -1. Install the Sentry React SDK using NPM. - Make sure you're in the `frontend-tutorial` project folder. +Open src/index.js where you will find the 'Sentry.init()' call after the last import statement. Paste the DSN key value you copied from the project created in the [previous section](https://github.com/product/sentry-basics/integrate-frontend/create-new-project/) into the call and save this file: - ```bash {tabTitle:npm} - npm install @sentry/react --save - ``` - - ```bash {tabTitle:yarn} - yarn add @sentry/react - ``` - - ```bash {tabTitle:pnpm} - pnpm add @sentry/react - ``` +```javascript {filename:src/instrument.js} +import * as Sentry from "@sentry/react"; -1. Import and initialize the SDK. +Sentry.init({ + dsn: "", + integrations: [Sentry.browserTracingIntegration(), Sentry.replayIntegration()], - Open `src/index.js` and add the following lines of code below the last import statement: + // Set tracesSampleRate to 1.0 to capture 100% + // of transactions for performance monitoring. + tracesSampleRate: 1.0, - ```javascript {filename:src/index.js} - import * as Sentry from "@sentry/react"; - - Sentry.init({ - dsn: "", - integrations: [Sentry.browserTracingIntegration(), Sentry.replayIntegration()], - - // Set tracesSampleRate to 1.0 to capture 100% - // of transactions for performance monitoring. - // Learn more at - // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate - tracesSampleRate: 1.0, - - // Capture Replay for 10% of all sessions, - // plus for 100% of sessions with an error - // Learn more at - // https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration - replaysSessionSampleRate: 0.1, - replaysOnErrorSampleRate: 1.0, - ${} - }); - ``` + // Capture Replay for 10% of all sessions, + // plus for 100% of sessions with an error + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, +}); +``` - It's important to import and initialize the SDK as early as possible in your application's lifecycle so Sentry can capture errors throughout the lifecycle. +It's important to import and initialize the SDK as early as possible in your application's lifecycle so Sentry can capture errors throughout the lifecycle. + - - -1. Add your DSN key to the Sentry SDK configuration. - - Paste in the DSN key value you copied from the project created in the [previous section](/product/sentry-basics/integrate-frontend/create-new-project/). - - ```javascript {filename:src/index.js} - Sentry.init({ - dsn: "", - // ... - }); - ``` - -1. Save the file. - -The options set in `Sentry.init()` are called the SDK's configuration. The only required configuration option is the DSN. However, the SDK supports many other configuration options. Learn more in our [Configuration](/platforms/javascript/guides/react/configuration/) docs. +The options set in `Sentry.init()` are called the SDK's configuration. The only required configuration option is the DSN. +However, the SDK supports many other configuration options. Learn more in our [Configuration](/platforms/javascript/guides/react/configuration/) docs. The configuration above enables Sentry's error monitoring feature, as well as its [Performance](/platforms/javascript/guides/react/performance) (tracing) and [Session Replay](/platforms/javascript/guides/react/session-replay) features. @@ -107,23 +72,24 @@ In the `frontend-tutorial` project folder: 1. Start the application in develop mode. ```bash - npm start + npm run dev ``` Once the application starts, you'll see a confirmation message similar to this one in your terminal: ```bash - [webpack-dev-server] Project is running at: - [webpack-dev-server] Loopback: http://localhost:3000/ - ... - webpack 5.87.0 compiled successfully in 1306 ms - ``` + > frontend-tutorial@2.0.0 dev + > vite + VITE v6.2.2 ready in 670 ms - > **Troubleshooting tip**: If the application fails to start due to syntax errors or errors for missing dependencies/modules, make sure you're using Node 18+ and install dependencies again. Run `nvm use 18` and then `npm install`. + ➜ Local: http://localhost:5173/ + ➜ Network: use --host to expose + ➜ press h + enter to show help + ``` 1. Open the sample application in your browser. - The sample app should be running at [http://localhost:3000/](http://localhost:3000/) or the URL output in your terminal in the last step. + The sample app should be running at [http://localhost:5173/](http://localhost:5173/) or the URL output in your terminal in the last step. ![Sample app UX showing an online hardware store](./img/FE-tutorial-demo-app.png) diff --git a/includes/platforms/configuration/options/js-config-options.mdx b/includes/platforms/configuration/options/js-config-options.mdx index dc0ac0366fc78..af6ad83cf7937 100644 --- a/includes/platforms/configuration/options/js-config-options.mdx +++ b/includes/platforms/configuration/options/js-config-options.mdx @@ -1 +1 @@ -Learn more about the [tracesSampleRate](/platforms/javascript/configuration/options/#traces-sample-rate), [replaysSessionSampleRate](/platforms/javascript/session-replay/configuration/#general-integration-configuration), and [replaysOnErrorSampleRate](/platforms/javascript/session-replay/configuration/#general-integration-configuration). +Learn more about the [tracesSampleRate](/platforms/javascript/configuration/options/#sampleRate), [replaysSessionSampleRate](/platforms/javascript/session-replay/configuration/#general-integration-configuration), and [replaysOnErrorSampleRate](/platforms/javascript/session-replay/configuration/#general-integration-configuration).