Sentry

Sentry is a tool that helps you monitor your application and identify issues from backend to frontend. In this guide, we will set up Sentry for your supastarter app.

Create a Sentry project

Before we start integrating Sentry into your application, you need to sign up for Sentry and create a new organization and project in the Sentry dashboard.

Follow the setup wizard to create a new project by selecting Vue as the platform and entering the project name.

Set up Sentry in your application

1. Install the Sentry SDK

Add the Sentry Nuxt module to your application:

pnpm --filter saas add @sentry/nuxt

2. Add Sentry to Nuxt config

In your apps/saas/nuxt.config.ts file, add the Sentry module:

export default defineNuxtConfig({
  modules: [
    "@sentry/nuxt/module",
    // ... other modules
  ],
  sentry: {
    sourceMapsUploadOptions: {
      org: "your-org",
      project: "your-project",
      authToken: process.env.SENTRY_AUTH_TOKEN,
    },
  },
});

3. Create sentry config files

Create the following files in the /apps/saas folder:

Note: Replace the DSN url with the one from your Sentry project.

import * as Sentry from "@sentry/nuxt";

Sentry.init({
  dsn: "https://your-dsn-here@sentry.io/your-project-id",
  integrations: [Sentry.replayIntegration()],
  tracesSampleRate: 1,
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
});

import * as Sentry from "@sentry/nuxt";

Sentry.init({
  dsn: "https://your-dsn-here@sentry.io/your-project-id",
  tracesSampleRate: 1,
});

4. Set Sentry envs

In the Sentry dashboard, go to Settings > Auth Tokens and create a new token.

Add the new token as the SENTRY_AUTH_TOKEN environment variable to your .env.local file.

SENTRY_AUTH_TOKEN=<your-sentry-auth-token>

And that's it! You can now start your application and see the errors and performance data in the Sentry dashboard.

For more information and further use cases, check out the official Sentry setup guide for Nuxt.