Nuxt source maps and environment variables

[lforst]

Hello,

Thank you for your work!

I'm encountering two significant issues while integrating Sentry into my Nuxt.js project:

1 - Sourcemap Upload Fails on Staging:

Local Build: When building the project locally, the sourcemap is successfully uploaded to Sentry. (
Only when the sentry.client.config.ts file is successfully created)
Staging Environment: On my staging environment (a test environment similar to production), the sourcemap upload fails with the following warning:

caused by: [60] SSL peer certificate or SSH remote key was not OK (SSL certificate problem: unable to get local issuer certificate)
error: API request failed

This may be due to server configuration, I will investigate

2 - Environment Variables Not Accessible:
I'm unable to access environment variables in both sentry.client.config.ts and instrument.server.mjs.
I've tried various approaches, but variables remain undefined.
Is there a known solution for this, or is it currently not feasible to access environment variables in these specific files?

3 - Attempted Solution with Nuxt Plugin:

I attempted to create a custom Nuxt plugin to cleanly manage the Sentry configuration, but in this case, the sourcemap upload doesn’t even trigger as the file seems to be unrecognized.

Thank you in advance for your feedback :)

Originally posted by @AnthonyRuelle in #9095

[lforst]

@AnthonyRuelle thanks for reporting this. Would you mind providing concrete code examples of what you did with regards to environment variables?

I fear the issue about SSL is out of our control and you need to check your server configuration.

[AnthonyRuelle]

I'm facing an issue where I can't access my environment variables via process.env in my sentry.client.config.ts file. Here are the details:

sentry.client.config.ts File (at the project root):

import { init } from '@sentry/nuxt';

const dsn = process.env.SENTRY_DSN as string;
const release = process.env.RELEASE_BACKOFFICE as string;
const environment = process.env.APP_ENV as string;

console.log('process:', process);
console.log('Sentry DSN:', dsn);
console.log('Sentry release:', release);
console.log('Sentry environment:', environment);

init({
    dsn,
    release,
    environment,
    enabled: true,
});

nuxt.config.ts:

export default {
  runtimeConfig: {
    public: {
      APP_ENV: process.env.APP_ENV,
      RELEASE_BACKOFFICE: process.env.RELEASE_BACKOFFICE,
      SENTRY_DSN: process.env.SENTRY_DSN,
    },
  },
};

.env File:
I have my environment variables properly declared in my .env file.

Problem:
Despite having everything set up as above, I cannot access the environment variables via process.env. Additionally, I don’t have access to useRuntimeConfig() in this context, which would have simplified the process.

[lforst]

Well, sentry.client.config.ts, as the name indicates, runs on the client, where process is not a thing.

In the next version we release useRuntimeConfig() will be available in the config file, until then you should be able to pass static values or pass things however you like to there.

[sky-code]

Well, sentry.client.config.ts, as the name indicates, runs on the client, where process is not a thing.

In the next version we release useRuntimeConfig() will be available in the config file, until then you should be able to pass static values or pass things however you like to there.

Version with useRuntimeConfig() in config file released, probably this issue can be closed.

[AnthonyRuelle]

on with useRuntimeConfig() in config file released, p

I am in latest version (8.30.0) and when i used the useRuntimeConfig, i have this error:

[nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables.

sentry.client.config.ts: