diff --git a/src/frontend/next.config.js b/src/frontend/next.config.js index 5d4c0eb72a..7efe903aa2 100755 --- a/src/frontend/next.config.js +++ b/src/frontend/next.config.js @@ -11,6 +11,8 @@ const myEnv = dotEnv.config({ path: resolve(__dirname, '../../.env'), }); dotenvExpand.expand(myEnv); +console.log(`in next.config.js, process.env: ${JSON.stringify(process.env, null, 2)}`) + const { AD_SERVICE_ADDR = '', @@ -24,6 +26,10 @@ const { OTEL_EXPORTER_OTLP_TRACES_ENDPOINT = '', OTEL_SERVICE_NAME = 'frontend', PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT = '', + NEXT_PUBLIC_SPLUNK_REALM = '', + NEXT_PUBLIC_SPLUNK_RUM_TOKEN = '', + NEXT_PUBLIC_SPLUNK_RUM_APP_NAME = '', + NEXT_PUBLIC_SPLUNK_RUM_ENV = '', } = process.env; const nextConfig = { @@ -100,6 +106,10 @@ const nextConfig = { NEXT_PUBLIC_PLATFORM: ENV_PLATFORM, NEXT_PUBLIC_OTEL_SERVICE_NAME: OTEL_SERVICE_NAME, NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT: PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT, + NEXT_PUBLIC_SPLUNK_REALM, + NEXT_PUBLIC_SPLUNK_RUM_TOKEN, + NEXT_PUBLIC_SPLUNK_RUM_APP_NAME, + NEXT_PUBLIC_SPLUNK_RUM_ENV, }, }; diff --git a/src/frontend/splunk-rum.js b/src/frontend/splunk-rum.js index fe83d9604f..ad2358e363 100644 --- a/src/frontend/splunk-rum.js +++ b/src/frontend/splunk-rum.js @@ -1,8 +1,44 @@ +import React, { useEffect } from 'react'; import SplunkRum from '@splunk/otel-web'; -SplunkRum.init({ - realm: "us1", - rumAccessToken: "Qad35m7E6ld6p_-O_RxwEg", - applicationName: "astroshop", - deploymentEnvironment: "astroshop" -}); +export async function getStaticProps() { + // Logs will be printed to the terminal + console.log('in splunk-rum.js, getStaticProps(), NEXT_PUBLIC_SPLUNK_REALM=', process.env.NEXT_PUBLIC_SPLUNK_REALM); + + return { + props: { + rumRealm: process.env.NEXT_PUBLIC_SPLUNK_REALM, + rumToken: process.env.NEXT_PUBLIC_SPLUNK_RUM_TOKEN, + rumAppName: process.env.NEXT_PUBLIC_SPLUNK_RUM_APP_NAME, + rumEnv: process.env.NEXT_PUBLIC_SPLUNK_RUM_ENV, + }, + }; +} + +const HomePage = ({ rumRealm, rumToken, rumAppName, rumEnv }) => { + useEffect(() => { + console.log('HomePage component mounted'); + SplunkRum.init({ + realm: rumRealm, + rumAccessToken: rumToken, + applicationName: rumAppName, + deploymentEnvironment: rumEnv, + }); + }, [rumRealm, rumToken, rumAppName, rumEnv]); + + return ( +
+

Splunk RUM Enabled

+
+ ); +}; + +export default HomePage; + +//SplunkRum.init({ +// realm: rumRealm, +// rumAccessToken: rumToken, +// applicationName: rumAppName, +// deploymentEnvironment: rumEnv, +// }); +