Add the Sentry SDK to Your Project
This section walks you through how to import the sample application into your local development environment, add the Sentry SDK, and initialize it.
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 basic frontend-only application using React and webpack.
Fork the sample application's repository on GitHub.
Clone the forked repository to your local environment:
Copiedgit clone git@github.com:<your_username>/frontend-tutorial.git
Open the
frontend-tutorial
projectRepresents your service in Sentry and allows you to scope events to a distinct application.in your preferred code editor.
2. Add 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
Install the Sentry React SDK using NPM.
Make sure you're in the
frontend-tutorial
project folder.Copiednpm install --save @sentry/react
Import and initialize the SDK.
Open
src/index.js
and add the following lines of code below the last import statement:src/index.js
Copiedimport * as Sentry from "@sentry/react"; Sentry.init({ dsn: "<your_DSN_key>", integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. tracesSampleRate: 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.
Add your
DSNThe Data Source Name (DSN) key tells the Sentry SDK where to send events, ensuring they go to the right project.key to the Sentry SDK configuration.Paste in the DSN key value you copied from the project created in the previous section.
src/index.js
CopiedSentry.init({ dsn: "<your_DSN_key>", // ... });
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 docs.
The configuration above enables Sentry's error monitoring feature, as well as its Performance (
3. Build and Run the Sample Application
In the frontend-tutorial
Install project dependencies.
Copiednpm install
Start the application in develop mode.
Copiednpm start
Once the application starts, you'll see a confirmation message similar to this one in your terminal:
Copied<i> [webpack-dev-server] Project is running at: <i> [webpack-dev-server] Loopback: http://localhost:3000/ ... webpack 5.87.0 compiled successfully in 1306 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 thennpm install
.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.
Next
At this point, you have a sample React app running with the Sentry SDK initialized. Next, Capture Your First Error to start using Sentry's error monitoring feature.
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").