Sentry disabled on staging environment

[prem-baj]

Version

@nuxtjs/sentry: 8.0.8
nuxt: 2.17.3

Sentry configuration

 publicRuntimeConfig: {
    sentryDsn: process.env.OPTIMISER_WEB_SENTRY_DSN,
    sentryEnv: process.env.SENTRY_ENVIRONMENT
 },
...
sentry: {
    dsn: process.env.OPTIMISER_WEB_SENTRY_DSN,
    // disabled: process.env.SENTRY_ENVIRONMENT === 'development',
    tracePropagationTargets: [new RegExp(`^${process.env.API_URL}`)],
    tracesSampleRate: 1.0
  },

Reproduction Link / Steps to reproduce

I don't think it's possible to reproduce

What is Expected?

Catching errors from Nuxt Vue 2 on Staging Env with Sentry

What is actually happening?

Everything is working well locally in the development environment. Still, when I'm deploying to the staging environment (Azure) it doesn't work - I'm throwing FE errors but they are not listed on Centry.

I've made sure I have all the variables on my staging env - not only by echoing them in SSH but also by console logging them in my FE app. I've also printed a current Sentry client reference.

It says that it's disabled, even if I got rid of "disabled" like from the Sentry configuration when deploying to staging.

Do you have any ideas about what might be disabling it?

[rchl]

Nowhere in the documentation does it say that $config.sentryDsn or $config.sentryEnv are supported by the module - https://sentry.nuxtjs.org/configuration/runtime-config

[rchl]

Oh, you've just added those for debugging I guess.

You can configure DSN and ENV with runtime config the way it's documented and it should work.

The sentry.dsn setting (the non-runtime one) is only evaluated at build time and I guess your envs are not set then.

[prem-baj]

Nowhere in the documentation does it say that $config.sentryDsn or $config.sentryEnv are supported by the module

Oh, you've just added those for debugging I guess.

Oh, yes indeed, I've just added those vars to config to access them via $config in the Vue app, just to make sure they're defined. I have the SENTRY_ENVIRONMENT env var existing and defined properly.

You can configure DSN and ENV with runtime config the way it's documented and it should work.

I'll give it a try! Wielkie dzięki!

[prem-baj]

BTW should I just move the entire sentry object to publicRuntimeConfig?

publicRuntimeConfig: {
    ...
    sentry: {
      config: {
        environment: process.env.SENTRY_ENVIRONMENT,
        dsn: process.env.OPTIMISER_WEB_SENTRY_DSN,
        disabled: process.env.SENTRY_ENVIRONMENT === 'development',
      },
    },
  },

[rchl]

No, not entire. From the docs:

Currently, only the config, clientConfig and serverConfig options can be configured using the runtime config.

Note that those 3 objects will be merged with the ones from the normal sentry configuration so you don't have to move the whole objects to runtime config.

[prem-baj]

No, not entire. From the docs:

Currently, only the config, clientConfig and serverConfig options can be configured using the runtime config.

Note that those 3 objects will be merged with the ones from the normal sentry configuration so you don't have to move the whole objects to runtime config.

When I'm moving dns and environment vars to publicRuntimeConfig.sentry.config (or I keep it on both objects) it doesn't work when I'm running the development server locally. Should it?

[rchl]

Check messages logged in the terminal. Also make sure that process.env.OPTIMISER_WEB_SENTRY_DSN is defined.

Though I would imagine that you wouldn't want to enable Sentry during development (unless maybe for testing).

[prem-baj]

Check messages logged in the terminal. Also make sure that process.env.OPTIMISER_WEB_SENTRY_DSN is defined.

Nothing in terminal, just same error in the console

Though I would imagine that you wouldn't want to enable Sentry during development (unless maybe for testing).

Yup, but for testing purposes I'd like to see if integration works

[rchl]

Nothing in terminal, just same error in the console

The module always logs some lines on nuxt start.

[prem-baj]

The module always logs some lines on nuxt start.

Oh yes you're right! It's Sentry reporting is disabled (no DSN has been provided)

but I did it here:

publicRuntimeConfig: {
    ...
    sentryDsn: process.env.OPTIMISER_WEB_SENTRY_DSN,
    sentryEnv: process.env.SENTRY_ENVIRONMENT,
    sentry: {
      config: {
        environment: process.env.SENTRY_ENVIRONMENT,
        dsn: process.env.OPTIMISER_WEB_SENTRY_DSN,
      },
    },
  },

🤔
and the variable exists, I can see it logged in the Vue page console as $config.sentryDsn

[rchl]

When you say it doesn't work during local development do you mean nuxt instance started with nuxt dev?

It works here so not sure how to help you unless you provide more specific code that reproduces the issue.

[prem-baj]

When you say it doesn't work during local development do you mean nuxt instance started with nuxt dev?

I run it with just nuxt

It works here so not sure how to help you unless you provide more specific code that reproduces the issue.

How can I do that? What exactly should I share?

[rchl]

Can you show your FULL nuxt config including your sentry module configuration? (censor anything sensitive of course)

[prem-baj]

Sure, nuxt.config.js:

import colors from 'vuetify/es5/util/colors'
import * as Sentry from '@sentry/vue';

export default {
  head: {
    titleTemplate: 'XXX',
    title: 'XXX',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  telemetry: false,
  publicRuntimeConfig: {
    apiURL: process.env.API_URL || 'http://127.0.0.1:7071',
    ...
  },
  privateRuntimeConfig: {},

  loading: {
    color: colors.lightBlue.lighten1,
    height: '5px',
    throttle: 150,
    duration: 7500,
    continuous: true
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    '@/assets/main.scss'
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    '~/plugins/msal.js',
    '~/plugins/charts/bar.chart.js',
    '~/plugins/charts/line.chart.js',
    '~/plugins/charts/pie.chart.js',
    '~/plugins/charts/scatter.chart.js',
    '~/plugins/charts/horizontalbar.chart.js'
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module',
    // https://go.nuxtjs.dev/vuetify
    '@nuxtjs/vuetify'
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    '@nuxtjs/sentry'
  ],

  server: {
    port: process.env.PORT, // default: 3000
    host: '0.0.0.0' // default: localhost
  },

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
    baseURL: '/'
  },

  sentry: {
    dsn: process.env.OPTIMISER_WEB_SENTRY_DSN,
    disabled: process.env.SENTRY_ENVIRONMENT === 'development',
    tracePropagationTargets: [new RegExp(`^${process.env.API_URL}`)],
    tracesSampleRate: 1.0, //  Capture 100% of the transactions
    replaysSessionSampleRate: 0.1,
    replaysOnErrorSampleRate: 1.0, 
  },

  router: {
    middleware: 'auth'
  },

  ssr: false,

  // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    defaultAssets: {
      font: {
        family: 'Red Hat Display'
      }
    },
    treeShake: true,
    theme: {
      dark: false,
      themes: {
      }
    }
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  },

  generate: {
  }
}