---
title: "Add the Sentry SDK to Your Frontend Project"
description: "Learn how to add the Sentry SDK to your frontend codebase."
url: https://docs.sentry.io/product/sentry-basics/getting-started-tutorial/initialize-sentry-sdk-frontend/
---

# 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](https://docs.sentry.io/platforms.md) and follow its **Getting Started** guide to add the Sentry SDK to your code.
* Then, skip to the [next step](https://docs.sentry.io/product/sentry-basics/getting-started-tutorial/initialize-sentry-sdk-backend.md).

## [1. Clone the Sample Application](https://docs.sentry.io/product/sentry-basics/getting-started-tutorial/initialize-sentry-sdk-frontend.md#1-clone-the-sample-application)

The sample application is a frontend app built with React and [Vite](https://vite.dev/).

1. Fork the [sample application's repository](https://github.com/getsentry/tracing-tutorial-frontend) on GitHub.

2. Clone the forked repository to your local environment:

   If you have SSH set up:

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

   Otherwise:

   ```bash
   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](https://docs.sentry.io/product/sentry-basics/getting-started-tutorial/initialize-sentry-sdk-frontend.md#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](https://github.com/getsentry/sentry-javascript/tree/develop/packages/react).

1. Install the Sentry React SDK.

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

   ```bash
   npm install @sentry/react --save
   ```

   *Other available variations of the above snippet: yarn, pnpm*

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
   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](https://docs.sentry.io/product/sentry-basics/getting-started-tutorial/create-new-project.md).

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](https://docs.sentry.io/platforms/javascript/guides/react/configuration.md) docs.

The configuration above enables Sentry's error monitoring, [**Tracing**](https://docs.sentry.io/product/tracing.md), and [**Session Replay**](https://docs.sentry.io/platforms/javascript/guides/react/session-replay.md) 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](https://docs.sentry.io/product/sentry-basics/getting-started-tutorial/initialize-sentry-sdk-frontend.md#3-build-and-run-the-sample-application)

In the `tracing-tutorial-frontend` project folder:

1. Install project dependencies.

   ```bash
   npm install
   ```

   *Other available variations of the above snippet: yarn, pnpm*

2. Start the application in development mode.

   ```bash
   npm run dev
   ```

   *Other available variations of the above snippet: yarn, pnpm*

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

   ```bash
   VITE v8.1.2  ready in 312 ms

   ➜  Local:   http://localhost:3000/
   ➜  Network: use --host to expose
   ```

   > **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](https://docs.sentry.io/product/sentry-basics/getting-started-tutorial/initialize-sentry-sdk-frontend.md#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](https://docs.sentry.io/product/sentry-basics/getting-started-tutorial/initialize-sentry-sdk-backend.md) to get Sentry running across your entire stack.