How to Track Errors in My Bolt App
Add Sentry (free, 5,000 errors/month) to your Bolt app. Since Bolt generates standard JavaScript code (React, Vue, Next.js, etc.), Sentry integrates the same way as any project. Ask Bolt to install the Sentry SDK and initialize it in your app entry point. This captures runtime errors in your deployed app — not just the ones visible in the Bolt preview.
Why this matters
Bolt apps can behave differently in preview versus production. The WebContainer preview catches some errors, but others only appear after deployment — especially authentication flows, Edge Function calls, and environment variable issues. Without error tracking on your deployed app, you only catch errors that happen to occur in the preview.
What's at stake
Every error a user encounters is a moment of lost trust. Bolt V2 includes a security audit that catches some issues before deployment, but runtime errors — a failed API call, a missing environment variable, a broken third-party integration — only surface when real users interact with your app. Sentry catches these.
Step by step.
Create a Sentry account and project
Sign up at sentry.io and create a project matching your Bolt app framework (React, Vue, Next.js, etc.). The free tier includes 5,000 errors/month. Copy your project DSN.
Ask Bolt to add Sentry
Tell Bolt: "Add Sentry error tracking to my app. Install the Sentry SDK and initialize it with this DSN: [your DSN]. Include browser tracing and replay integrations." Bolt will install the package and add the initialization code.
import * as Sentry from "@sentry/react";
Sentry.init({
dsn: "YOUR_SENTRY_DSN",
integrations: [
Sentry.browserTracingIntegration(),
Sentry.replayIntegration(),
],
tracesSampleRate: 1.0,
replaysOnErrorSampleRate: 1.0,
});Store the DSN in environment variables
Add your Sentry DSN to your Bolt Project Settings as an environment variable. Reference it in your code instead of hardcoding. This keeps your DSN out of the source code and makes it easy to change without rebuilding.
Test error tracking on the deployed app
After deploying, trigger a test error on your live site — not in the Bolt preview. Check your Sentry dashboard for the error. If it appears with a stack trace, error tracking is working. This confirms that Sentry is capturing errors from real users, not just your development session.
Configure alert rules
In Sentry, create an alert for first occurrence of new errors. Filter out known third-party errors (browser extensions, ad blockers). Focus alerts on your critical paths: authentication, data loading, and any Edge Functions. Set alerts to email and Slack for fastest response.
Catch errors in your deployed Bolt app, not just the preview
- Automated error detection for your deployed Bolt app
- Real-time alerts covering the preview-to-production error gap
- Stack traces showing exactly which line of Bolt-generated code failed
Frequently asked questions.
No. The security audit checks for known vulnerabilities before deployment — like missing authentication or exposed secrets. Error tracking catches runtime errors that happen after deployment — failed API calls, unexpected user inputs, and integration failures. You need both.
If you initialize Sentry in your app, it will capture errors in both the preview and the deployed version. However, preview errors happen in a WebContainer and may not represent real production behavior. Focus on errors from your deployed URL.
The most common are: environment variables not configured on the hosting platform, Edge Function timeouts or cold starts, authentication not working (it does not work in preview), CORS errors when calling external APIs, and database connection issues.
Ask Bolt in a single, specific prompt: "Install @sentry/react, initialize Sentry in the app entry point with this DSN, and add error boundaries to the root component." This typically completes in one prompt, using minimal tokens.