Skip to main content
ComponentsEngineJS ProfilerMobile AppRPA Bot RecorderRUM JS
Availability2017.1 or later

Configure Session Replay

Enable or disable replay

Configure Phrases of Interest

Track key on-screen text

Validate the Configuration

Check activity and overhead

Advanced Configuration

Underlying RUM JS settings
Configure Monitoring for ReactJS Configure GermainUX ReactJS monitoring to tailor Real User Monitoring, Session Replay, component analysis, errors, performance, JavaScript Profiling, network activity, privacy, analytics, SLAs, alerts, and automation.
This guide assumes GermainUX RUM JS is already deployed in the ReactJS application.

​
Access the ReactJS UX Monitoring Profile

Navigate to:
Germain WorkspaceSettingsAnalyticsUX Monitoring Profiles
Select the UX Monitoring Profile used by the ReactJS application. The profile controls the browser-side monitoring behavior for the application.

​
Configure the Application

Verify that monitored activity is associated with the correct application. Use consistent application and environment names across:
  • Production
  • Staging
  • Development
  • Other monitored environments
Correct application identification is important for analytics and correlation with backend and infrastructure telemetry.

​
Configure Real User Monitoring

Configure the actual-user telemetry required for the ReactJS application. Depending on the monitoring objective, analyze:
  • Sessions
  • Navigation
  • User actions
  • Application activity
  • Browser information
  • Performance
  • Errors
  • Network requests
Enable only the telemetry required for the intended analysis.

​
Configure Session Replay

Session Replay is controlled by the ReactJS UX Monitoring Profile. Navigate to: Settings → Analytics → UX Monitoring Profiles → [ReactJS Profile] Enable or disable: Session Replay Monitoring Session Replay can be configured to control:
  • Whether sessions are recorded
  • Session duration
  • Session timeout
  • User/session behavior
  • Privacy
  • Exclusions
  • Timeline events
Use replay to investigate the context surrounding ReactJS performance, errors, and user friction.

​
Configure Session Duration

Configure session behavior according to the application. GermainUX supports settings such as: settings.constants.maxSessionDurationMillis to limit the maximum recording duration. Session timeout can also be configured globally through:
SettingsSystemUX and Session Replay Settings

​
Configure Session Handling When Users Change

For environments where multiple users may authenticate through the same browser, configure: settings.constants.createNewSessionIfUsernameChanges Use:
to create a new monitored session when the username changes.

​
Configure ReactJS Component Analysis

Configure analytics for ReactJS component activity captured from the application. Use component analysis to identify:
  • Component usage
  • Rendering performance
  • Slow-performing components
  • Components associated with poor user experience
Analyze component performance together with the affected user session rather than in isolation.

​
Configure Performance Monitoring

Configure monitoring for browser and ReactJS performance conditions. Analyze:
  • User-perceived performance
  • React component performance
  • JavaScript execution
  • Network response time
  • Application responsiveness
Use performance KPIs and SLAs according to the expected application behavior.

​
Configure JavaScript Error Monitoring

Configure browser error collection for the ReactJS application. Depending on the enabled RUM capabilities, monitor:
  • JavaScript errors
  • Unhandled errors
  • Console errors
  • Resource errors
  • Application-specific errors
Correlate errors with:
  • Application
  • User
  • Session
  • Page
  • User action
  • Browser
  • Network activity
This helps distinguish widespread issues from isolated errors.

​
Configure Console Monitoring

Where console monitoring is required, configure the console information GermainUX should collect. Use console telemetry to capture relevant:
  • Errors
  • Warnings
  • Diagnostic messages
Avoid collecting unnecessary verbose console data in production.

​
Configure Long-Task Monitoring

Configure JavaScript long-task monitoring to identify execution that may block the browser’s main thread and affect responsiveness. Use the appropriate threshold for the application. Long-task telemetry can help connect poor responsiveness with JavaScript execution occurring during the affected user interaction.

​
Configure JavaScript Profiling

For deeper JavaScript performance analysis, navigate to: Settings → Analytics → UX Monitoring Profiles → [ReactJS Profile] Enable: JavaScript Profiling Monitoring GermainUX supports JavaScript profiling through the available browser profiling mechanisms. Use profiling selectively where code-level execution analysis is required.

​
Configure JavaScript Profiling Parameters

Advanced profiling behavior is available through: settings.plugins.jsProfiling Configuration options include:
  • functionMinStackHits
  • maxSampleBufferSize
  • maxProfileDuration
  • profileOnPageReady
  • sampleIntervalMillis
  • useSelfProfilingAPI
  • excludedUsernames
  • includedUsernames
Use these settings only when the standard profiling configuration needs to be customized.

​
Configure Network & API Monitoring

Configure browser network monitoring for requests generated by the ReactJS application. Analyze:
  • Request URL or endpoint
  • Response time
  • Latency
  • HTTP status
  • Successful requests
  • Failed requests
Network telemetry helps determine whether poor ReactJS experience originates in an API, service, or external integration.

​
Configure Integration Analysis

Associate relevant network and application telemetry with the integrations used by the ReactJS application. Examples include:
  • Backend APIs
  • Authentication services
  • Third-party services
  • Payment services
  • Search services
  • Other external integrations
This allows integration degradation to be analyzed in the context of affected users and sessions.

​
Configure Cross-Browser Analysis

Analyze ReactJS telemetry by browser and browser version. Use this to identify:
  • Browser-specific errors
  • Browser-specific performance degradation
  • Compatibility differences
  • Different behavior across user populations

​
Configure Synthetic Monitoring

Configure synthetic scenarios for critical ReactJS user journeys. Examples include:
  • Login
  • Search
  • Navigation
  • Form submission
  • Checkout
  • Critical business workflow
Set execution frequency, SLA expectations, and alert behavior according to the operational importance of each journey.

​
Configure Data Privacy

Review the data collected from the ReactJS application. GermainUX supports privacy controls to:
  • Exclude
  • Mask
  • Anonymize
  • Encrypt
where applicable. Review:
  • Form fields
  • User input
  • DOM content
  • URLs
  • Query parameters
  • Usernames
  • Session identifiers
  • Request/response information
Collect only the information required for the monitoring objective.

​
Configure Bot & Crawler Exclusions

To prevent bots and crawlers from affecting ReactJS user analytics, configure exclusions in the UX Monitoring Profile. Navigate to: Settings → Analytics → UX Monitoring Profiles → [ReactJS Profile] Configure: Excluded User Agents GermainUX provides default exclusions for common crawlers and bots.

​
Configure IP Exclusions

Use:
  • Excluded IP Ranges
  • Included IP Ranges
to control which client IP ranges are eligible for monitoring. This is useful for excluding:
  • Internal test traffic
  • Synthetic users
  • Administrative environments
  • Known automated systems

​
Configure User Exclusions

Use: Excluded Usernames to exclude selected users from monitoring. This can be useful for:
  • Test users
  • Automated users
  • Administrative accounts
  • Synthetic accounts

​
Configure Headless Browser Exclusion

Enable: Exclude Headless Browsers where automated browser activity should not be included in actual-user analytics or Session Replay.

​
Configure Phrases of Interest

Configure Phrases of Interest to detect important text appearing in the ReactJS application. Examples include:
  • Error messages
  • Warnings
  • Confirmation messages
  • Out-of-stock messages
  • Compliance messages
  • Application-specific conditions
Phrases can be exact text or regular expressions. When detected, GermainUX creates the corresponding insight and can mark it within Session Replay.

​
Configure KPIs

Configure KPIs for the ReactJS conditions important to the application. Examples include:
  • User experience
  • Session activity
  • React component performance
  • JavaScript execution
  • Errors
  • Network performance
  • API response time
  • Synthetic transaction performance
Custom KPIs can be created for application-specific requirements.

​
Configure SLAs

Create SLAs for conditions requiring threshold-based monitoring. For example: User Interaction Duration > Threshold React Component Rendering > Threshold JavaScript Execution > Threshold API Response Time > Threshold Error Rate > Threshold Synthetic Transaction Failed Configure thresholds according to expected application behavior.

​
Configure Categorization

Categorize ReactJS telemetry into meaningful operational groups. For example:
  • User Experience
  • React Component
  • JavaScript Error
  • JavaScript Performance
  • Network Error
  • API Performance
  • Integration
  • Browser
  • Critical Workflow
Categorization simplifies analysis, dashboards, reports, and alerting.

​
Configure Correlation

Correlate ReactJS telemetry with other GermainUX monitoring. Examples include:
UserReactJSJavaScript
UserReactJSAPI
UserReactJSAPIBackend
UserReactJSBackendDatabase
User ErrorJavaScript ErrorAffected Session
Correlation helps identify both technical cause and user impact.

​
Configure Root Cause Analysis

Use correlated telemetry to investigate ReactJS conditions. For example:
Slow User ActionReact ComponentJavaScript
or:
Slow User ActionNetwork RequestAPI
or: Failed User Action → JavaScript Error or:
Slow ReactJS ExperienceBackend ServiceDatabase
This helps move from an affected user experience to the contributing technology.

​
Configure Alerts

Configure alerts for conditions requiring operational attention. Examples include:
  • Application unavailable
  • Performance SLA exceeded
  • JavaScript error detected
  • Error rate increases
  • API becomes slow
  • Network request fails
  • Critical synthetic transaction fails
Configure recipients and escalation according to severity and operational ownership.

​
Configure Automation

ReactJS monitoring conditions can trigger GermainUX automation. For example:
ReactJS ConditionKPISLAAlert / Action
Automation can include:
  • Notifications
  • Reports
  • HTTP actions
  • Scripts
  • Operational workflows
  • Remediation actions where appropriate

​
Configure Dashboards

Create dashboards for ReactJS Operational Experience Intelligence. Useful views include:
  • User experience
  • User sessions
  • React component performance
  • JavaScript performance
  • Errors
  • Network/API performance
  • Browser analysis
  • Synthetic monitoring
  • SLA status
  • Root cause analysis
Combine experience and technology telemetry where broader context is useful.

​
Configure Automated Reports

Create automated reports for:
  • User experience
  • ReactJS performance
  • Component performance
  • Errors
  • API/network performance
  • Synthetic transactions
  • SLA violations
  • Historical trends
Configure the appropriate schedule and recipients.

​
Validate the Configuration

Generate representative ReactJS activity and verify:
  • Application association
  • UX Monitoring Profile
  • Real User Monitoring
  • Session Replay
  • React component activity
  • Performance
  • JavaScript errors
  • Console monitoring
  • Long tasks
  • JavaScript Profiling where enabled
  • Network/API activity
  • Browser information
  • Privacy controls
  • Bot/user/IP exclusions
  • KPIs
  • SLAs
  • Categorization
  • Correlation
  • Alerts
  • Automation
  • Dashboards
  • Reports
Also verify that monitoring introduces acceptable browser overhead and does not collect unapproved sensitive information.

​
Advanced Configuration

Advanced ReactJS monitoring should use the underlying GermainUX RUM JS and JavaScript configuration rather than duplicating all browser configuration on this page. Use the corresponding technical configuration references for:
  • User Monitoring and Session Replay
  • RUM JS
  • JavaScript monitoring
  • JavaScript Profiling
  • Error monitoring
  • Long-task monitoring
  • Privacy and exclusions
  • RUM APIs

​
Get More Information

ReactJS monitoring can be customized according to the application’s components, user journeys, errors, performance requirements, privacy requirements, APIs, and integrations. GermainUX can help determine which monitoring, analytics and automation capabilities are appropriate for your POP3 Mailbox environment. Contact GermainUX Support.

​
Get Help

Contact GermainUX Support

The Germain Team can help you set this up.

Can't find what you need?

Search all GermainUX docs with Ctrl + K, or use the feedback buttons at the bottom of this page to tell us what is missing.

The content of this document is proprietary to GERMAIN SOFTWARE LLC.