feat!: update Sentry SDK from v6 to v7

.eslintrc.js

@@ -27,6 +27,7 @@ module.exports = {
         '@nuxtjs/eslint-config-typescript',
       ],
       rules: {
+        'comma-dangle': 'off',
         'constructor-super': 'off', // ts(2335) & ts(2377)
         'getter-return': 'off', // ts(2378)
         'import/named': 'off',
@@ -54,6 +55,7 @@ module.exports = {
         '@typescript-eslint/adjacent-overload-signatures': 'error',
         '@typescript-eslint/ban-ts-comment': 'error',
         '@typescript-eslint/ban-types': 'error',
+        '@typescript-eslint/comma-dangle': ['error', 'always-multiline'],
         '@typescript-eslint/explicit-module-boundary-types': 'warn',
         'no-array-constructor': 'off',
         '@typescript-eslint/member-delimiter-style': ['error', { multiline: { delimiter: 'none', requireLast: false } }],

docs/content/en/guide/setup.md

@@ -49,9 +49,15 @@ Then, add `@nuxtjs/sentry` to the `modules` section of `nuxt.config.js`:
 }
 ```
 
+<alert type="info">
+
+  For Typescript or type-checked JavaScript projects, you might have to install the `@sentry/tracing` package even when not using the tracing functionality. In that case, the package can be installed as a dev-only dependency.
+
+</alert>
+
 ## Types
 
-For typescript projects, add `@nuxtjs/sentry` to tsconfig types array
+In Typescript or type-checked JavaScript projects, add `@nuxtjs/sentry` to the `types` array in `tsconfig.json` to enable module types.
 
 ```json [tsconfig.json]
 {
@@ -65,4 +71,4 @@ For typescript projects, add `@nuxtjs/sentry` to tsconfig types array
 
 ## Configuration
 
-See [Options](/sentry/options) for a list of available options
+See [Options](/sentry/options) for a list of available options.

docs/content/en/sentry/lazy-loading.md

@@ -20,7 +20,7 @@ You can also pass a lazy config object in your module options (see [options](/se
 #### `$sentry` (mocked)
 - Type: `Object`
 
-Normally `$sentry` would always refer to the `@sentry/browser` API. But if we lazy load Sentry this API wont be available until Sentry has loaded. If you don't want to worry about whether Sentry is loaded or not, a mocked Sentry API is injected into the Nuxt.js context that will execute all Sentry API calls once Sentry is loaded
+Normally `$sentry` would always refer to the `@sentry/vue` API. But if we lazy load Sentry this API wont be available until Sentry has loaded. If you don't want to worry about whether Sentry is loaded or not, a mocked Sentry API is injected into the Nuxt.js context that will execute all Sentry API calls once Sentry is loaded
 
 See: [`injectMock`](/sentry/options#lazy) and [`mockApiMethods`](/sentry/options#lazy) options.
 

docs/content/en/sentry/options.md

@@ -68,7 +68,7 @@ Normally, just setting DSN would be enough.
   - **mockApiMethods**
     - Type: `Boolean` or `Array`
     - Default `true`
-    - Which API methods from `@sentry/browser` should be mocked. You can use this to only mock methods you really use.
+    - 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
@@ -233,13 +233,12 @@ Note that the module sets the following defaults when publishing is enabled:
     Dedupe: {},
     ExtraErrorData: {},
     ReportingObserver: {},
-    RewriteFrames: {},
-    Vue: {attachProps: true, logErrors: this.options.dev}
+    RewriteFrames: {}
   }
   ```
 - Sentry by default also enables these browser integrations: `InboundFilters`, `FunctionToString`, `TryCatch`, `Breadcrumbs`, `GlobalHandlers`, `LinkedErrors`, `UserAgent`. Their options can be overridden by specifying them manually in the object.
-- Here is the full list of client integrations that are supported: `Breadcrumbs`, `CaptureConsole`, `Debug`, `Dedupe`, `ExtraErrorData`, `FunctionToString`, `GlobalHandlers`, `InboundFilters`, `LinkedErrors`, `ReportingObserver`, `RewriteFrames`, `TryCatch`, `UserAgent`, `Vue`.
-- User-provided configuration is merged with the default configuration so to disable integration that is enabled by default, you have to pass `false` as a value. For example to disable `ExtraErrorData` integration (only), set the option to:
+- Here is the full list of client integrations that are supported: `Breadcrumbs`, `CaptureConsole`, `Debug`, `Dedupe`, `ExtraErrorData`, `FunctionToString`, `GlobalHandlers`, `InboundFilters`, `LinkedErrors`, `ReportingObserver`, `RewriteFrames`, `TryCatch`, `UserAgent`.
+- User-provided configuration is merged with the default configuration so to disable integration that is enabled by default, pass `false` as a value. For example to disable `ExtraErrorData` integration (only), set the option to:
   ```js
   {
     ExtraErrorData: false
@@ -307,29 +306,26 @@ export default function () {
 
 <alert type="info">
 
-  `@sentry/tracing@6` (version 6 and not newer) should be installed manually when using this option.
+  `@sentry/tracing@7` (version 7) should be installed manually when using this option.
 
 </alert>
 
-- Enables the BrowserTracing integration for client performance monitoring
+- Enables [Sentry Performance Monitoring](https://docs.sentry.io/platforms/javascript/guides/vue/performance/) on the server and browser side.
 - Takes the following object configuration format (default values shown):
   ```js
   {
     tracesSampleRate: 1.0,
-    vueOptions: {
-      tracing: true,
-      tracingOptions: {
-        hooks: [ 'mount', 'update' ],
-        timeout: 2000,
-        trackComponents: true
-      }
-    },
-    browserOptions: {}
+    trackComponents: true,
+    browserTracing: {},
   }
   ```
-- Sentry documentation strongly recommends reducing the `tracesSampleRate` value; it should be between 0.0 and 1.0 (percentage of requests to capture)
-- The `vueOptions` are passed to the `Vue` integration, see https://docs.sentry.io/platforms/javascript/guides/vue/#monitor-performance for more information
-- `browserOptions` are passed to the `BrowserTracing` integration, see https://github.com/getsentry/sentry-javascript/tree/master/packages/tracing for more information
+- On the client side the `BrowserTracing` integration is enabled by default and adds automatic instrumentation for monitoring the performance of the application. See available [`BrowserTracing` options](https://docs.sentry.io/platforms/javascript/guides/vue/performance/instrumentation/automatic-instrumentation/).
+
+<alert type="info">
+
+  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.
+
+</alert>
 
 ### config
 

lib/core/options.js

@@ -2,7 +2,7 @@ import merge from 'lodash.mergewith'
 import * as Integrations from '@sentry/integrations'
 import { canInitialize } from './utils'
 
-export const PLUGGABLE_INTEGRATIONS = ['CaptureConsole', 'Debug', 'Dedupe', 'ExtraErrorData', 'ReportingObserver', 'RewriteFrames', 'Vue']
+export const PLUGGABLE_INTEGRATIONS = ['CaptureConsole', 'Debug', 'Dedupe', 'ExtraErrorData', 'ReportingObserver', 'RewriteFrames']
 export const BROWSER_INTEGRATIONS = ['InboundFilters', 'FunctionToString', 'TryCatch', 'Breadcrumbs', 'GlobalHandlers', 'LinkedErrors', 'UserAgent']
 const SERVER_INTEGRATIONS = ['CaptureConsole', 'Debug', 'Dedupe', 'ExtraErrorData', 'RewriteFrames', 'Modules', 'Transaction']
 
@@ -74,7 +74,7 @@ function resolveLazyOptions (options, apiMethods, logger) {
 
       const notfoundMethods = mockMethods.filter(method => !apiMethods.includes(method))
       if (notfoundMethods.length) {
-        logger.warn('Some specified methods to mock weren\'t found in @sentry/browser:', notfoundMethods)
+        logger.warn('Some specified methods to mock weren\'t found in @sentry/vue:', notfoundMethods)
       }
 
       if (!options.lazy.mockApiMethods.includes('captureException')) {
@@ -97,16 +97,9 @@ function resolveTracingOptions (options, config) {
   /** @type {NonNullable<import('../../types/sentry').TracingConfiguration>} */
   const tracingOptions = merge(
     {
-      tracesSampleRate: 1.0,
-      vueOptions: {
-        tracing: true,
-        tracingOptions: {
-          hooks: ['mount', 'update'],
-          timeout: 2000,
-          trackComponents: true,
-        },
-      },
-      browserOptions: {},
+      tracesSampleRate: 1,
+      trackComponents: true,
+      browserTracing: {},
     },
     userOptions,
   )
@@ -128,7 +121,7 @@ export async function resolveClientOptions (moduleContainer, moduleOptions, logg
 
   options.config = merge({}, options.config, options.clientConfig)
 
-  const apiMethods = await getApiMethods('@sentry/browser')
+  const apiMethods = await getApiMethods('@sentry/vue')
   resolveLazyOptions(options, apiMethods, logger)
   resolveTracingOptions(options, options.config)
 

lib/module.js

@@ -35,7 +35,6 @@ export default function SentryModule (moduleOptions) {
       ExtraErrorData: {},
       ReportingObserver: {},
       RewriteFrames: {},
-      Vue: { attachProps: true, logErrors: this.options.dev },
     },
     serverIntegrations: {
       Dedupe: {},

lib/plugin.client.js

@@ -1,7 +1,7 @@
-import VueLib from 'vue'
+import Vue from 'vue'
 import merge from 'lodash.mergewith'
-import * as Sentry from '@sentry/browser'
-<% if (options.tracing) { %>import { Integrations as TracingIntegrations } from '@sentry/tracing'<% } %>
+import * as Sentry from '@sentry/vue'
+<% if (options.tracing) { %>import { BrowserTracing } from '@sentry/tracing'<% } %>
 <%
 if (options.initialize) {
   let integrations = options.PLUGGABLE_INTEGRATIONS.filter(key => key in options.integrations)
@@ -21,11 +21,14 @@ export default async function (ctx, inject) {
   <% if (options.initialize) { %>
   /* eslint-disable object-curly-spacing, quote-props, quotes, key-spacing, comma-spacing */
   const config = {
-    <%= Object.entries(options.config).map(([key, option]) =>
-      typeof option === 'function'
-        ? `${key}:${serializeFunction(option)}`
-        : `${key}:${serialize(option)}`
-    ).join(',\n    ') %>,
+    Vue,
+    <%= Object
+      .entries(options.config)
+      .map(([key, option]) => {
+        const value = typeof option === 'function' ? serializeFunction(option) : serialize(option)
+        return `${key}:${value}`
+      })
+      .join(',\n    ') %>,
   }
 
   const runtimeConfigKey = <%= serialize(options.runtimeConfigKey) %>
@@ -34,25 +37,26 @@ export default async function (ctx, inject) {
   }
 
   config.integrations = [
-    <%= Object.entries(options.integrations).map(([name, integration]) => {
-      if (name === 'Vue') {
-        if (options.tracing) {
-          integration = { ...integration, ...options.tracing.vueOptions }
-        }
-        return `new ${name}({ Vue: VueLib, ...${serialize(integration)}})`
-      }
+    <%= Object
+      .entries(options.integrations)
+      .filter(([name]) => name !== 'Vue')
+      .map(([name, integration]) => {
+        const integrationOptions = Object
+          .entries(integration)
+          .map(([key, option]) => {
+            const value = typeof option === 'function' ? serializeFunction(option) : serialize(option)
+            return `${key}:${value}`
+          })
 
-      const integrationOptions = Object.entries(integration).map(([key, option]) =>
-        typeof option === 'function'
-          ? `${key}:${serializeFunction(option)}`
-          : `${key}:${serialize(option)}`
-      )
-
-      return `new ${name}(${integrationOptions.length ? '{' + integrationOptions.join(',') + '}' : ''})`
-    }).join(',\n    ')%>,
+        return `new ${name}(${integrationOptions.length ? '{' + integrationOptions.join(',') + '}' : ''})`
+      })
+      .join(',\n    ') %>,
   ]
   <% if (options.tracing) { %>
-  config.integrations.push(<%= `new TracingIntegrations.BrowserTracing(${Object.keys(options.tracing.browserOptions).length ? serialize(options.tracing.browserOptions) : ''})` %>)
+  // eslint-disable-next-line prefer-regex-literals
+  const { browserTracing, ...tracingOptions } = <%= serialize(options.tracing) %>
+  config.integrations.push(new BrowserTracing(browserTracing))
+  merge(config, tracingOptions)
   <% } %>
   <% if (options.customClientIntegrations) { %>
   const customIntegrations = await getCustomIntegrations(ctx)

lib/plugin.lazy.js

@@ -1,4 +1,4 @@
-import VueLib from 'vue'
+import Vue from 'vue'
 
 <% if (options.lazy.injectMock) { %>
 /* eslint-enable object-curly-spacing, quote-props, quotes, key-spacing, comma-spacing */
@@ -20,16 +20,16 @@ const delayUnhandledRejection = function (event) {
   delayedUnhandledRejections.push('reason' in event ? event.reason : 'detail' in event && 'reason' in event.detail ? event.detail.reason : event)
 }
 
-const vueErrorHandler = VueLib.config.errorHandler
+const vueErrorHandler = Vue.config.errorHandler
 
-VueLib.config.errorHandler = (error, vm, info) => {
+Vue.config.errorHandler = (error, vm, info) => {
   if (!loadCompleted) {
     if (vm) {
       vm.$sentry.captureException(error)
     }
 
-    if (VueLib.util) {
-      VueLib.util.warn(`Error in ${info}: "${error.toString()}"`, vm)
+    if (Vue.util) {
+      Vue.util.warn(`Error in ${info}: "${error.toString()}"`, vm)
     }
     console.error(error)
   }
@@ -110,7 +110,7 @@ async function loadSentry (ctx, inject) {
     magicComments.push('webpackPreload: true')
   }
   %>
-  const Sentry = await import(/* <%= magicComments.join(', ') %> */ '@sentry/browser')
+  const Sentry = await import(/* <%= magicComments.join(', ') %> */ '@sentry/vue')
   <%
   if (options.initialize) {
     let integrations = options.PLUGGABLE_INTEGRATIONS.filter(key => key in options.integrations)
@@ -119,9 +119,24 @@ async function loadSentry (ctx, inject) {
     integrations = options.BROWSER_INTEGRATIONS.filter(key => key in options.integrations)
     if (integrations.length) {%>  const { <%= integrations.join(', ') %> } = Sentry.Integrations
 <%}
+
+  const serializedConfig = Object
+    .entries({
+      ...options.config,
+      ...options.integrations.Vue,
+      ...(options.tracing ? options.tracing.vueOptions.tracingOptions : {}),
+    })
+    .map(([key, option]) => {
+      const value = typeof option === 'function' ? serializeFunction(option) : serialize(option)
+      return`${key}: ${value}`
+    })
+    .join(',\n    ')
   %>
   /* eslint-disable object-curly-spacing, quote-props, quotes, key-spacing, comma-spacing */
-  const config = <%= serialize(options.config) %>
+  const config = {
+    Vue,
+    <%= serializedConfig %>,
+  }
 
   const runtimeConfigKey = <%= serialize(options.runtimeConfigKey) %>
   if (ctx.$config && runtimeConfigKey && ctx.$config[runtimeConfigKey]) {
@@ -130,20 +145,22 @@ async function loadSentry (ctx, inject) {
   }
 
   config.integrations = [
-    <%= Object.entries(options.integrations).map(([name, integration]) => {
-      if (name === 'Vue') {
-        return `new ${name}({ Vue: VueLib, ...${serialize(integration)}})`
-      }
-
-      const integrationOptions = Object.entries(integration).map(([key, option]) =>
-        typeof option === 'function'
-          ? `${key}:${serializeFunction(option)}`
-          : `${key}:${serialize(option)}`
-      )
-
-      return `new ${name}(${integrationOptions.length ? '{' + integrationOptions.join(',') + '}' : ''})`
-    }).join(',\n    ')%>,
+    <%= Object
+      .entries(options.integrations)
+      .filter(([name]) => name !== 'Vue')
+      .map(([name, integration]) => {
+        const integrationOptions = Object
+          .entries(integration)
+          .map(([key, option]) => {
+            const value = typeof option === 'function' ? serializeFunction(option) : serialize(option)
+            return `${key}:${value}`
+          })
+
+        return `new ${name}(${integrationOptions.length ? '{' + integrationOptions.join(',') + '}' : ''})`
+      }).join(',\n    ')
+    %>,
   ]
+
   <%if (options.customClientIntegrations) {%>
   const customIntegrations = (await import(/* <%= magicComments.join(', ') %> */ '<%= options.customClientIntegrations %>').then(m => m.default || m))(ctx)
   if (Array.isArray(customIntegrations)) {

package.json

@@ -50,9 +50,9 @@
     }
   },
   "dependencies": {
-    "@sentry/browser": "^6.19.7",
-    "@sentry/integrations": "^6.19.7",
-    "@sentry/node": "^6.19.7",
+    "@sentry/integrations": "^7.23.0",
+    "@sentry/node": "^7.23.0",
+    "@sentry/vue": "^7.23.0",
     "consola": "^2.15.3",
     "lodash.mergewith": "^4.6.2"
   },
@@ -63,7 +63,7 @@
     "@nuxtjs/eslint-config-typescript": "^11.0.0",
     "@nuxtjs/module-test-utils": "^1.6.3",
     "@release-it/conventional-changelog": "^5.1.1",
-    "@sentry/tracing": "^6.19.7",
+    "@sentry/tracing": "^7.23.0",
     "@sentry/webpack-plugin": "^1.20.0",
     "@types/jest": "^29.2.4",
     "@types/lodash.mergewith": "^4.6.7",
@@ -80,6 +80,7 @@
     "playwright-chromium": "^1.28.1",
     "release-it": "^15.5.1",
     "sentry-testkit": "^4.1.0",
-    "typescript": "4.8.4"
+    "typescript": "4.8.4",
+    "vue": "2.7.14"
   }
 }

test/fixture/default/pages/index.vue

@@ -11,9 +11,9 @@
 export default {
   data () {
     return {
-      /** @type {import('@sentry/minimal') | null} */
+      /** @type {import('@sentry/core') | null} */
       clientSentry: null,
-      /** @type {import('@sentry/minimal') | null} */
+      /** @type {import('@sentry/core') | null} */
       serverSentry: this.$sentry,
     }
   },

test/fixture/lazy/pages/index.vue

@@ -12,7 +12,7 @@ export default {
   data () {
     return {
       isSentryReady: false,
-      /** @type {import('@sentry/minimal') | null} */
+      /** @type {import('@sentry/core') | null} */
       serverSentry: this.$sentry,
     }
   },