feat!: update Sentry SDK from v6 to v7 (#461)

BREAKING CHANGE: Refer to https://sentry.nuxtjs.org/guide/migration for migration guide.

Author: LukasHirt

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

@@ -0,0 +1,19 @@
+---
+title: Migration guide
+description: Follow this guide to upgrade from one major version to the other.
+position: 10
+category: Guide
+---
+
+Follow this guide to upgrade from one major version to the other.
+
+## Upgrading from v6 to v7
+
+Sentry SDK dependencies updated from v6 to v7. Please read about breaking changes in Sentry SDK's [Upgrading from v6.x to v7.x](https://github.com/getsentry/sentry-javascript/blob/master/MIGRATION.md#upgrading-from-6x-to-7x) document.
+
+Some of the breaking changes listed in that document are automatically handled by the module and don't need any action. Other notable changes that might require action are:
+
+  - When using the `tracing` option, the `@sentry/tracing` dependency needs to be upgraded from v6.x to v7.x.
+  - The `whitelistUrls` and `blacklistUrls` Sentry `config` (or `clientConfig` / `serverConfig`) options have been renamed to `allowUrls` and `denyUrls`.
+  - The `Vue` integration was removed as is now merged into the Sentry Browser SDK. If you have been passing custom `Vue` options through the `clientIntegrations.Vue` object then those can now be merged directly into the `clientConfig` option (without the parent `Vue` key).
+  - The `UserAgent` integration was renamed to `HttpContext`. If you have been passing custom configuration to that integration through `clientIntegrations` option then you should rename the key.

docs/content/en/guide/setup.md

@@ -30,28 +30,37 @@ Add `@nuxtjs/sentry` dependency to your project:
   </code-block>
 </code-group>
 
-Then, add `@nuxtjs/sentry` to the `modules` section of `nuxt.config.js`:
+Then, add `@nuxtjs/sentry` to the `modules` section of `nuxt.config.js` and set your unique `dsn` value:
 
 ```js [nuxt.config.js]
 {
   modules: [
     '@nuxtjs/sentry'
   ],
   sentry: {
-    dsn: '', // Enter your project's DSN here
-    // Additional Module Options go here
-    // https://sentry.nuxtjs.org/sentry/options
+    dsn: '', // Enter your project's DSN.
+    // Additional Module Options.
     config: {
-      // Add native Sentry config here
-      // https://docs.sentry.io/platforms/javascript/guides/vue/configuration/options/
+      // Optional Sentry SDK configuration.
+      // Those options are shared by both the Browser and the Server instances.
+      // Browser-only and Server-only options should go
+      // into `clientConfig` and `serverConfig` objects respectively.
     },
   }
 }
 ```
 
+See [Options](/sentry/options) for a list of available options.
+
+<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]
 {
@@ -62,7 +71,3 @@ For typescript projects, add `@nuxtjs/sentry` to tsconfig types array
   }
 }
 ```
-
-## Configuration
-
-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

@@ -12,13 +12,13 @@ Options can be passed using either:
 
 The `config`, `serverConfig` and `clientConfig` options can also be configured using [Runtime Config](/sentry/runtime-config).
 
-Normally, just setting DSN would be enough.
+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, Sentry will be initialised, but errors will not be logged. See [#47](https://github.com/nuxt-community/sentry-module/issues/47) for more information about this.
+- 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
 
@@ -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
@@ -231,22 +231,23 @@ Note that the module sets the following defaults when publishing is enabled:
 - Default:
   ```js
   {
-    Dedupe: {},
     ExtraErrorData: {},
     ReportingObserver: {},
     RewriteFrames: {},
-    Vue: {attachProps: true, logErrors: this.options.dev}
   }
   ```
-- 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:
+- Sentry by default also enables the following browser integrations: `InboundFilters`, `FunctionToString`, `TryCatch`, `Breadcrumbs`, `GlobalHandlers`, `LinkedErrors`, `Dedupe`, `HttpContext`.
+- The full list of client integrations that are supported: `Breadcrumbs`, `CaptureConsole`, `Debug`, `Dedupe`, `ExtraErrorData`, `FunctionToString`, `GlobalHandlers`, `HttpContext`, `InboundFilters`, `LinkedErrors`, `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:
   ```js
   {
-    ExtraErrorData: false
+    ExtraErrorData: false,
+    ReportingObserver: {},
+    RewriteFrames: {},
   }
   ```
-- See https://docs.sentry.io/platforms/javascript/configuration/integrations/default/ and  https://docs.sentry.io/platforms/javascript/configuration/integrations/plugin/ for more information on the integrations and their configuration
+- See also [Sentry Browser Integrations](https://docs.sentry.io/platforms/javascript/guides/vue/configuration/integrations/) for more information on configuring each integration.
 
 ### serverIntegrations
 
@@ -257,17 +258,20 @@ Note that the module sets the following defaults when publishing is enabled:
     Dedupe: {},
     ExtraErrorData: {},
     RewriteFrames: {},
-    Transaction: {}
   }
   ```
-- Here is the full list of server integrations that are supported: `CaptureConsole`, `Debug`, `Dedupe`, `ExtraErrorData`, `RewriteFrames`, `Modules`, `Transaction`.
-- 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:
+- Sentry by default also enables the following server integrations: `InboundFilters`, `FunctionToString`, `Console`, `Http`, `OnUncaughtException`, `OnUnhandledRejection`, `ContextLines`, `Context`, `Modules`, `RequestData`, `LinkedErrors`.
+- The full list of server integrations that are supported includes the ones above plus: `CaptureConsole`, `Debug`, `Dedupe`, `ExtraErrorData`, `RewriteFrames`, `Transaction`.
+- 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:
   ```js
   {
-    ExtraErrorData: false
+    Dedupe: {},
+    ExtraErrorData: false,
+    RewriteFrames: {},
   }
   ```
-- See https://docs.sentry.io/platforms/node/pluggable-integrations/ for more information on the integrations and their configuration
+- See also [Sentry Server Integrations](https://docs.sentry.io/platforms/node/configuration/integrations/) for more information on configuring each integration.
 
 ### customClientIntegrations
 
@@ -308,29 +312,29 @@ 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 on the [server](https://docs.sentry.io/platforms/node/performance/) and [browser](https://docs.sentry.io/platforms/javascript/guides/vue/performance/) side.
 - Takes the following object configuration format (default values shown):
   ```js
   {
     tracesSampleRate: 1.0,
+    browserTracing: {},
     vueOptions: {
-      tracing: true,
-      tracingOptions: {
-        hooks: [ 'mount', 'update' ],
-        timeout: 2000,
-        trackComponents: true
-      }
+      trackComponents: true,
     },
-    browserOptions: {}
   }
   ```
-- 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 browser 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/).
+- On the browser side extra options for [Tracking Vue components](https://docs.sentry.io/platforms/javascript/guides/vue/features/component-tracking/) can be passed through the `vueOptions` object.
+
+<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
 
@@ -341,22 +345,24 @@ export default function () {
     environment: this.options.dev ? 'development' : 'production'
   }
   ```
-- Sentry options common to the server and client that are passed to `Sentry.init(options)`. See Sentry documentation at https://docs.sentry.io/platforms/javascript/guides/vue/configuration/options/
-- 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 use `config.integrations`, use clientIntegrations or serverIntegrations
+- Sentry options common to the Server and Browser SDKs that are passed to `Sentry.init()`. See Sentry's documentation for [Basic Browser Options](https://docs.sentry.io/platforms/javascript/guides/vue/configuration/options/) and [Basic Server Options](https://docs.sentry.io/platforms/node/configuration/options/).
+- 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`
 - Default: `{}`
-- Specified key will override common Sentry options for server sentry plugin
+- Server-specific Sentry SDK options.
+- The specified keys will override common options set in the `config` key.
 
 ### clientConfig
 
 - Type: `Object`
 - Default: `{}`
-- Specified keys will override common Sentry options for client sentry plugin
+- Browser-specific Sentry SDK options.
+- The specified keys will override common options set in the `config` key.
 
 ### requestHandlerConfig
 

lib/core/options.js

@@ -2,8 +2,8 @@ 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 BROWSER_INTEGRATIONS = ['InboundFilters', 'FunctionToString', 'TryCatch', 'Breadcrumbs', 'GlobalHandlers', 'LinkedErrors', 'UserAgent']
+export const PLUGGABLE_INTEGRATIONS = ['CaptureConsole', 'Debug', 'Dedupe', 'ExtraErrorData', 'ReportingObserver', 'RewriteFrames']
+export const BROWSER_INTEGRATIONS = ['InboundFilters', 'FunctionToString', 'TryCatch', 'Breadcrumbs', 'GlobalHandlers', 'LinkedErrors', 'HttpContext']
 const SERVER_INTEGRATIONS = ['CaptureConsole', 'Debug', 'Dedupe', 'ExtraErrorData', 'RewriteFrames', 'Modules', 'Transaction']
 
 /** @param {import('../../types/sentry').IntegrationsConfiguration} integrations */
@@ -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')) {
@@ -93,24 +93,18 @@ function resolveTracingOptions (options, config) {
   if (!options.tracing) {
     return
   }
-  const userOptions = typeof options.tracing === 'boolean' ? {} : options.tracing
   /** @type {NonNullable<import('../../types/sentry').TracingConfiguration>} */
-  const tracingOptions = merge(
-    {
-      tracesSampleRate: 1.0,
-      vueOptions: {
-        tracing: true,
-        tracingOptions: {
-          hooks: ['mount', 'update'],
-          timeout: 2000,
-          trackComponents: true,
-        },
-      },
-      browserOptions: {},
+  const defaultOptions = {
+    tracesSampleRate: 1,
+    browserTracing: {},
+    vueOptions: {
+      trackComponents: true,
     },
-    userOptions,
-  )
-  if (!config.tracesSampleRate) {
+  }
+  const userOptions = typeof options.tracing === 'boolean' ? {} : options.tracing
+  /** @type {NonNullable<import('../../types/sentry').TracingConfiguration>} */
+  const tracingOptions = merge(defaultOptions, userOptions)
+  if (config.tracesSampleRate === undefined) {
     config.tracesSampleRate = tracingOptions.tracesSampleRate
   }
   options.tracing = tracingOptions
@@ -128,7 +122,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

@@ -31,11 +31,9 @@ export default function SentryModule (moduleOptions) {
     sourceMapStyle: 'source-map',
     tracing: false,
     clientIntegrations: {
-      Dedupe: {},
       ExtraErrorData: {},
       ReportingObserver: {},
       RewriteFrames: {},
-      Vue: { attachProps: true, logErrors: this.options.dev },
     },
     serverIntegrations: {
       Dedupe: {},