Deploy Monitoring for VueJS

Deploy Monitoring for Vue.js

Deploy GermainUX monitoring for a Vue.js application.

The Vue.js Wizard generates the required Real User Monitoring configuration and provides the supported installation methods for your application.

Monitoring Components

Depending on the required monitoring coverage, Vue.js monitoring can use:

Deploy only the components required for your use cases.

Prerequisites

Before deployment, confirm:

• You have access to Germain Workspace.

• You have the Vue.js application URL.

• You can modify the Vue.js application or its deployment configuration.

• The application can communicate with the GermainUX environment.

• Required privacy and security requirements have been defined.

• You know which application environments will be monitored.

Examples include:

• Development

• QA

• Staging

• Production

1. Open the Vue.js Wizard

Go to:

Germain Workspace > Left Menu > Wizards > Vue.js

Start the Vue.js Wizard.

2. Configure the Application

Enter:

• Application Name

• Application URL

Use a descriptive name that clearly identifies the application and environment.

For example:

Customer Portal - Vue.js - Production

3. Complete the Wizard

Continue through the Vue.js Wizard.

At the end of the wizard, GermainUX displays the available deployment options.

Supported deployment methods include:

• Package dependency using npm or yarn

• Script tag injection

• JavaScript code snippet

Choose the deployment method appropriate for your application architecture and deployment process.

4. Deploy Using npm or Yarn

Use the package dependency option when GermainUX RUM JS should be included as part of the Vue.js application's dependency and build process.

Follow the package installation and initialization instructions generated by the Vue.js Wizard.

Use the exact package name and configuration generated for your GermainUX environment.

After installation:

1. Build the application.

2. Deploy it to the target environment.

3. Open the application.

4. Verify that GermainUX monitoring initializes.
   

   

5. Deploy Using Script Tag Injection

Use script tag deployment when monitoring is loaded separately from the Vue application bundle.

Follow the script-tag instructions generated by the Wizard.

Depending on the selected configuration, the monitoring script may be hosted:

• Locally

• Remotely

Deploy the generated script exactly as provided for the selected UX Monitoring Profile.

6. Deploy Using a JavaScript Code Snippet

Use the JavaScript snippet option when the monitoring configuration needs to be initialized directly within application code or an approved application bootstrap location.

Follow the code-snippet instructions generated by the Wizard.

Ensure that the monitoring code executes early enough in the application lifecycle to capture the required user activity.

7. Retrieve Deployment Instructions Later

You can return to the generated deployment instructions after completing the Wizard.

Go to:

Germain Workspace > Left Menu > Analytics > UX Monitoring Profiles

Select the UX Monitoring Profile created for the Vue.js application.

In the Configuration Editor, select:

Installation

The generated installation instructions are displayed.

8. Deploy JS Profiler — Optional

Deploy GermainUX JS Profiler when deeper JavaScript analysis is required.

Use JS Profiler when Real User Monitoring identifies issues that require additional visibility into:

• JavaScript execution

• Slow functions

• Browser processing

• Network activity

• Integration activity

Validate profiling in a non-production environment before enabling broad production collection when appropriate.

9. Deploy Synthetic Monitoring — Optional

Use GermainUX RPA Bot Recorder to create synthetic scenarios for critical Vue.js workflows.

Examples include:

Open Application → Sign In → Navigate → Verify Result

or:

Open Application → Search → Select → Submit → Verify Confirmation

Use dedicated test accounts and test data when appropriate.

Avoid workflows that unintentionally modify production data.

10. Deploy Backend Monitoring — Optional

When the Vue.js application depends on customer-controlled backend services, deploy GermainUX monitoring for those systems separately.

Examples include:

• REST APIs

• Application servers

• Databases

• Logs

• Operating systems

• Containers

• Cloud infrastructure

This allows backend telemetry to be correlated with Vue.js user activity.

11. Validate Real User Monitoring

After deployment:

1. Open the Vue.js application.

2. Navigate through several pages or views.

3. Perform representative interactions.

4. Execute a representative workflow.

In GermainUX, verify that the expected data appears.

Depending on configuration, this can include:

• User session

• Navigation

• User interactions

• Performance

• Network requests

• JavaScript errors

12. Validate Session Replay

When Session Replay is enabled:

1. Open the application.

2. Perform representative actions.

3. End the test session.

4. Locate the session in GermainUX.

5. Open Session Replay.

6. Verify that expected activity can be replayed.

Before production rollout, verify that sensitive information is appropriately masked or excluded.

13. Validate the Deployment

Confirm:

• RUM JS loads successfully.

• The correct application is assigned.

• The correct environment is assigned.

• Sessions reach GermainUX.

• Navigation is captured.

• User interactions are captured.

• Performance data is captured.

• Network activity is captured as configured.

• JavaScript errors are detected.

• Session Replay works when enabled.

• Sensitive information is protected.

• JS Profiler works when deployed.

• Synthetic monitoring works when configured.

Once deployment has been validated, continue with Configure Monitoring for Vue.js.

ℹ️ Get More Information

GermainUX can help determine which monitoring, analytics and automation capabilities are appropriate for your Vue environment.

Contact GermainUX Support.