diff --git a/src/docs/product/sentry-basics/integrate-frontend/create-new-project.mdx b/src/docs/product/sentry-basics/integrate-frontend/create-new-project.mdx index 7e8baa20abc8a..e7539cc7adb06 100644 --- a/src/docs/product/sentry-basics/integrate-frontend/create-new-project.mdx +++ b/src/docs/product/sentry-basics/integrate-frontend/create-new-project.mdx @@ -9,7 +9,7 @@ description: "Learn how to create a Sentry project and how it allows you to scop This section walks you through how to create a new project in your Sentry account and set up alerts for that project. -## Step 1: Create a Project +## 1. Create a Project _Projects_ allow you to scope events to a distinct application in your organization and assign responsibility and ownership to specific users and teams within your organization. You can create a project for a particular language or framework used in your application. For example, you might have separate projects for your API server and frontend client. For more information see [best practices for creating projects](/product/accounts/getting-started/#4-create-projects) @@ -19,33 +19,40 @@ _Projects_ allow you to scope events to a distinct application in your organizat 1. Click "Create Project". - ![Create new project](create-new-project-01.png) + If there are no projects in your account, you might be redirected to the onboarding wizard to create your first project. - Select the language or framework for your project based on the code you wish to monitor — in this case, "React". - - Under "Set your default alert settings", select "I'll create my own alerts later". + - Under "Set your alert frequency", select "Alert me on every new issue". - - Give the project a name in the "Project name" field. + - Name your project in the "Project name" field. - Assign a team to the project by selecting one in the "Team" dropdown. - ![Select project language](create-new-project-02.png) + > If you haven't defined any teams, you can either select the default org team (the team that has the same name as your Sentry org) or click on the "+" button to create a new team. - ![Select team](create-new-project-03.png) + - - Click "Create Project". This takes you to the configuration page. Read through the quick Getting Started guide. + - 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. -1. Copy the "DSN" key and keep it handy as you will be copying the key into the source code. You can also find this information any time in **[Project] > Settings > Client Keys (DSN)**. +1. Copy the "DSN" key and keep it handy. You'll need to paste it into your source code so the SDK knows where to send events to. You can also find this information any time in **[Project] > Settings > Client Keys (DSN)**. - ![Copy DSN](create-new-project-04.png) + > The DSN (or Data Source Name) tells the SDK where to send the events, associating them with the project you just created. -1. Click on the "Got it!" button at the bottom to create the project. +1. Click "Take me to Issues" to go to your new project's **Issues** page. + + +### UI Walkthrough + +The animated gif below walks through how to create a new project in the UI. + +
## Next diff --git a/src/docs/product/sentry-basics/integrate-frontend/generate-first-error.mdx b/src/docs/product/sentry-basics/integrate-frontend/generate-first-error.mdx index 40a5c83320cbc..52a2d5d761cfd 100644 --- a/src/docs/product/sentry-basics/integrate-frontend/generate-first-error.mdx +++ b/src/docs/product/sentry-basics/integrate-frontend/generate-first-error.mdx @@ -12,9 +12,9 @@ Now that the sample app is up and running on your local environment integrated w If you're using your own source code, you can skip this section. Instead: - Select your [platform](/platforms/) and follow its **Verify** step inside the **Getting Started** guide to introduce an error. -- Then continue with [Step 2: Handle the error](#step-2-handle-the-error) here. +- Then continue with [2. View the Error in Sentry](#2-view-the-error-in-sentry) here. -## Step 1: Trigger an Error +## 1. Trigger an Error Let's add in an obvious error that will be easy to see in Sentry. @@ -46,7 +46,7 @@ Let's add in an obvious error that will be easy to see in Sentry. ![Import and Configure SDK](generate-first-error-03.png) -## Step 2: View the Error in Sentry +## 2. View the Error in Sentry 1. Open up your project in [Sentry.io](https://sentry.io/). diff --git a/src/docs/product/sentry-basics/integrate-frontend/initialize-sentry-sdk.mdx b/src/docs/product/sentry-basics/integrate-frontend/initialize-sentry-sdk.mdx index 37e96f5a9b691..b6d56b8376856 100644 --- a/src/docs/product/sentry-basics/integrate-frontend/initialize-sentry-sdk.mdx +++ b/src/docs/product/sentry-basics/integrate-frontend/initialize-sentry-sdk.mdx @@ -11,10 +11,11 @@ This section walks you through how to import the sample application into your lo If you're using your own source code, you can skip this section. Instead: -- Select your [platform](/platforms/) and follow its **Getting Started** guide to add the Sentry SDK to your code. -- Then, skip to the [next step](/guides/integrate-frontend/generate-first-error/). + - Select your [platform](/platforms/) and follow its **Getting Started** guide to add the Sentry SDK to your code. + - Then, skip to the [next step](/guides/integrate-frontend/generate-first-error/). -## Step 1: Clone the Sample Application + +## 1. Clone the Sample Application The sample application is a basic frontend-only application using React and Webpack. @@ -28,19 +29,19 @@ The sample application is a basic frontend-only application using React and Webp 1. Open the "frontend-tutorial" project in your preferred code editor. -## Step 2: Add the Sentry React SDK +## 2. Add the Sentry React SDK -Sentry captures data by using a platform-specific SDK in added 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). +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 +1. Install the Sentry React SDK using NPM. - Make sure you're in the "frontend-tutorial" project folders + Make sure you're in the `frontend-tutorial` project folder. ```bash npm install --save @sentry/react ``` -1. Import and initialize the SDK +1. Import and initialize the SDK. Open `src/index.js` and add the following lines of code below the last import statement: @@ -62,9 +63,9 @@ Sentry captures data by using a platform-specific SDK in added to your applicati }); ``` - 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 application's 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 +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/). @@ -75,21 +76,21 @@ Sentry captures data by using a platform-specific SDK in added to your applicati }); ``` - The options set in `Sentry.init()` are called the SDK's configuration. The only mandatory 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 mandatory 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. -## Step 3: Build and Run the Sample Application +## 3. Build and Run the Sample Application -In the `frontend-monitoring` project folder: +In the `frontend-tutorial` project folder: -1. Install project dependencies +1. Install project dependencies. ```bash npm install ``` -1. Start the application in develop mode +1. Start the application in develop mode. ```bash npm start @@ -104,7 +105,7 @@ In the `frontend-monitoring` project folder: webpack 5.87.0 compiled successfully in 1306 ms ``` -1. Open the sample application in your browser +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.