Merge branch 'LukasHirt-feat/migrate-to-sentry-7' into beta

* LukasHirt-feat/migrate-to-sentry-7:
  lint
  consistent options serialization & filter out Vue integration options
  adjust types and tracing configuration
  feat: allow passing all browserTracing options
  chore: release 6.0.3

Author: rchl

.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 } }],

CHANGELOG.md

@@ -7,6 +7,8 @@
 
 * migrate to sentry v7 ([0d6b0a5](https://github.com/nuxt-community/sentry-module/commit/0d6b0a55f512b50b37b0ac28ed140c6a835cd234))
 
+### [6.0.3](https://github.com/nuxt-community/sentry-module/compare/v6.0.2...v6.0.3) (2022-12-13)
+
 
 ### Bug Fixes
 
@@ -527,4 +529,4 @@ All notable changes to this project will be documented in this file. See [standa
 
 
 <a name="0.0.2"></a>
-## [0.0.2](https://github.com/nuxt-community/sentry-module/compare/v0.0.1...v0.0.2) (2017-10-17)
+## [0.0.2](https://github.com/nuxt-community/sentry-module/compare/v0.0.1...v0.0.2) (2017-10-17)

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/options.md

@@ -316,12 +316,11 @@ export default function () {
   {
     tracesSampleRate: 1.0,
     trackComponents: true
-    hooks: [ 'mount', 'update' ],
-    timeout: 2000,
-    tracePropagationTargets: ['localhost', /^\//]
+    browserTracing: {}
   }
   ```
 - Sentry documentation strongly recommends reducing the `tracesSampleRate` value; it should be between 0.0 and 1.0 (percentage of requests to capture)
+- See available [browserTracing options](https://docs.sentry.io/platforms/javascript/guides/vue/performance/instrumentation/automatic-instrumentation/#configuration-options)
 
 ### config
 

lib/core/options.js

@@ -98,10 +98,8 @@ function resolveTracingOptions (options, config) {
   const tracingOptions = merge(
     {
       tracesSampleRate: 1,
-      hooks: ['mount', 'update'],
-      timeout: 2000,
       trackComponents: true,
-      tracePropagationTargets: ['localhost', /^\//],
+      browserTracing: {},
     },
     userOptions,
   )

lib/plugin.client.js

@@ -22,11 +22,13 @@ export default async function (ctx, inject) {
   /* 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)}`
-        : `${key}:${serialize(option)}`
-    ).join(',\n    ') %>,
+    <%= 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) %>
@@ -35,20 +37,25 @@ export default async function (ctx, inject) {
   }
 
   config.integrations = [
-    <%= Object.entries(options.integrations).map(([name, integration]) => {
-      const integrationOptions = Object.entries(integration).map(([key, option]) =>
-        typeof option === 'function'
-          ? `${key}:${serializeFunction(option)}`
-          : `${key}:${serialize(option)}`
-      )
+    <%= 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    ')%>,
+        return `new ${name}(${integrationOptions.length ? '{' + integrationOptions.join(',') + '}' : ''})`
+      })
+      .join(',\n    ') %>,
   ]
   <% if (options.tracing) { %>
   // eslint-disable-next-line prefer-regex-literals
-  const { tracePropagationTargets, ...tracingOptions } = <%= serialize(options.tracing) %>
-  config.integrations.push(new BrowserTracing({ tracePropagationTargets }))
+  const { browserTracing, ...tracingOptions } = <%= serialize(options.tracing) %>
+  config.integrations.push(new BrowserTracing(browserTracing))
   merge(config, tracingOptions)
   <% } %>
   <% if (options.customClientIntegrations) { %>

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)
   }
@@ -119,10 +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) %>
-  config.Vue = VueLib
+  const config = {
+    Vue,
+    <%= serializedConfig %>,
+  }
 
   const runtimeConfigKey = <%= serialize(options.runtimeConfigKey) %>
   if (ctx.$config && runtimeConfigKey && ctx.$config[runtimeConfigKey]) {
@@ -131,16 +145,22 @@ async function loadSentry (ctx, inject) {
   }
 
   config.integrations = [
-    <%= Object.entries(options.integrations).map(([name, 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)) {

types/sentry.d.ts

@@ -1,8 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { IncomingMessage, ServerResponse } from 'http'
 import { Options as WebpackOptions } from 'webpack'
+import { BrowserTracing } from '@sentry/tracing'
 import { Options as SentryOptions } from '@sentry/types'
-import type { Options as SentryVueOptions } from '@sentry/vue/types/types'
+import { Options as SentryVueOptions, TracingOptions as SentryVueTracingOptions } from '@sentry/vue/types/types'
 import { SentryCliPluginOptions } from '@sentry/webpack-plugin'
 import { Handlers } from '@sentry/node'
 
@@ -22,24 +23,8 @@ export interface LazyConfiguration {
     webpackPreload?: boolean
 }
 
-declare type Operation = 'activate' | 'create' | 'destroy' | 'mount' | 'update'
-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.
-     * Or to an array of specific component names (case-sensitive).
-     */
-    trackComponents: boolean | string[]
-    /** How long to wait until the tracked root activity is marked as finished and sent of to Sentry */
-    timeout: number
-    /**
-     * List of hooks to keep track of during component lifecycle.
-     * Available hooks: 'activate' | 'create' | 'destroy' | 'mount' | 'update'
-     * Based on https://vuejs.org/v2/api/#Options-Lifecycle-Hooks
-     */
-    hooks: Operation[]
-    tracePropagationTargets: (string|RegExp)[]
+export interface TracingConfiguration extends Partial<SentryVueTracingOptions>, Pick<SentryOptions, 'tracesSampleRate'> {
+    browserTracing?: Partial<BrowserTracing['options']>
 }
 
 export interface ModuleConfiguration {