How can I set the Sentry environment for the browser at runtime?

[michaelschufi]

Hi everyone!

Could anyone maybe help me with the first steps of Sentry.io integration?
I've now configured sentry.client.config.js and sentry.server.config.js but I am having trouble configuring it at runtime.

We are deploying our single build to multiple environments, building pages dynamically using Incremental Static Regeneration. However, Sentry seems to ignore the environment variable at runtime (defined in sentry.client.config.js). My guess is, that Sentry.init(...) is only called during the build and never at runtime.

Now to my question: How can I set the sentry environment for the browser at runtime?

My current sentry client config:

import * as Sentry from '@sentry/nextjs';
import getConfig from 'next/config';

const { publicRuntimeConfig } = getConfig();

const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;

Sentry.init({
  dsn:
    SENTRY_DSN ||
    'https://[email protected]/1234567',
  tracesSampleRate: process.env.SENTRY_TRACES_SAMPLE_RATE || 0,
  environment: publicRuntimeConfig.SENTRY_ENVIRONMENT || 'development',
});

and in next.config.js:

const moduleExports = withBundleAnalyzer({
  publicRuntimeConfig: {
    SENTRY_ENVIRONMENT: process.env.SENTRY_ENVIRONMENT || 'development',
  },
});

// ...

module.exports = isSentryEnabled
  ? withSentryConfig(moduleExports, SentryWebpackPluginOptions)
  : moduleExports;

How can I set the sentry environment for the browser at runtime if not with publicRuntimeConfig?

Any help would be greatly appreciated!

Thanks in advance!
Michael

[Marcosld]

We actually can't migrate our project to app/ folder because of this :(

[jylertones]

A couple years later, did you ever figure this out?

[Marcosld]

We are running a script before the server starts up that replaces some placeholders in the javascript bundles to the real sentry URLs 😅 . Best approach we could figure.

[nickv2002]

@Marcosld that sounds exactly what we need. Could you share or elaborate on which Sentry values and/or share a sanitized version of the startup script?

[Marcosld]

Of course!

This is the entrypoint.sh that we use in our Dockerfile:

#!/bin/bash 

echo "Replacing sentry bundles with environment variables found..."
placeholder_sentry_dsn="<placeholder-sentry-dsn>"
placeholder_sentry_environment="<placeholder-sentry-environment>"
placeholder_sentry_release="<placeholder-sentry-release>"
placeholder_sentry_performance_sampling="<placeholder-sentry-performance-sampling>"

RELEASE_VERSION=`grep version ./package.json | awk -F \" '{print $4}'`

grep -qr "$placeholder_sentry_dsn" ./.next/static

[[ $? -ne 0 ]] && echo "Could not find sentry bundles to replace environment variables" && exit 1

find ./.next/static -type f -exec sed -i -e "s~$placeholder_sentry_dsn~$SENTRY_DSN~g" -e "s~$placeholder_sentry_performance_sampling~$SENTRY_PERFORMANCE_SAMPLING~g" -e "s~$placeholder_sentry_environment~$CONFIG_NAMESPACE~g" -e "s~$placeholder_sentry_release~$RELEASE_VERSION~g" {} \;

[[ $? -ne 0 ]] && echo "There was an error replacing environment variables" && exit 1

echo "Placeholders replaced!"

exec "$@"

As you can see, here we are replacing the placeholders by environment variables set on runtime.

Then we define our sentry.client.config.ts like this:

import * as Sentry from '@sentry/nextjs';

const getSentryTracingSampleRate = () => (Number('<placeholder-sentry-performance-sampling>') || 0) / 100;

Sentry.init({
      dsn: '<placeholder-sentry-dsn>',
      tracesSampleRate: getSentryTracingSampleRate(),
      environment: '<placeholder-sentry-environment>',
      release: '<placeholder-sentry-release>',
  });

Hope it helps!!