Add the Sentry SDK to Your Frontend Project

Step 2 of 5

This section walks you through how to import the sample app into your local dev environment, then add and initialize the Sentry SDK.

If you're using your own source code, you can skip this section. Instead:

• Select your platform and follow its Getting Started guide to add the Sentry SDK to your code.
• Then, skip to the next step.

1. Clone the Sample Application

The sample application is a frontend app built with React and Vite.

1. Fork the sample application's repository on GitHub.

2. Clone the forked repository to your local environment:

   If you have SSH set up:

   Bash

   Copied

   git clone git@github.com:<your_username>/tracing-tutorial-frontend.git
   

   Otherwise:

   Bash

   Copied

   git clone https://github.com/<your_username>/tracing-tutorial-frontend.git
   

3. Open the tracing-tutorial-frontend project in your preferred code editor.

2. Add the Sentry React SDK

Sentry captures data using a platform-specific SDK that you add to your app's runtime. To use the SDK, import and configure it in your source code. This demo project uses Sentry's React SDK.

1. Install the Sentry React SDK.

   Make sure you're in the tracing-tutorial-frontend project folder.

   npmyarnpnpm

   Copied

   npm install @sentry/react --save
   

2. Import and Initialize the SDK.

   Open src/main.jsx and add the following lines of code below the last import statement. It's important to import and initialize the SDK as early as possible in your app's lifecycle so Sentry can capture errors throughout it.

   JavaScript

   src/main.jsx

   Copied

   import * as Sentry from "@sentry/react";
   
   Sentry.init({
     dsn: "<your_DSN_key>",
     integrations: [
       Sentry.browserTracingIntegration(),
       Sentry.replayIntegration(),
     ],
     // Capture 100% of transactions for tracing.
     tracesSampleRate: 1.0,
     // Enable distributed tracing for requests to these targets. "localhost"
     // covers this tutorial; the second entry is just an example — replace it
     // with a pattern that matches your own backend URL(s) in production.
     tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
     // Session Replay sample rates.
     replaysSessionSampleRate: 0.1,
     replaysOnErrorSampleRate: 1.0,
   });
   

3. Add your DSN key to the Sentry SDK configuration.

   Replace <your_DSN_key> in the sample above with the DSN key value you copied from the frontend project you created in the previous section.

4. Save the file.

The options set in Sentry.init() are called the SDK's configuration. The only required option is the DSN; the SDK supports many others, which you can read about in our Configuration docs.

The configuration above enables Sentry's error monitoring, Tracing, and Session Replay features. The tracePropagationTargets option controls which URLs distributed tracing is enabled for. Since both of this tutorial's apps run on localhost, you're all set.

3. Build and Run the Sample Application

In the tracing-tutorial-frontend project folder:

1. Install project dependencies.

   npmyarnpnpm

   Copied

   npm install
   

2. Start the application in development mode.

   npmyarnpnpm

   Copied

   npm run dev
   

   Once the application starts, you'll see a confirmation message similar to this one in your terminal:

   Troubleshooting tip: If the application fails to start due to syntax errors or missing dependencies/modules, make sure you're using Node 18+ and install dependencies again.

3. Open the sample application in your browser.

   The sample app should be running at http://localhost:3000/ or the URL output in your terminal in the last step. You should see a sample e-commerce page. Click the buttons on this page to trigger an uncaught runtime error. The buttons won't work correctly until you get your backend up and running. You can follow along with what's happening in the browser by opening your browser's dev tools.

   

Next

Nicely done! You now have a sample React app running with the Sentry SDK initialized. Next, Add the Sentry SDK to Your Backend Project to get Sentry running across your entire stack.