User Avatar

Error Handling

StartStack uses Sentry to handle errors. Sentry is a popular error handling platform that provides detailed error reports, crash reports, and monitoring for web and mobile applications. It's the standard in the industry for handling errors and it integrates with Next.js seamlessly.

Sentry Setup

  1. Sign up for a Sentry account.
  2. Click on Settings. Note the Organization Slug.
  3. Update the SENTRY_ORG in your .env file.
SENTRY_ORG="<YOUR-ORGANIZATION-SLUG>"
  1. Create a new project and note the Project Name.
  2. Update the SENTRY_PROJECT in your .env file.
SENTRY_PROJECT="<YOUR-PROJECT-NAME>"
  1. Create a new auth token. Click Settings -> Auth Tokens -> Create Auth Token.
  2. Update the SENTRY_AUTH_TOKEN in your .env file.
SENTRY_AUTH_TOKEN="<YOUR-AUTH-TOKEN>"
  1. Create a new client key. Click Settings -> Client Keys copy the DSN or Generate New Key.
  2. Update the NEXT_PUBLIC_SENTRY_DSN in your .env file.
NEXT_PUBLIC_SENTRY_DSN="<YOUR-DSN>"

Sentry Configuration

Sentry is configured in the next.config.mjs file. We have setup some defaults for you, but you can configure it to your liking. Full documentation on the available options can be found here.

// export with sentry config, if you don't have a sentry auth token it will just ignore it
export default withSentryConfig(nextConfig, {
  silent: true, // Used to suppress logs, set to false to see sentry logs on build
  telemetry: false, // Set to true to send telemetry data to sentry
  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#configure-tunneling-to-avoid-ad-blockers
  tunnelRoute: "/monitoring-tunnel",
  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#use-hidden-source-map
  hideSourceMaps: process.env.NEXT_PUBLIC_VERCEL_ENV === "production",
  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#disable-the-sentry-sdk-debug-logger-to-save-bundle-size
  disableLogger: process.env.NEXT_PUBLIC_VERCEL_ENV === "production",
})

Capturing Errors

By default, StartStack will capture errors via:

  • /components/error-boundary.tsx component used for creating error boundaries around other components.
  • /app/(app)/error.tsx page.
  • /app/(auth)/error.tsx page.
  • /app/(marketing)/error.tsx page.
  • /app/global-error.tsx page.
  • any logger.error calls.

If Sentry is configured the above will call Sentry's captureException method.