chore(frontend): agent configuration by Joozty · Pull Request #95 · splunk/opentelemetry-demo

Joozty · 2026-01-28T13:55:09Z

Changes

Few minor updates in frontend package

added unique IDs for all key UI elements
added a new void "Show all reviews" button for rage click use case
update the RUM agent for next version and tweaking settings

Copilot

Pull request overview

This PR implements frontend agent configuration updates for RUM (Real User Monitoring) instrumentation and testing. The changes update the Splunk RUM agent to use a "next" version, add unique IDs to UI elements for better tracking, and introduce an intentionally non-functional "Show More Reviews" button to test rage click detection.

Changes:

Updated RUM agent configuration to use CDN path /next/ and added frustration signals tracking with rage click detection
Added unique id attributes to multiple UI buttons and form elements across the frontend
Changed Docker image references from official Splunk registry to joozty/test1 for testing purposes

Reviewed changes

Copilot reviewed 27 out of 28 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/frontend/pages/_document.tsx	Updated RUM agent initialization scripts and configuration
src/frontend/components/Button/Button.tsx	Made `id` prop required in Button interface
src/frontend/components/ProductReviews/*	Added non-functional "Show More Reviews" button for rage click testing
src/frontend/components/*	Added id attributes to various buttons and UI elements
src/frontend/pages/*	Added id attributes to page-level buttons
src//-k8s.yaml	Changed image references to joozty/test1 for testing
kubernetes/TEST-splunk-astronomy-shop-test1.yaml	Large generated consolidated K8s manifest with test images

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/frontend/components/ProductReviews/ProductReviews.tsx

src/frontend/pages/_document.tsx

src/frontend/components/Button/Button.tsx

src/shop-dc-shim/shop-dc-shim-k8s.yaml

src/frontend/components/ProductReviews/ProductReviews.tsx

Copilot

Pull request overview

Copilot reviewed 14 out of 14 changed files in this pull request and generated 7 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-28T14:08:30Z

src/frontend/pages/_document.tsx

+              }}
+          />
+          <Script
+              src={`https://cdn.signalfx.com/o11y-gdi-rum/next/splunk-otel-web-session-recorder.js`}


The CDN URL references a "next" version path (https://cdn.signalfx.com/o11y-gdi-rum/next/splunk-otel-web-session-recorder.js). Using "next" as a version identifier is risky because: 1) It may point to unstable or pre-release code that could break without notice, 2) The behavior may change unexpectedly as new versions are deployed, 3) It's unclear if "next" is a valid version path on this CDN. Consider using a specific stable version number instead, such as "latest" or a pinned version like "2.0.5" (which is referenced in the main RUM configuration). This ensures predictable behavior and prevents unexpected breaking changes in production.

it points always to the latest commit in the agent repo and it is intentionall

src/frontend/pages/_document.tsx

Copilot · 2026-01-28T14:08:31Z

src/frontend/pages/_document.tsx

+              dangerouslySetInnerHTML={{ __html: this.props.envString }}>
+          </Script>
          {/* Load user attributes generator - must load before RUM initialization */}
          <script src="/global-attributes.js"></script>


This script tag uses the older HTML script element instead of Next.js's Script component, while other scripts in this file have been migrated to use the Script component. For consistency and to benefit from Next.js's script optimization features, consider updating this to use the Script component with strategy="beforeInteractive" like the other scripts.

src/frontend/pages/_document.tsx

Copilot · 2026-01-28T14:08:32Z

src/frontend/pages/_document.tsx

+                    privacy: {
+                      "maskAllText": false
+                    },


The previous privacy configuration included sensitivityRules that allowed for granular control over what content gets masked or excluded from tracking (e.g., masking all p tags by default, unmasking specific elements, excluding user profile sections). These rules have been completely removed in favor of a simple "maskAllText: false" setting, which means all text will now be captured without any filtering. This is a significant reduction in privacy controls. Consider restoring or reimplementing appropriate sensitivity rules to protect user privacy while still allowing necessary monitoring functionality.

src/frontend/pages/_document.tsx

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Copilot

Pull request overview

Copilot reviewed 14 out of 14 changed files in this pull request and generated 8 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-28T15:18:13Z

src/frontend/pages/_document.tsx

+                    _experimental_dataAttributesToCapture: [
+                      "data-cy",
+                    ],
+                    _experimental_spaMetrics: true


The configuration uses experimental features (_experimental_dataAttributesToCapture and _experimental_spaMetrics) which may change or be removed in future versions. These features are prefixed with _experimental_ indicating they are not stable APIs.

Consider documenting the dependency on these experimental features and monitoring for changes in future RUM versions, or verify if these features have been stabilized in the "next" version being used.

Copilot · 2026-01-28T15:18:14Z

src/frontend/pages/_document.tsx

+                    privacy: {
+                      "maskAllText": false
+                    },
+                    instrumentations: {
+                      "frustrationSignals": {
+                        "rageClick": true
+                      }
+                    },
+                    _experimental_dataAttributesToCapture: [
+                      "data-cy",
+                    ],
+                    _experimental_spaMetrics: true
                  });
-
+                  
                  // Initialize tracer for custom spans and expose globally
-                  const Provider = SplunkRum.provider;
-                  var tracer = Provider.getTracer('appModuleLoader');
+                  const tracer = SplunkRum.provider.getTracer('appModuleLoader');
                  window.tracer = tracer; // Make tracer available globally for custom spans
-
-                  if (typeof SplunkSessionRecorder !== 'undefined') {
+                `,
+              }}
+          />
+          <script
+              src="https://cdn.signalfx.com/o11y-gdi-rum/next/splunk-otel-web-session-recorder.js"
+              crossOrigin="anonymous"
+          />
+          <script
+              id="splunk-session-recorder-init"
+              dangerouslySetInnerHTML={{
+                __html: `
                    SplunkSessionRecorder.init({
-                      realm: realm,
-                      rumAccessToken: rumAccessToken
+                        realm: window.ENV.SPLUNK_RUM_REALM,
+                        rumAccessToken: window.ENV.SPLUNK_RUM_TOKEN,
+                        maskAllText: false


The configuration contains two different privacy/masking settings that may be conflicting:

In SplunkRum.init(), privacy.maskAllText is set to false (line 88)

In SplunkSessionRecorder.init(), maskAllText is set to false (line 118)

While both are currently set to false, this duplication could lead to confusion. The previous version had more granular privacy controls with sensitivityRules. Consider documenting why the privacy rules were simplified, as this changes the data collection behavior significantly.

src/frontend/components/ProductReviews/ProductReviews.tsx

Copilot · 2026-01-28T15:18:14Z

src/frontend/components/ProductReviews/ProductReviews.tsx

+                onClick={() => {
+                  // Intentionally empty - no action for rage click testing
+                }}
+                data-cy="ShowAllReviews"


The button is intentionally non-functional but doesn't communicate this to assistive technology users. Consider adding an aria-label or aria-describedby attribute that indicates this is a test button, or disable the button with the disabled attribute and appropriate styling if the intent is to test clicking on disabled elements.

This would improve accessibility while still serving the testing purpose.

Suggested change

data-cy="ShowAllReviews"

data-cy="ShowAllReviews"

aria-label="Show all reviews (test button that does not perform any action)"

Copilot · 2026-01-28T15:18:15Z

src/frontend/components/Button/Button.tsx


-const Button = styled.button<{ $type?: 'primary' | 'secondary' | 'link' }>`
+interface ButtonProps {
+  id: string;


The id prop is marked as required in the ButtonProps interface. This creates a breaking change because:

Styled components that extend Button (e.g., styled(Button) in CartButton, EmptyCartButton, GoShoppingButton, AddToCart) will now require the id prop to be passed by consumers

The id attribute is a standard HTML attribute that should be optional

The id prop should be marked as optional by changing id: string; to id?: string; to maintain backward compatibility and follow HTML attribute conventions.

Suggested change

id: string;

id?: string;

Copilot · 2026-01-28T15:18:15Z

src/frontend/pages/_document.tsx

+          <script
+              src="https://cdn.signalfx.com/o11y-gdi-rum/next/splunk-otel-web-session-recorder.js"
+              crossOrigin="anonymous"


Similar to the main RUM script, the session recorder is also using the "next" version tag which points to pre-release versions. For production stability, consider using "latest" or a specific version number.

Copilot · 2026-01-28T15:18:15Z

src/frontend/pages/_document.tsx

+          <script
+              id="splunk-rum-init"
+              dangerouslySetInnerHTML={{
+                __html: `
                  SplunkRum.init({
-                    realm: realm,
-                    rumAccessToken: rumAccessToken,
-                    applicationName: applicationName,
-                    deploymentEnvironment: deploymentEnvironment,
+                    realm: window.ENV.SPLUNK_RUM_REALM,
+                    rumAccessToken: window.ENV.SPLUNK_RUM_TOKEN,
+                    applicationName: window.ENV.SPLUNK_APP_NAME,
+                    deploymentEnvironment: window.ENV.SPLUNK_ENV,
+                    globalAttributes: getSplunkGlobalAttributes(),
                    version: '2.0.5',
-                    globalAttributes: globalAttributes,
-                    environment: '',
                    // Digital Experience Analytics configuration
                    user: {
                      trackingMode: 'anonymousTracking'
                    },
-                    // Privacy controls
-                    maskAllText: true,
-                    sensitivityRules: [
-                      { rule: 'mask', selector: 'p' },
-                      { rule: 'unmask', selector: 'p.item-label' },
-                      { rule: 'exclude', selector: '#user-profile' }
-                    ]
+                    privacy: {
+                      "maskAllText": false
+                    },
+                    instrumentations: {
+                      "frustrationSignals": {
+                        "rageClick": true
+                      }
+                    },
+                    _experimental_dataAttributesToCapture: [
+                      "data-cy",
+                    ],
+                    _experimental_spaMetrics: true
                  });
-
+                  
                  // Initialize tracer for custom spans and expose globally
-                  const Provider = SplunkRum.provider;
-                  var tracer = Provider.getTracer('appModuleLoader');
+                  const tracer = SplunkRum.provider.getTracer('appModuleLoader');
                  window.tracer = tracer; // Make tracer available globally for custom spans
-
-                  if (typeof SplunkSessionRecorder !== 'undefined') {
+                `,


The previous implementation had a retry mechanism (setTimeout(initializeSplunkRUM, 100)) that would retry initialization if SplunkRum was not yet defined. The new implementation removes this retry logic.

With the new approach, if the Splunk RUM script hasn't fully loaded when the initialization script runs, the initialization will fail silently. While the script loading order should prevent this (load script, then run init), network conditions or browser behavior could cause race conditions.

Consider adding error handling or verification that SplunkRum is defined before calling init(), or document why this retry logic is no longer needed with the new CDN version.

Copilot · 2026-01-28T15:18:16Z

src/frontend/pages/_document.tsx

+          <script
+              id="splunk-session-recorder-init"
+              dangerouslySetInnerHTML={{
+                __html: `
                    SplunkSessionRecorder.init({
-                      realm: realm,
-                      rumAccessToken: rumAccessToken
+                        realm: window.ENV.SPLUNK_RUM_REALM,
+                        rumAccessToken: window.ENV.SPLUNK_RUM_TOKEN,
+                        maskAllText: false
                    });
-                  }
-                } else {
-                  setTimeout(initializeSplunkRUM, 100);
-                }
-              })();
-            `
-          }} />
+                `,
+              }}


Similar to the RUM initialization, the session recorder initialization no longer has the safety check to verify that SplunkSessionRecorder is defined before calling init().

Consider adding error handling or verification that SplunkSessionRecorder is defined, or document why this is safe with the new implementation.

Copilot AI review requested due to automatic review settings January 28, 2026 13:55

Copilot started reviewing on behalf of Joozty January 28, 2026 13:55 View session

Copilot AI reviewed Jan 28, 2026

View reviewed changes

Joozty force-pushed the main branch from f671d10 to 4578329 Compare January 28, 2026 14:01

Joozty added 3 commits January 28, 2026 15:04

chore: improve agent configuration

6e1a3a6

chore: add ids to inputs and buttons

c684685

chore: add void show more reviews button

4ad5e72

Copilot AI review requested due to automatic review settings January 28, 2026 14:04

Joozty force-pushed the main branch from 4578329 to 4ad5e72 Compare January 28, 2026 14:04

Copilot started reviewing on behalf of Joozty January 28, 2026 14:04 View session

Copilot AI reviewed Jan 28, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings January 28, 2026 14:27

Copilot AI reviewed Jan 28, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings January 28, 2026 14:51

Copilot AI reviewed Jan 28, 2026

View reviewed changes

Joozty force-pushed the main branch from 03a8b26 to 3beae0f Compare January 28, 2026 15:14

Copilot AI review requested due to automatic review settings January 28, 2026 15:14

Copilot started reviewing on behalf of Joozty January 28, 2026 15:14 View session

chore: use script directly

b9d8c68

Joozty force-pushed the main branch from 3beae0f to b9d8c68 Compare January 28, 2026 15:15

Joozty marked this pull request as ready for review January 28, 2026 15:15

Copilot AI reviewed Jan 28, 2026

View reviewed changes

hagen-p self-requested a review January 28, 2026 15:21

hagen-p approved these changes Jan 28, 2026

View reviewed changes

hagen-p merged commit 8ee6624 into splunk:main Jan 28, 2026
5 checks passed

	data-cy="ShowAllReviews"
	data-cy="ShowAllReviews"
	aria-label="Show all reviews (test button that does not perform any action)"

Comments

Conversation

Joozty commented Jan 28, 2026

Changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Joozty Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 28, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants