From 2297dbc1a0ce37225877924a0307700ff8eb25e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafa=C5=82=20Ch=C5=82odnicki?= Date: Fri, 24 Mar 2023 08:57:51 -0700 Subject: [PATCH] fix: significantly reduce client bundle size (#532) --- src/hooks.ts | 2 +- src/options.ts | 5 +---- src/templates/plugin.client.js | 35 +++++++++++++++---------------- test/fixture/lazy/nuxt.config.cjs | 3 +-- 4 files changed, 20 insertions(+), 25 deletions(-) diff --git a/src/hooks.ts b/src/hooks.ts index 20eb5ae8..ef51eeb6 100644 --- a/src/hooks.ts +++ b/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`), diff --git a/src/options.ts b/src/options.ts index 69185be5..4b0d74a9 100644 --- a/src/options.ts +++ b/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') } } diff --git a/src/templates/plugin.client.js b/src/templates/plugin.client.js index 49254e98..e38b9cd1 100644 --- a/src/templates/plugin.client.js +++ b/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 } diff --git a/test/fixture/lazy/nuxt.config.cjs b/test/fixture/lazy/nuxt.config.cjs index 50600a09..6ca60e62 100644 --- a/test/fixture/lazy/nuxt.config.cjs +++ b/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 },