feat: migrate to sentry v7

Author: LukasHirt

docs/content/en/sentry/options.md

@@ -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>
 

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']
 
@@ -96,7 +96,6 @@ function resolveTracingOptions (tracing, config) {
   /** @type {NonNullable<import('../../types/sentry').TracingConfiguration>} */
   const tracingOptions = merge(
     {
-      tracesSampleRate: 1.0,
       vueOptions: {
         tracing: true,
         tracingOptions: {

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,7 @@ export default async function (ctx, inject) {
     }).join(',\n    ')%>,
   ]
   <% if (options.tracing) { %>
-    config.integrations.push(<%= `new TracingIntegrations.BrowserTracing(${serialize(options.tracing.browserOptions)})` %>)
+    config.integrations.push(<%= `new BrowserTracing(${serialize(options.tracing.browserOptions)})` %>)
   <% } %>
   <% 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,
     }
   },