Create Frontend and Backend Sentry Projects

In order to capture errors and other events, you need to have a project set up in Sentry. In this walkthrough we'll be creating a frontend project in React and a separate backend project in Express.

Because you can create a Sentry Project for each language or framework used in your application (for example, you might have separate projects for your API server and frontend client), a single application might have multiple projects associated with it. Once you've set up all the projects that correspond to different parts of your application in Sentry, you'll be able to scope events to a distinct application in your organization and assign responsibility to specific users and teams. For more information, see best practices for creating projects.

Create a Frontend Project

Follow the steps below to create a new Sentry project for a sample React application:

1. Log in to your Sentry organization.

2. Select Projects from the left side navigation menu.

3. Click "Create Project" and configure it as appropriate for your application:

   • Choose your platform: Select the language or framework for your project based on the code you wish to monitor. In this case, choose React.

   • Set your alert frequency: For the purpose of this tutorial, select Alert me on high priority issues.

     If you're wary of alert fatigue, learn more about how to set up your alerts in Alerts Best Practices.

   • Name your project and assign it a team: Name your project in the Project name field and assign a team by selecting one in the Team dropdown (or click + to create a new team).

   • Click Create Project. This takes you to the quick Configure React SDK guide, which provides an overview of how to configure the SDK. This tutorial covers the SDK setup in more detail.

   • You'll notice that the Sentry React SDK setup code has come pre-populated with the project's unique DSN (Data Source Name). The DSN tells the SDK where to send events, so events are associated with the right project. You'll need to paste the DSN key into the SDK configuration code later in the tutorial. You can make a note of it now, or you can also find a project's DSN anytime in [Project] > Settings > Client Keys (DSN)

4. Click Take me to Issues to go to your new project's Issues page.

UI Walkthrough

The interactive demo below walks through how to create a new project in the UI.

Create a Backend Project

Next, follow the steps below to create a new Sentry project for a sample Backend application:

1. Log in to your Sentry organization.

2. Select Projects from the left side navigation menu to display the list of all your projects.

3. Click "Create Project" and configure it as appropriate for your application:

   • Choose your platform: In this case, choose Express.

   • Set your alert frequency: Once again, select Alert me on high priority issues.

   • Name your project and assign it a team: Make sure to give it a different project name than your frontend application.

   • Click Create Project. This takes you to the quick Configure Express SDK guide, which provides an overview of how to configure the SDK.

4. Copy the DSN key and keep it handy.

   You can also find a project's DSN anytime in [Project] > Settings > Client Keys (DSN).

5. Click Take me to Issues to go to your new project's Issues page.

UI Walkthrough

Next

Now that you have your Sentry projects set up, you can Add the Sentry SDK to Your Frontend Project.