Project Setup
Creating a Sentry project for your app, choosing the right platform, and getting your DSN.
A Sentry project is the connection point between one specific app and your Sentry account. Each app you build — your personal site, Finpist, the EduTrack admin panel — gets its own Sentry project. Projects keep errors from different apps separate so you're not looking at one app's errors when debugging another.
Why One Project Per App
Think of it like separate client files in a CA practice. You don't mix one client's documents with another's — even if both clients have the same kind of issue. The same logic applies here.
| App | Its own Sentry project |
|---|---|
| EduTrack admin panel (web) | edutrack-web |
| EduTrack customer app (mobile) | edutrack-customer |
| EduTrack partner app (mobile) | edutrack-partner |
| Your CA firm website | sharma-associates-web |
| Finpist | finpist-web |
Each project has its own DSN (the address your app sends errors to). This is how Sentry knows which project an error belongs to.
Creating a Project
Open Projects
In the Sentry left sidebar, click "Projects". If you're in a fresh account, you'll see an empty list and a prompt to create your first project.
Click "Create Project"
A panel or new page will open with a list of platforms to choose from. This is where you tell Sentry what kind of app it will be receiving errors from — so it can give you the right setup instructions.
Select your platform
The platform list is long but well-organised. The ones relevant for this workshop:
| Your app type | Platform to select |
|---|---|
| React + Vite (most of your web apps) | React (under JavaScript category) |
| Next.js (sahinov.in website) | Next.js (under JavaScript category) |
| React Native + Expo (mobile apps) | React Native (under Mobile category) |
For the personal static site (Project 1) and most web training projects, select React.
Don't see your framework? If your framework isn't listed, choose the closest parent. A Vite + React app is just "React" — Vite is a build tool, not a framework Sentry needs to know about. The React SDK works regardless of whether you're using Vite, Create React App, or anything else.
Set the alert frequency
Sentry asks how often you want to be alerted:
- Alert me on every new issue — you receive an email every time Sentry sees an error it has never seen before
- Alert me on every issue — you receive an email on every individual error occurrence (too noisy for most apps)
- I'll create my own alerts — no automatic emails; you configure them manually later
Select "Alert me on every new issue". This is the right default for client projects. You get notified when a new type of error appears — but not every time the same error repeats. After fixing it, Sentry stops emailing you about it.
Name your project
Use a clear, consistent naming pattern. Good names:
personal-site-webedutrack-adminfinpist-websharma-associates-web
Project names can be changed later, but the project slug (the URL-safe version of the name) stays fixed after creation. Keep it lowercase with hyphens.
Choose a team
Select the default team (usually named after your organisation). You can create teams for multi-person projects later — during training, the default team is correct.
Click "Create Project"
Sentry creates your project and immediately opens the onboarding wizard — a step-by-step guide for installing the Sentry SDK in your specific framework. Read through it, but don't follow it yet. The next two pages of this training guide walk you through the same steps in more detail, with context specific to how we structure our projects.
Your DSN — What It Is and Where to Find It
After creating the project, Sentry will show you a DSN (Data Source Name). It looks like this:
This URL is the address your app sends errors to. Think of it as a mailing address: your app is the sender, Sentry is the post office, and the DSN tells the error exactly where to go.
Key things to understand about the DSN:
- It is project-specific — each Sentry project has a different DSN
- It is safe to include in your frontend code (it is write-only — it can only receive errors, it cannot read your Sentry data or configuration)
- It is not a secret in the traditional sense — but you should still store it in
.envrather than hardcoding it, so you can change it without touching code
Where to find your DSN if you missed it
Settings → Projects → click your project → Client Keys (DSN). The DSN is listed there and can be regenerated if needed (though regenerating it means updating every place the old one was used).
The Client Keys page shows your DSN, the public key portion, and the project ID — these together form the full DSN URL. You can also rotate the key here if it has been accidentally exposed (rare, but possible — for example, if it was accidentally pushed to a public GitHub repo without .env filtering).
Saving the DSN to Your .env File
Open the .env file at the root of your project and add:
The prefix (VITE_ or NEXT_PUBLIC_) is required for the value to be accessible in your browser-side code. Without the prefix, the build tool treats the variable as server-side only and strips it from the frontend bundle.
Add the DSN to VaultMate. Open your VaultMate entry for this project and save the DSN under the category "API Key", title "Sentry DSN". You'll also add this as a Vercel environment variable — having it in VaultMate means you have the source of truth in one place when you need it later.
Also Add to Vercel
The .env file with your DSN stays on your local machine — it is never committed to GitHub. But your production app running on Vercel also needs the DSN to send errors to Sentry.
After you've connected your project to Vercel (covered in the Vercel section):
- Open your project on vercel.com
- Go to Settings → Environment Variables
- Add: Name =
VITE_SENTRY_DSN, Value = your DSN, Environment = Production (and Preview if you want errors captured in preview deployments too)
Your production app will then have access to the DSN through import.meta.env.VITE_SENTRY_DSN.
The Project Slug — You'll Need It Later
When configuring the Sentry Vite plugin (in the Auth Tokens section), you'll need two values from this project:
- The organisation slug (from your account, not this project)
- The project slug (from this project)
Find your project slug: Settings → Projects → click your project → look for "Project Slug" near the top of the project settings page.
Write both down now so you have them ready:
These are the two values that go into vite.config.ts when setting up automated source map uploads.