feat!: update Sentry SDK from v6 to v7

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,8 +233,7 @@ 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.
@@ -307,7 +306,7 @@ 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 and not newer) should be installed manually when using this option.
 
 </alert>
 
@@ -316,20 +315,13 @@ export default function () {
   ```js
   {
     tracesSampleRate: 1.0,
-    vueOptions: {
-      tracing: true,
-      tracingOptions: {
-        hooks: [ 'mount', 'update' ],
-        timeout: 2000,
-        trackComponents: true
-      }
-    },
-    browserOptions: {}
+    trackComponents: true
+    hooks: [ 'mount', 'update' ],
+    timeout: 2000,
+    tracePropagationTargets: ['localhost', /^\//]
   }
   ```
 - 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
 
 ### 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')) {
@@ -96,16 +96,10 @@ function resolveTracingOptions (tracing, 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: {},
+      hooks: ['mount', 'update'],
+      timeout: 2000,
+      trackComponents: true,
+      tracePropagationTargets: ['localhost', /^\//],
     },
     typeof tracing === 'boolean' ? {} : tracing,
   )
@@ -126,7 +120,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.tracing, 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,6 +1,6 @@
-import VueLib from 'vue'
+import Vue from 'vue'
 import merge from 'lodash.mergewith'
-import * as Sentry from '@sentry/browser'
+import * as Sentry from '@sentry/vue'
 <%
 if (options.initialize) {
   let integrations = options.PLUGGABLE_INTEGRATIONS.filter(key => key in options.integrations)
@@ -15,14 +15,15 @@ const { <%= integrations.join(', ') %> } = Sentry.Integrations
 }
 %>
 <% if (options.tracing) { %>
-import { Integrations as TracingIntegrations } from '@sentry/tracing'
+import { BrowserTracing } from "@sentry/tracing";
 <% } %>
 
 // eslint-disable-next-line require-await
 export default async function (ctx, inject) {
   <% if (options.initialize) { %>
   /* eslint-disable object-curly-spacing, quote-props, quotes, key-spacing, comma-spacing */
   const config = {
+    Vue,
     <%= Object.entries(options.config).map(([key, option]) =>
       typeof option === 'function'
         ? `${key}:${serializeFunction(option)}`
@@ -37,13 +38,6 @@ 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)}})`
-      }
-
       const integrationOptions = Object.entries(integration).map(([key, option]) =>
         typeof option === 'function'
           ? `${key}:${serializeFunction(option)}`
@@ -54,7 +48,10 @@ export default async function (ctx, inject) {
     }).join(',\n    ')%>,
   ]
   <% if (options.tracing) { %>
-    config.integrations.push(<%= `new TracingIntegrations.BrowserTracing(${serialize(options.tracing.browserOptions)})` %>)
+    const { tracePropagationTargets, ...tracingOptions } = options.tracing
+
+    config.integrations.push(new BrowserTracing({ tracePropagationTargets }))
+    merge(config, tracingOptions)
   <% } %>
   <% if (options.customClientIntegrations) { %>
   const customIntegrations = await getCustomIntegrations(ctx)

lib/plugin.lazy.js

@@ -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)
@@ -122,6 +122,7 @@ async function loadSentry (ctx, inject) {
   %>
   /* eslint-disable object-curly-spacing, quote-props, quotes, key-spacing, comma-spacing */
   const config = <%= serialize(options.config) %>
+  config.Vue = VueLib
 
   const runtimeConfigKey = <%= serialize(options.runtimeConfigKey) %>
   if (ctx.$config && runtimeConfigKey && ctx.$config[runtimeConfigKey]) {
@@ -131,10 +132,6 @@ 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)}`

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.0",
-    "@sentry/tracing": "^6.19.7",
+    "@sentry/tracing": "^7.23.0",
     "@sentry/webpack-plugin": "^1.19.0",
     "@types/jest": "^29.0.3",
     "@types/lodash.mergewith": "^4.6.7",
@@ -80,6 +80,7 @@
     "playwright-chromium": "^1.26.1",
     "release-it": "^15.4.2",
     "sentry-testkit": "^4.0.3",
-    "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,
     }
   },

test/fixture/with-lazy-config/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,
     }
   },

test/fixture/with-lazy-config/pages/mounted.vue

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

types/extend.d.ts

@@ -1,6 +1,6 @@
 import 'vue'
 import 'vuex'
-import * as SentryTypes from '@sentry/minimal'
+import * as SentryTypes from '@sentry/core'
 import { ModuleConfiguration } from './sentry'
 
 // add type to Vue context

types/sentry.d.ts

@@ -1,7 +1,6 @@
 import { Options as WebpackOptions } from 'webpack'
-import { BrowserTracing } from '@sentry/tracing'
 import { Options as SentryOptions } from '@sentry/types'
-import { BrowserOptions } from '@sentry/browser'
+import type { Options as SentryVueOptions } from '@sentry/vue/types/types'
 import { SentryCliPluginOptions } from '@sentry/webpack-plugin'
 import { Handlers } from '@sentry/node'
 
@@ -17,12 +16,8 @@ export interface LazyConfiguration {
 }
 
 declare type Operation = 'activate' | 'create' | 'destroy' | 'mount' | 'update'
-/**
- * Vue specific configuration for Tracing Integration
- * Not exported, so have to reproduce here
- * @see https://github.com/getsentry/sentry-javascript/blob/master/packages/integrations/src/vue.ts
- **/
-interface TracingOptions {
+export interface TracingConfiguration {
+    tracesSampleRate?: number
     /**
      * Decides whether to track components by hooking into its lifecycle methods.
      * Can be either set to `boolean` to enable/disable tracking for all of them.
@@ -37,19 +32,11 @@ interface TracingOptions {
      * Based on https://vuejs.org/v2/api/#Options-Lifecycle-Hooks
      */
     hooks: Operation[]
-}
-
-export interface TracingConfiguration {
-    tracesSampleRate?: number
-    vueOptions?: {
-        tracing?: boolean
-        tracingOptions?: Partial<TracingOptions>
-    }
-    browserOptions?: Partial<BrowserTracing['options']>
+    tracePropagationTargets: (string|RegExp)[]
 }
 
 export interface ModuleConfiguration {
-    clientConfig?: BrowserOptions
+    clientConfig?: Partial<SentryVueOptions>
     clientIntegrations?: IntegrationsConfiguration
     config?: SentryOptions
     customClientIntegrations?: string