Skip to main content
ComponentsEngineJS ProfilerMobile AppRPA Bot RecorderRUM JS
Availability2017.2

12. Configure Business Workflows

Key user and business journeys

21. Configure Dashboards

Views matched to objectives

22. Validate the Configuration

Confirm activity is captured

Troubleshooting

Resolve common Vue issues
Configuring Monitoring for User Experience in Vue.js Applications with GermainUX Configure how GermainUX monitors, analyzes, and alerts on user experience, performance, errors, network activity, and business workflows in your Vue.js application.

​
1 Open the UX Monitoring Profile

Go to: Germain Workspace > Left Menu > Analytics > UX Monitoring Profiles Select the UX Monitoring Profile created for the Vue.js application. The UX Monitoring Profile controls the applicable Real User Monitoring and Session Replay behavior.

​
2. Configure Real User Monitoring

Configure the browser telemetry required for your monitoring objectives. Depending on the monitoring configuration, GermainUX can collect: Enable only the monitoring required for your use cases.

​
3. Configure Session Replay

Configure Session Replay for the selected UX Monitoring Profile. Depending on your GermainUX version, settings can include:
  • Session Replay enabled or disabled
  • Session timeout
  • Maximum recording duration
  • Session behavior when username changes
  • Privacy exclusions
  • IP exclusions
  • Included IP ranges
  • Excluded usernames
  • Headless-browser exclusion
Validate Session Replay after making configuration changes.

​
4. Configure Privacy and Data Exclusions

Review the data collected from the Vue.js application. Depending on your security, privacy, and regulatory requirements, data can be:
  • Excluded
  • Masked
  • Anonymized
  • Encrypted
Configure appropriate protection for:
  • Personal information
  • Form values
  • Authentication fields
  • Account information
  • Payment-related information
  • Customer-defined sensitive fields
Collect only the information required for the monitoring use case.

​
5. Configure User Identification

When appropriate and authorized, configure the identifiers required to associate monitored activity with application users. Depending on what the Vue.js application exposes, these can include:
  • User ID
  • Username
  • Customer ID
  • Employee ID
  • Session identifier
  • Customer-defined identifier
Avoid collecting unnecessary personally identifiable information.

​
6. Configure Click Monitoring

GermainUX RUM JS can detect several types of user clicks, including:
  • Standard clicks
  • Dead clicks
  • Error clicks
  • Rage clicks
Use these signals to identify:
  • Controls that do not respond
  • Interactions that generate JavaScript errors
  • Repeated user attempts
  • User frustration
Analyze click behavior together with Session Replay and other technical telemetry.

​
7. Configure Performance Monitoring

Configure the performance metrics relevant to the Vue.js application. Examples include:
  • Page-load time
  • User interaction time
  • Browser processing time
  • Rendering time
  • Network-request duration
  • API response time
Performance thresholds should reflect expected application behavior.

​
8. Configure JavaScript Error Monitoring

Monitor conditions such as:
  • JavaScript errors
  • Console errors
  • Error clicks
  • Resource-loading failures
  • Failed network requests
Use errors together with user/session information to determine:
  • Who was affected
  • What action triggered the error
  • Which page or component was involved
  • Whether the issue affected a business workflow

​
9. Configure Network Monitoring

Configure analysis of network requests generated by the application. Depending on the available data, analyze:
  • Request URL
  • Request duration
  • Response time
  • HTTP status
  • Failed requests
  • API endpoint
  • Third-party service
  • User interaction associated with the request
Avoid capturing sensitive request or response content unless explicitly required and approved.

​
10. Configure Vue Component Analysis

When the required instrumentation is available, configure monitoring for important Vue components. Focus on components that:
  • Are business critical
  • Render frequently
  • Are performance sensitive
  • Have known user-experience issues
Analyze component behavior together with:
  • Rendering performance
  • User interactions
  • Errors
  • Network requests

​
11. Configure JS Profiler — Optional

When GermainUX JS Profiler is deployed, configure deeper JavaScript analysis for selected workflows or application areas. Use profiling to investigate:
  • Slow JavaScript execution
  • Slow functions
  • Browser processing
  • Rendering bottlenecks
  • Network activity
  • Integration activity
Use profiling selectively when deeper technical detail is required.

​
12. Configure Business Workflows

Define important user and business processes. Examples include:

​
Customer Registration

Open RegistrationEnter DetailsSubmitConfirmation

​
Service Request

Search CustomerOpen AccountCreate RequestSubmit

​
eCommerce

ProductAdd to CartCheckoutPurchase
For each workflow, define:
  • Start
  • Important milestones
  • Completion
  • Failure
  • Abandonment
GermainUX can then analyze:
  • Completion rate
  • Duration
  • Abandonment
  • Repeated steps
  • Errors
  • Friction
  • Performance delays

​
13. Configure Synthetic Monitoring — Optional

Use GermainUX RPA Bot Recorder for critical Vue.js workflows. Configure:
  • Scenario
  • Monitoring location
  • Schedule
  • Timeout
  • Expected result
  • Failure conditions
  • Alerting
Use test accounts and safe scenarios.

​
14. Configure Backend Correlation — Optional

When GermainUX also monitors backend systems, configure the identifiers or timing relationships required to correlate frontend activity with:
  • REST APIs
  • Application servers
  • Databases
  • Logs
  • Infrastructure
  • Integrations
This can help determine whether an issue originates in:
BrowserNetworkAPIBackendDatabase

​
15. Configure KPIs

Configure KPIs relevant to your Vue.js monitoring use cases. Typical areas include:
  • User Session
  • User Interaction
  • Page Performance
  • JavaScript Error
  • HTTP Request
  • Workflow
  • Synthetic Transaction
Use the KPIs available for your GermainUX version and monitoring configuration.

​
16. Configure Measures

Measures can include:
  • User count
  • Session count
  • Interaction count
  • Click count
  • Error count
  • Error rate
  • Page-load time
  • Interaction time
  • Network-request duration
  • Workflow duration
  • Completion rate
  • Abandonment rate

​
17. Configure Analysis Dimensions

Analyze Vue.js activity by:
  • Application
  • Environment
  • User
  • Session
  • Page
  • URL
  • Vue component
  • Interaction
  • Browser
  • Browser version
  • Device
  • Operating system
  • Geography
  • Error
  • API
  • Workflow
  • Time period

​
18. Configure SLAs

Configure thresholds for conditions requiring attention. Examples include:

​
Page Performance

Page Load Time > Threshold

​
Interaction Performance

Interaction Response Time > Threshold

​
JavaScript

JavaScript Error Rate > Threshold

​
Network

API Response Time > Threshold

​
Workflow

Workflow Completion Rate < Expected Threshold

​
Synthetic Monitoring

Critical Scenario = Failed Use thresholds appropriate for the application’s expected behavior.

​
19. Configure Rules and Automated Analysis

Use GermainUX Rules for more advanced conditions. Examples: Slow Interaction + Slow API Request JavaScript Error + Workflow Abandonment Rage Click + No Navigation Error Click + JavaScript Exception Performance Degradation + Increased User Abandonment Rules can combine technical and user-experience signals to identify higher-impact problems.

​
20. Configure Alerts and Watches

Configure notifications for conditions requiring attention. Examples: JavaScript Error Rate Above Threshold → Alert Engineering Critical Workflow Failure → Notify Application Team Slow API + Affected Users → Notify Development and API Teams Synthetic Transaction Failure → Alert Operations GermainUX can trigger:
  • Alerts
  • Watches
  • Reports
  • Approved diagnostics
  • Approved automation

​
21. Configure Dashboards

Create dashboards according to the monitoring objective.

​
User Experience

Monitor:
  • Users
  • Sessions
  • Interactions
  • Dead clicks
  • Rage clicks
  • Error clicks
  • Session Replay
  • Workflow friction

​
Application Performance

Monitor:
  • Page performance
  • Interaction performance
  • Rendering
  • JavaScript errors
  • Network requests

​
Engineering

Monitor:
  • JavaScript errors
  • JS Profiler data
  • Slow functions
  • API performance
  • Failed requests
  • Browser-specific problems

​
Business Workflows

Monitor:
  • Workflow completion
  • Duration
  • Abandonment
  • Errors
  • User friction
  • Business outcomes

​
22. Validate the Configuration

Perform representative activity in the Vue.js application and confirm:
1

Sessions are created

2

Navigation is captured

3

User interactions are captured

4

Click monitoring behaves as expected

5

Performance data is available

6

JavaScript errors are detected

7

Network requests are captured as configured

8

Session Replay works when enabled

9

Sensitive data is protected

10

Workflows are reconstructed correctly

11

JS Profiler works when enabled

12

Synthetic transactions execute correctly

13

SLAs evaluate correctly

14

Alerts and Watches operate as expected

​
Troubleshooting

​
No User Monitoring Data

Verify:
  • RUM JS is installed.
  • The application URL matches the UX Monitoring Profile.
  • RUM JS initializes successfully.
  • Browser requests to GermainUX are not blocked.
  • The test user or IP address is not excluded.

​
Session Replay Is Missing

Verify:
  • Session Replay is enabled globally.
  • Session Replay is enabled for the profile.
  • User/IP exclusion rules are correct.
  • Headless-browser exclusion is not affecting the test.
  • Monitoring data reaches GermainUX.

​
JavaScript Errors Are Missing

Verify:
  • RUM JS is active.
  • The error occurs in the monitored browser context.
  • Error monitoring is enabled.
  • Privacy or filtering rules do not suppress the event.

​
Network Requests Are Missing

Verify:
  • RUM JS is active.
  • The request originates in an accessible browser context.
  • Network monitoring is enabled.
  • Filtering rules are not excluding the request.

​
Workflow Is Incomplete

Verify:
  • Required workflow events are being collected.
  • Start and completion conditions are correctly defined.
  • Intermediate milestones correspond to the current Vue.js implementation.
  • Application changes have not altered event or route identifiers.

​
Get More Information

GermainUX can help determine which monitoring, analytics and automation capabilities are appropriate for your Vue 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.