Nuxt

Sentry's Nuxt SDK enables automatic reporting of errors and performance data.

Compatibility

The Sentry Nuxt SDK supports Nuxt version 3.7.0 and above. For best results, we recommend using Nuxt 3.14.0 or later, which includes updated dependencies critical to the SDK's functionality.

Prerequisites

• You need a Sentry account and project

Install

Sentry captures data by using an SDK within your application’s runtime.

We recommend installing the SDK by running our installation wizard in the root directory of your project:

npx @sentry/wizard@latest -i nuxt

The wizard will prompt you to log in to Sentry. It will then automatically do the following steps for you:

• create or update Nuxt files with the default Sentry configuration:
  • sentry.(client|server).config.ts to initialize the SDK
  • nuxt.config.ts to add build options to add source maps upload and auto-instrumentation via Vite plugins.
• create a .env.sentry-build-plugin file with an auth token to upload source maps (this file is automatically added to .gitignore)
• add an example page to your frontend app and your server to verify your Sentry setup

After the wizard setup is completed, the SDK will automatically capture unhandled errors, and monitor performance.

You can also manually capture errors.

Configure

Configuration should happen as early as possible in your application's lifecycle.

To complete your configuration, add options to your Sentry.init() calls. Here, you'll also be able to set context data, which includes data about the user, tags, or even arbitrary data, all of which will be added to every event sent to Sentry.

Verify

This snippet includes an intentional error, so you can test that everything is working as soon as you set it up.

On the client-side:

<script setup>
  import * as Sentry from "@sentry/nuxt";
  import { useFetch } from "#imports";

  function triggerClientError() {
    throw new Error("Nuxt Button Error");
  }

  function getSentryData() {
    Sentry.startSpan(
      {
        name: "Example Frontend Span",
        op: "test",
      },
      async () => {
        await useFetch("/sentry-example-api");
      },
    );
  }
</script>

<template>
  <button id="errorBtn" @click="triggerClientError">
    Throw Client Error
  </button>
  <button type="button" @click="getSentryData">Throw Server Error</button>
</template>

On the server-side:

import { defineEventHandler } from '#imports';

export default defineEventHandler(event => {
  throw new Error("Sentry Example API Route Error");
});

# Start your app after building your project with `nuxi build`
node .output/server/index.mjs

To view and resolve the recorded error, log into sentry.io and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved.

Next Steps

• Track your Vue Components or your Pinia store by adding support for client features
• In case you experience any issues during setup or startup, check out Troubleshooting or read through the different installation methods.