Skip to content

How Do I Set Up Error Tracking (Sentry) for My Vibe-Coded App?

6 min read

To add error tracking to an app your AI agent built, sign up for Sentry, run its setup wizard in your project, paste in the key it gives you, and deploy. From then on, every crash a real user hits shows up in one dashboard with the exact file, line, and error message. For a Next.js or React app the whole thing takes about fifteen minutes, and it is the single most useful thing you can add before beta.

Why you need this at all

When you test your own app, you see every error, because it is right there on your screen. When a real user hits a crash, you see nothing. The page goes blank or throws a generic message, the user quietly leaves, and you find out days later when they stop replying. Your agent built the happy path you demoed. It did not build a way for you to hear about the paths that break, because you never asked for one.

Error tracking closes that gap. Instead of waiting for a user to describe a bug they barely understood, you get an alert the moment it happens, with the stack trace attached. Sentry is the common choice because it is free for a single small project and has a setup wizard that does most of the work.

How to check if you already have it

You might already have something and not know it. Look for these:

  1. Search your project for a folder or file mentioning sentry, or grep for it:

    grep -ri "sentry" . --include="*.js" --include="*.ts" -l
    
  2. Check your package.json dependencies for @sentry/nextjs, @sentry/react, or similar.

  3. If nothing turns up, you have no error tracking. Every crash your users hit is currently invisible to you.

The fix

  1. Create a Sentry account at sentry.io and make a new project. Pick the platform that matches your app (Next.js, React, or plain Node).

  2. Run the setup wizard. In your project folder, run the command Sentry shows you, for a Next.js app it is:

    npx @sentry/wizard@latest -i nextjs
    

    It installs the package, creates the config files, and wires everything up. Answer its questions with the defaults if you are unsure.

  3. Put the key where it belongs. The wizard adds a SENTRY_DSN value. The DSN is safe to expose in the browser, that is normal, but the auth token it also creates is a secret. It goes in your hosting provider's environment variables, not in your code. On Vercel that is Project Settings, Environment Variables. See where your API keys go in production for the general pattern.

  4. Trigger a test error. Add a button that throws on click, or use the test snippet the wizard prints. Load it, click it, and confirm the error appears in your Sentry dashboard within a minute.

  5. Turn on email alerts. In Sentry's Alerts settings, set it to email you on a new issue. This is the step people skip, and it is the whole point.

  6. Deploy and test again in production. Errors that only happen for real users are the ones you most need to see.

The trap to avoid

The common mistake is installing Sentry, seeing the test error arrive, and assuming you are done, without ever turning on alerts or checking it in production. A dashboard you never look at is not monitoring. If Sentry is only capturing errors on your laptop and not from your deployed site, you have wired up the half that does not matter. Always confirm a real production crash reaches your inbox, not just a local one.

The other trap is committing the auth token to your repository. It is a secret. If it lands in Git, treat it as leaked and rotate it.

Where this fits

Error tracking is how you find out your app is broken before your users give up on you, which is why it belongs on every beta checklist. It pairs with knowing whether your app is broken for real users and with being able to read your production logs when something does go wrong. The free Readiness Report checks whether your project has any error tracking wired up at all, and flags it if a real crash would currently reach nobody. If you would rather have it installed and verified for you, along with the rest of the beta gaps, that is what the Finishing Pass is for.