fix(tracing): merge user's tracing configuration

[rchl]

Original code did not resolve options.tracing: true to an object with default properties. This resulted in Vue integration getting those options:

    new Vue({ Vue: VueLib, ...{"attachProps":true,"logErrors":false}}),

rather than:

    new Vue({ Vue: VueLib, ...{"attachProps":true,"logErrors":false,"tracing":true,"tracingOptions":{"hooks":["mount","update"],"timeout":2000,"trackComponents":true}}}),

and likely Vue tracing not working.

[codecov]

Codecov Report

Merging #463 (54678a5) into main (cdf29df) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             main     #463   +/-   ##
=======================================
  Coverage   70.83%   70.83%           
=======================================
  Files           1        1           
  Lines          48       48           
  Branches       22       22           
=======================================
  Hits           34       34           
  Misses         11       11           
  Partials        3        3           

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[rchl]

I can't get any performance data to appear on Sentry when testing with the default fixture from this repo but I'll assume that this is better anyway.

[rchl]

@pimlie I believe you are using tracing/performance functionality. Do you have any idea why Sentry would not pick up any data for the performance tab? Reporting errors works just fine but nothing shows up in Performance:

I can see some relevant requests being made to Sentry on the client side and after enabling "debug" I also don't see any signals that some events were ignored.

For example:

Sentry Logger [log]: [Tracing] flushing IdleTransaction [logger.js:60](webpack:///node_modules/@sentry/utils/esm/logger.js?f0b6)
Sentry Logger [log]: [Measurements] Adding measurements to transaction {
  "fcp": {
    "value": 129.00018692016602,
    "unit": "millisecond"
  },
  "ttfb": {
    "value": 105.00001907348633,
    "unit": "millisecond"
  },
  "ttfb.requestTime": {
    "value": 54.99982833862305,
    "unit": "millisecond"
  }
} [logger.js:60](webpack:///node_modules/@sentry/utils/esm/logger.js?f0b6)
Sentry Logger [log]: [Tracing] Finishing pageload transaction: /.

I've also tried this with the v7 SDK on the #461 branch and it's the same issue.

[pimlie]

@rchl Not sure, but could be because I have tweaked the lazy client plugin somewhat. In any case its (still) working for me. What does your config look like? (iirc I didnt change the sentry module config)

These are the relevant parts of my config:

  tracing: {
    tracesSampleRate: parseInt(process.env.SENTRY_TRACES_SAMPLE_RATE || '1'),
    vueOptions: {
      tracing: true,
      tracingOptions: {
        hooks: ['activate', 'mount', 'update', 'destroy'],
        timeout: 2000,
        trackComponents: true,
      },
    },
    browserOptions: {
      tracingOrigins: ['localhost', /\.netlify\.app\//],
    }

then the relevant parts of my tweaked sentry.lazy.ejs looks like this. Please note Im using @sentry/vue and not @sentry/browser, also I might have removed some optional template parts that I didnt used/needed.

<% if (options.tracing) { %>
  const { BrowserTracing } = await import(/* <%= magicComments.join(', ') %> */ '@sentry/tracing')
<% }

<% if (options.tracing) {
  const serializedTracingConfig = Object
    .entries(options.tracing.browserOptions)
    .map(([key, option]) => {
      const value = typeof option === 'function'
        ? serializeFunction(option)
        : serialize(option)

      return`${key}: ${value}`
    })
    .join(',\n    ')
%>
  const tracingConfig = {
    routingInstrumentation: Sentry.vueRouterInstrumentation(ctx.app.router),
    <%= serializedTracingConfig %>
  }

  config.integrations = [
    <%= 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.join(',')}})`
      }).join(',\n    ')
    %>,
    <%= options.tracing ? `new BrowserTracing(tracingConfig),` : '' %>
  ]

[rchl]

I have been testing with the included fixture (yarn dev:fixture) on the latest branch which doesn't use lazy loading.

The relevant sentry.client.js parts look like this:

  const config = {
    release:"7dc8ea52bc46d6fb45943655826c56eb768b01bf",
    dsn:"[DSN]",
    environment:"development",
    debug:true,
    tracesSampleRate:1,
  }

  const runtimeConfigKey = "sentry"
  if (ctx.$config && runtimeConfigKey && ctx.$config[runtimeConfigKey]) {
    merge(config, ctx.$config[runtimeConfigKey].config, ctx.$config[runtimeConfigKey].clientConfig)
  }

  config.integrations = [
    new Dedupe(),
    new ExtraErrorData(),
    new ReportingObserver(),
    new RewriteFrames(),
    new Vue({ Vue: VueLib, ...{"attachProps":true,"logErrors":true,"tracing":true,"tracingOptions":{"hooks":["mount","update"],"timeout":2000,"trackComponents":true}}}),
    new TryCatch({eventTarget:false}),
  ]

  config.integrations.push(new TracingIntegrations.BrowserTracing())

  const customIntegrations = await getCustomIntegrations(ctx)
  if (Array.isArray(customIntegrations)) {
    config.integrations.push(...customIntegrations)
  } else {
    console.error(`[@nuxtjs/sentry] Invalid value returned from customClientIntegrations plugin. Expected an array, got "${typeof customIntegrations}".`)
  }

  /* eslint-enable object-curly-spacing, quote-props, quotes, key-spacing, comma-spacing */
  Sentry.init(config)

[rchl]

For the v7 SDK it's like this:

import * as Sentry from '@sentry/vue'

  //...

  const config = {
    Vue,
    release:"298f44a9e2bb1237270bcd3c04bee35e9ee148fd",
    dsn:"[DSN]",
    environment:"prod",
    debug:true,
    tracesSampleRate:1,
  }

  const runtimeConfigKey = "sentry"
  if (ctx.$config && runtimeConfigKey && ctx.$config[runtimeConfigKey]) {
    merge(config, ctx.$config[runtimeConfigKey].config, ctx.$config[runtimeConfigKey].clientConfig)
  }

  config.integrations = [
    new Dedupe(),
    new ExtraErrorData(),
    new ReportingObserver(),
    new RewriteFrames(),
    new TryCatch({eventTarget:false}),
  ]

  const { tracePropagationTargets, ...tracingOptions } = {"tracesSampleRate":1,"hooks":["mount","update"],"timeout":2000,"trackComponents":true,"tracePropagationTargets":["localhost",new RegExp("^\\\u002F", "")]}
  config.integrations.push(new BrowserTracing({ tracePropagationTargets }))
  merge(config, tracingOptions)

  const customIntegrations = await getCustomIntegrations(ctx)
  if (Array.isArray(customIntegrations)) {
    config.integrations.push(...customIntegrations)
  } else {
    console.error(`[@nuxtjs/sentry] Invalid value returned from customClientIntegrations plugin. Expected an array, got "${typeof customIntegrations}".`)
  }

  /* eslint-enable object-curly-spacing, quote-props, quotes, key-spacing, comma-spacing */
  Sentry.init(config)

[rchl]

@rchl Not sure, but could be because I have tweaked the lazy client plugin somewhat. In any case its (still) working for me. What does your config look like? (iirc I didnt change the sentry module config)

BTW. Are you using lazy in combination with tracing? It seems like this module doesn't even support that case right now and I'm assuming that's because it would give inaccurate results for page loading metrics (but probably can still be useful for some things). How is that working out for you?

[pimlie]

Yeah, using lazy. I might be missing some component stats during page load indeed, but WebVitals are still being reported (PerformanceObserver also reports stats after page had loaded afaik?). Also any client-side navigation is still fully reported including backend transactions and I hope we have much more client-side navigation then new user sessions ;)

[rchl]

Turns out the issue was that I'm on a plan that only has 100k transactions and that is reached within 1 hour in my company so essentially our plan doesn't really support those.