Options

This module is for Nuxt 2. For Nuxt 3+ support see the official @sentry/nuxt module.

Options can be passed using either:

  • environment variables
  • sentry object in nuxt.config.js
  • when registering the module: modules: [['@nuxtjs/sentry', {/*options*/}]]

The config, serverConfig and clientConfig options can also be configured using Runtime Config.

The dsn is the only option that is required to enable Sentry reporting.

dsn

  • Type: String
  • Default: process.env.SENTRY_DSN || ''
  • If no dsn is provided then Sentry will be initialized using mocked instance to prevent the code that references $sentry from crashing. No errors will be reported using that mocked instance.

lazy

  • Type: Boolean or Object
  • Default: false
  • Load Sentry lazily so it's not included in your main bundle
  • If true then the default options will be used:
    {
      injectMock: true,
      injectLoadHook: false,
      mockApiMethods: true,
      chunkName: 'sentry',
      webpackPrefetch: false,
      webpackPreload: false
    }
    
  • Options:
    • injectMock

      • Type: Boolean
      • Default: true
      • Whether a Sentry mock needs to be injected that captures any calls to $sentry API methods while Sentry has not yet loaded. Captured API method calls are executed once Sentry is loaded

      When injectMock: true this module will also add a window.onerror listener. If errors are captured before Sentry has loaded then these will be reported once Sentry has loaded using sentry.captureException

      pages/index.vue
      beforeMount() {
        // onNuxtReady is called _after_ the Nuxt.js app is fully mounted,
        // so Sentry is not yet loaded when beforeMount is called
        // But when you set injectMock: true this call will be captured
        // and executed after Sentry has loaded
        this.$sentry.captureMessage('Hello!')
      },
      
    • injectLoadHook

      • Type: Boolean
      • Default: false
      • By default Sentry will be lazy loaded once window.onNuxtReady is called. If you want to explicitly control when Sentry will be loaded you can set injectLoadHook: true. The module will inject a $sentryLoad method into the Nuxt.js context which you need to call once you are ready to load Sentry
      layouts/default.vue
      ...
      mounted() {
        // Only load Sentry after initial page has fully loaded
        // (this example should behave similar to using window.onNuxtReady though)
        this.$nextTick(() => this.$sentryLoad())
      }
      
    • mockApiMethods

      • Type: Boolean or Array
      • Default true
      • Which API methods from @sentry/vue should be mocked. You can use this to only mock methods you really use.
      • This option is ignored when injectMock: false
      • If mockApiMethods: true then all available API methods will be mocked

      If injectMock: true then captureException will always be mocked for use with the window.onerror listener

      nuxt.config.js
      sentry: {
        lazy: {
          mockApiMethods: ['captureMessage']
        }
      }
      
      pages/index.vue
      mounted() {
        this.$sentry.captureMessage('This works!')
      
        this.$sentry.captureEvent({
          message: `
            This will throw an error because
            captureEvent doesn't exists on the mock
          `
        })
      
        // To circumvent this problem you could use $sentryReady
        (await this.$sentryReady()).captureEvent({
          message: `
            This will not throw an error because
            captureEvent is only executed after
            Sentry has been loaded
          `
        })
      }
      
    • chunkName

    • webpackPrefetch

      • Type: Boolean
      • Default: false
      • Whether the Sentry chunk should be prefetched
    • webpackPreload

      • Type: Boolean
      • Default: false
      • Whether the Sentry chunk should be preloaded

runtimeConfigKey

disabled

  • Type: Boolean
  • Default: process.env.SENTRY_DISABLED || false
  • Sentry will not be initialized if set to true.

disableClientSide

  • Type: Boolean
  • Default: process.env.SENTRY_DISABLE_CLIENT_SIDE || false

disableServerSide

  • Type: Boolean
  • Default: process.env.SENTRY_DISABLE_SERVER_SIDE || false

initialize

  • Type: Boolean
  • Default: process.env.SENTRY_INITIALIZE || true
  • Can be used to add the $sentry object without initializing it, which will result in not reporting errors to Sentry when they happen but not crashing on calling the Sentry APIs.

logMockCalls

  • Type: Boolean
  • Default: true
  • Whether to log calls to the mocked $sentry object in the console
  • Only applies when mocked instance is used (when disabled, disableClientSide or disableServerSide is true)

publishRelease

@sentry/webpack-plugin@2 package must be installed manually as a dev dependency to be able to publish releases.

  • Type: Boolean or SentryWebpackPluginOptions
  • Default: process.env.SENTRY_PUBLISH_RELEASE || false
  • Enables Sentry releases for better debugging using source maps. Uses @sentry/webpack-plugin.
  • Publishing releases requires the organization slug, project name and the Sentry authentication token to be provided. Those can be provided either via an object value or environment variables or a properties file. So for example, when using the object value, you'd set authToken, org and project options, and when using the environment variables you'd set SENTRY_AUTH_TOKEN, SENTRY_ORG and SENTRY_PROJECT.
  • It's recommended to pass an object value to this option rather than using the boolean true. When using the boolean, you have to provide all required options through other means mentioned above.
  • The releases are only published when this option is enabled and at the same time you are NOT running in development (nuxt dev) mode.
  • See https://docs.sentry.io/workflow/releases for more information. Note that the Sentry CLI options mentioned in the documentation typically have a @sentry/webpack-plugin equivalent.

Example configuration:

sentry: {
  // ...
  publishRelease: {
    authToken: '<token>',
    org: 'MyCompany',
    project: 'my-project',
    release: {
      // Attach commits to the release (requires that the build triggered within a git repository).
      setCommits: {
        auto: true
      }
    }
  }
}
  • module by default includes all js/map assets generated during the build step.

sourceMapStyle

  • Type: String
  • Default: hidden-source-map
  • Only has an effect when publishRelease is enabled
  • The type of source maps generated when publishing release to Sentry. See https://webpack.js.org/configuration/devtool for a list of available options

disableServerRelease

disableClientRelease

clientIntegrations

  • Type: Object
  • Default:
    {
      ExtraErrorData: {},
      ReportingObserver: { types: ['crash'] },
    }
    
  • Sentry by default also enables the following browser integrations: Breadcrumbs, Dedupe, FunctionToString, GlobalHandlers, HttpContext, InboundFilters, LinkedErrors, TryCatch.
  • When tracing option is enabled then the Vue Router Instrumentation is also enabled.
  • The full list of client integrations that are supported: Breadcrumbs, CaptureConsole, ContextLines, Debug, Dedupe, ExtraErrorData, FunctionToString, GlobalHandlers, HttpClient, HttpContext, InboundFilters, LinkedErrors, Replay, ReportingObserver, RewriteFrames, TryCatch.
  • Integration options can be specified in the object value corresponding to the individual integration key.
  • To disable integration that is enabled by default, pass false as a value. For example to disable ExtraErrorData integration (only) set the option to:
    {
      ExtraErrorData: false,
    }
    
  • See also Sentry Browser Integrations for more information on configuring each integration.

serverIntegrations

  • Type: Object
  • Default:
    {
      Dedupe: {},
      ExtraErrorData: {},
      RewriteFrames: { root: <rootDir> },
    }
    
  • Sentry by default enables the following server integrations: Console, ContextLines, Context, FunctionToString, Http, InboundFilters, LinkedErrors, Modules,OnUncaughtException, OnUnhandledRejection, RequestData.
  • The full list of server integrations that are supported includes the ones above plus: CaptureConsole, Debug, Dedupe, ExtraErrorData, Hapi, RewriteFrames.
  • Integration options can be specified in the object value corresponding to the individual integration key.
  • To disable integration that is enabled by default, pass false as a value. For example to disable ExtraErrorData integration (only) set the option to:
    {
      ExtraErrorData: false,
    }
    
  • See also Sentry Server Integrations for more information on configuring each integration.

customClientIntegrations

  • Type: String
  • Default: undefined
  • This option gives the flexibility to register any custom integration that is not handled internally by the clientIntegrations option.
  • The value needs to be a file path (can include webpack aliases) pointing to a javascript file that exports a function returning an array of initialized integrations. The function will be passed a context argument which is the Nuxt Context.

For example:

import SentryRRWeb from '@sentry/rrweb'

export default function (context) {
  return [new SentryRRWeb()]
}

customServerIntegrations

  • Type: String
  • Default: undefined
  • This option gives the flexibility to register any custom integration that is not handled internally by the serverIntegrations option.
  • The value needs to be a file path (can include webpack aliases) pointing to a javascript file that exports a function returning an array of initialized integrations.

For example:

import MyAwesomeIntegration from 'my-awesome-integration'

export default function () {
  return [new MyAwesomeIntegration()]
}

tracing

  • Type: Boolean or Object

  • Default: false

  • Enables Sentry Performance Monitoring on the server and browser side.

  • Takes the following object configuration format (default values shown):

    {
      tracesSampleRate: 1.0,
      browserTracing: {},
      vueOptions: {
        trackComponents: true,
      },
      vueRouterInstrumentationOptions: {
        routeLabel: 'name',
      },
    }
    
  • On the browser side the BrowserTracing integration is enabled by default and adds automatic instrumentation for monitoring the performance of the application. See all available BrowserTracing options.

  • The Vue Router Integration is also automatically enabled on the browser side and defaults to using route names as labels. Supported options can be passed through the vueRouterInstrumentationOptions object.

  • On the browser side extra options for Tracking Vue components can be passed through the vueOptions object.

  • On the server side the Http integration is enabled to trace HTTP requests and tracingHandler is enabled to trace connect and express routes.

  • See also the Performance Monitoring section for more information.

The tracesSampleRate value can be between 0.0 and 1.0 (percentage of requests to capture) and Sentry documentation strongly recommends reducing the value from the default 1.0.

config

  • Type: Object
  • Default:
    {
      environment: this.options.dev ? 'development' : 'production'
    }
    
  • Additional options to pass to the Sentry SDK common to the Server and the Browser SDKs and which are passed to Sentry.init(). See Sentry's documentation for Basic Browser Options and Basic Server Options.
  • If you need to pass options only to the client or the server SDK instance then use clientConfig and serverConfig respectively.
  • Note that config.dsn is automatically set based on the root dsn option.
  • The value for config.release is automatically inferred from the local repo unless specified manually.
  • Do not set config.integrations, use clientIntegrations and serverIntegrations options instead.

serverConfig

  • Type: Object or String
  • Default: {}
  • Sentry SDK Basic Server Options.
  • The specified keys will override common options set in the config key.
  • The value can be a string in which case it needs to be a file path (can use webpack aliases) pointing to a javascript file whose default export (a function) returns the configuration object. This is necessary in case some of the options rely on imported values or can't be serialized. The function can be async. An artificial example that switches out the transport:
    nuxt.config.js
    sentry: {
      dsn: '...',
      serverConfig: '~/config/sentry-server-config.js',
    }
    
    ~/config/sentry-server-config.js
    import { makeNodeTransport } from '@sentry/node'
    
    export default function() {
      return {
        transport: makeNodeTransport,
      }
    }
    

clientConfig

  • Type: Object or String
  • Default: {}
  • Sentry SDK Basic Browser Options.
  • The specified keys will override common options set in the config key.
  • The value can be a string in which case it needs to be a file path (can use webpack aliases) pointing to a javascript file whose default export (a function) returns the configuration object. This is necessary in case some of the options rely on imported values or can't be serialized. The function is passed a Nuxt Context argument and can be async.
  • See an example usage on the User Feedback page.

requestHandlerConfig

Edit this page on GitHub Updated at Mon, Oct 7, 2024