Introduction

To elevate our error management at Beaulieu Canada, we rely on Sentry, a potent error monitoring tool. Sentry empowers us to proactively track, resolve, and enhance the user experience.

Sentry

Our IT department upgraded to Nuxt.js version 3, which is the latest major release of the Nuxt.js framework. So you can start by installing the Sentry dependancies. In your Nuxt.js project directory, open a terminal and run the following command:

yarn add @sentry/vue

Environment configuration

Therefore, set up your project-specific configurations by defining the following environment variables:

• SENTRY_PROJECT: The unique identifier for your project within Sentry. Example:

SENTRY_PROJECT="beaulieu-project"

• SENTRY_DSN: The Data Source Name, a secure URL that acts as an authentication token and endpoint for sending error data to Sentry. Example:

 SENTRY_DSN="https://95rjfdfuhifh091058d7@o4504475432189952.ingest.sentry.io/45046945345345656864128"

Ensure the SENTRY_DSN is kept private and not exposed in public repositories or client-side code. Use environment variables or secret management solutions for secure handling.

Plugin creation

Then, we need to expose this environment variable within Nuxt itself. To do this, open your nuxt.config.ts file:

// ... other config here
export default defineNuxtConfig({
    publicRuntimeConfig: {
        ENV: process.env.ENV,
        SENTRY_DSN: 'https://95rjfdfuhifh091058d7@o4504475432189952.ingest.sentry.io/45046945345345656864128',
        SENTRY_ENVIRONMENT: process.env.SENTRY_ENVIRONMENT,
        VERSION: process.env.npm_package_version,
    }
// ... other config here
})

Now, we are making a Sentry plugin for the frontend (sentry.client.ts).

import * as Sentry from '@sentry/vue'
import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin(({ vueApp, $config }) => {
  const router = useRouter()

  Sentry.init({
    app: vueApp,
    dsn: 'https://95rjfdfuhifh091058d7@o4504475432189952.ingest.sentry.io/45046945345345656864128',
    environment: $config.public.SENTRY_ENVIRONMENT ?? $config.public.ENV ?? 'development',
    release: $config.public.VERSION,
    integrations: [
      new Sentry.BrowserTracing({
        routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      }),
      new Sentry.Replay(),
    ],
    trackComponents: true,
    // Set tracesSampleRate to 1.0 to capture 100%
    // of transactions for performance monitoring.
    // We recommend adjusting this value in production
    tracesSampleRate: 1.0,
    // Capture Replay for 10% of all sessions,
    // plus for 100% of sessions with an error
    replaysSessionSampleRate: 0,
    replaysOnErrorSampleRate: 1.0,
  })
})

Here we are ensuring the incorporation of all necessary components for the Sentry integration, encompassing the contents delineated in the package.json file. Within the plugin, we establish the release using the project's name and version as stipulated in the package.json. The previously configured environment is also specified. Lastly, within the Sentry init() function, we employ our designated DSN from Sentry to initialize the integration, concurrently incorporating any relevant Integrations.