fix: significantly reduce client bundle size (#532)

Author: rchl

src/hooks.ts

@@ -20,7 +20,7 @@ export async function buildHook (nuxt: Nuxt, moduleOptions: ModuleConfiguration,
 
   const templateDir = fileURLToPath(new URL('./templates', import.meta.url))
 
-  const pluginOptionClient = clientSentryEnabled(moduleOptions) ? (moduleOptions.lazy ? 'lazy' : 'client') : 'mocked'
+  const pluginOptionClient = clientSentryEnabled(moduleOptions) && canInitialize(moduleOptions) ? (moduleOptions.lazy ? 'lazy' : 'client') : 'mocked'
   const clientOptions: ResolvedClientOptions = defu({ config: { release } }, await resolveClientOptions(nuxt, moduleOptions, logger))
   addPluginTemplate({
     src: resolve(templateDir, `plugin.${pluginOptionClient}.js`),

src/options.ts

@@ -5,7 +5,6 @@ import { Integrations as ServerIntegrations } from '@sentry/node'
 import type Sentry from '@sentry/node'
 import * as PluggableIntegrations from '@sentry/integrations'
 import type { Options } from '@sentry/types'
-import type { NuxtOptions } from '@nuxt/types'
 import type { AllIntegrations, LazyConfiguration, TracingConfiguration } from './types/configuration'
 import type { ModuleConfiguration } from './types'
 import { Nuxt, resolveAlias } from './kit-shim'
@@ -104,14 +103,12 @@ function resolveLazyOptions (options: ModuleConfiguration, apiMethods: string[],
     } else if (Array.isArray(options.lazy.mockApiMethods)) {
       const mockMethods = options.lazy.mockApiMethods
       options.lazy.mockApiMethods = mockMethods.filter(method => apiMethods.includes(method))
-
       const notfoundMethods = mockMethods.filter(method => !apiMethods.includes(method))
       if (notfoundMethods.length) {
         logger.warn('Some specified methods to mock weren\'t found in @sentry/vue:', notfoundMethods)
       }
-
       if (!options.lazy.mockApiMethods.includes('captureException')) {
-      // always add captureException if a sentry mock is requested
+        // always add captureException if a sentry mock is requested
         options.lazy.mockApiMethods.push('captureException')
       }
     }

src/templates/plugin.client.js

@@ -1,26 +1,26 @@
 /* eslint-disable import/order */
 import Vue from 'vue'
 import merge from '~lodash.mergewith'
-import * as Sentry from '~@sentry/vue'
-<% if (options.tracing) { %>import { BrowserTracing } from '~@sentry/tracing'<% } %>
 <%
-if (options.initialize) {
-  let integrations = options.BROWSER_PLUGGABLE_INTEGRATIONS.filter(key => key in options.integrations)
-  if (integrations.length) {%>import { <%= integrations.join(', ') %> } from '~@sentry/integrations'
+const vueImports = ['getCurrentHub', 'init', 'Integrations', ...(options.tracing ? ['vueRouterInstrumentation'] : [])]
+%>import { <%= vueImports.join(', ') %> } from '~@sentry/vue'
+<%
+if (options.tracing) {%>import { BrowserTracing } from '~@sentry/tracing'
 <%}
-  if (options.clientConfigPath) {%>import getClientConfig from '<%= options.clientConfigPath %>'
+let integrations = options.BROWSER_PLUGGABLE_INTEGRATIONS.filter(key => key in options.integrations)
+if (integrations.length) {%>import { <%= integrations.join(', ') %> } from '~@sentry/integrations'
 <%}
-  if (options.customClientIntegrations) {%>import getCustomIntegrations from '<%= options.customClientIntegrations %>'
+if (options.clientConfigPath) {%>import getClientConfig from '<%= options.clientConfigPath %>'
 <%}
-  integrations = options.BROWSER_INTEGRATIONS.filter(key => key in options.integrations)
-  if (integrations.length) {%>
-const { <%= integrations.join(', ') %> } = Sentry.Integrations
+if (options.customClientIntegrations) {%>import getCustomIntegrations from '<%= options.customClientIntegrations %>'
+<%}
+integrations = options.BROWSER_INTEGRATIONS.filter(key => key in options.integrations)
+if (integrations.length) {%>
+const { <%= integrations.join(', ') %> } = Integrations
 <%}
-}
 %>
 
 export default async function (ctx, inject) {
-  <% if (options.initialize) { %>
   /* eslint-disable object-curly-spacing, quote-props, quotes, key-spacing, comma-spacing */
   const config = {
     Vue,
@@ -53,7 +53,7 @@ export default async function (ctx, inject) {
   // eslint-disable-next-line prefer-regex-literals
   const { browserTracing, vueOptions, ...tracingOptions } = <%= serialize(options.tracing) %>
   config.integrations.push(new BrowserTracing({
-    ...(ctx.app.router ? { routingInstrumentation: Sentry.vueRouterInstrumentation(ctx.app.router) } : {}),
+    ...(ctx.app.router ? { routingInstrumentation: vueRouterInstrumentation(ctx.app.router) } : {}),
     ...browserTracing,
   }))
   merge(config, vueOptions, tracingOptions)
@@ -79,9 +79,8 @@ export default async function (ctx, inject) {
   }
 
   /* eslint-enable object-curly-spacing, quote-props, quotes, key-spacing, comma-spacing */
-  Sentry.init(config)
-  <% } %>
-
-  inject('sentry', Sentry)
-  ctx.$sentry = Sentry
+  init(config)
+  const sentryClient = getCurrentHub().getClient()
+  inject('sentry', sentryClient)
+  ctx.$sentry = sentryClient
 }

test/fixture/lazy/nuxt.config.cjs

@@ -13,8 +13,7 @@ const config = {
   ],
   sentry: {
     lazy: true,
-    // dsn: 'https://fe8b7df6ea7042f69d7a97c66c2934f7@sentry.io.nuxt/1429779',
-    config: {},
+    dsn: 'https://fe8b7df6ea7042f69d7a97c66c2934f7@sentry.io.nuxt/1429779',
     clientIntegrations: {
       // Integration from @Sentry/browser package.
       TryCatch: { eventTarget: false },