# Sentry

WARNING

Adblocker extensions and anti-tracking browser features can prevent Sentry from sending its traces and monitoring. Make sure to add exception rules to adblockers/anti tracking on localhost/test environments!

It is also recommended to not have a DSN set on a development environment (this will prevent Sentry from initializing), since meaningless errors during HMR or regular development can be debugged locally and waste Sentry usage tokens.

# Plugin

This plugin adds Sentry to a backoffice. If the plugin is added, and a Sentry DSN (Data ingest URL) is supplied in runtime.env.json, it will send errors to Sentry.

# Install

First install the Sentry package:

yarn add @sentry/vue

Create a new file in the backoffice: /plugins/sentry.js with the following contents:

// sentry.js
import Vue from 'vue'
import { sentryPlugin } from '@jdi/vue-backoffice-library'

export default (context) => sentryPlugin.install(Vue, context)

Add the plugin to nuxt.config.js

const plugins = [
  './plugins/runtime',
  './plugins/axios',
  './plugins/element-ui',
  './plugins/i18n',
  './plugins/vue-good-table',
  './plugins/navigation-guard',
+  './plugins/sentry' // Add this one
]

# Usage

Create a new Sentry project with a Vue template here (opens new window). The DSN can be found in the project settings > SDK Setup > Client Keys (DSN). If one doesn't exist, generate one. Copy the DSN into runtime.config.json following the example file and configure the sample rate.

// runtime.env.json
{
    ...
    "sentry": {
        "dsn": "<Copy DSN here>",
        "sampleRate": 0.5, // Default is 1.0 meaning 100%
        "distributedTracing": false // Requires backends to set up Sentry and update allowed headers for CORS
    }
}

By default, the plugin adds the browser tracing integration, which tracks navigation with vue router.

You can add extra settings and integrations when installing the plugin if you want to extend the default setup provided by the plugin. You can find integrations in the Sentry documentation (opens new window). This will append the given list of integrations to the default ones.

example:

// sentry.js
import Vue from 'vue'
import { sentryPlugin } from '@jdi/vue-backoffice-library'
import * as Sentry from '@sentry/vue'

export default (context) =>
  sentryPlugin.install(
    Vue,
    context,
    // Extra settings required for the integrations you want to add
    {
      replaysSessionSampleRate: 0.1,
      replaysOnErrorSampleRate: 1.0
    },
    // A list of integrations you want to add to the default one.
    [
      Sentry.replayIntegration({
        maskAllText: true,
        blockAllMedia: true
      })
    ]
  )

← runtime