nuxt-community / sentry-module

Sentry module for Nuxt 2
https://sentry.nuxtjs.org
MIT License
501 stars 114 forks source link

Sentry disabled on staging environment #698

Open prem-baj opened 1 month ago

prem-baj commented 1 month ago

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.

Image

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

Image

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

rchl commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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

Image

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 commented 1 month ago

Nothing in terminal, just same error in the console

The module always logs some lines on nuxt start.

prem-baj commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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

prem-baj commented 1 month ago

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: {
  }
}
rchl commented 1 month ago

Some notes:

prem-baj commented 1 month ago

You haven't included the sentry part in publicRuntimeConfig. I would hope it is present when testing.

I did it and it didn't work on staging + it didn't work locally as well

Try temporarily removing the ssr: false option to see if that changes the Sentry log in the terminal.

it causes breaking Azure authentication 👎 so I won't even be able to check if Sentry works

rchl commented 1 month ago

I'm out of ideas.

Feel free to minimize your project until it's something that reproduces and can be shared. (I feel like you'll find the issue yourself if you do that anyway.)

Or just start with a completely fresh project, add sentry and verify that it works there (it does for me).

By "works" I mean that the terminal will print Sentry reporting is enabled... when runtime config with DSN is present and will otherwise print Sentry reporting is disabled....