Deploy Monitoring for Angular | Germain Documentation

🚀 Deploy Monitoring for Angular

📃 Overview

Deploy GermainUX RUM JS in an Angular or AngularJS application to monitor:

Feature
Real users and sessions
Single-page application routes
User actions and navigation
Page and interaction performance
JavaScript and browser errors
Network requests
Business processes
User feedback
Heatmaps
Session Replay

For customer-controlled Angular applications, RUM JS is the recommended deployment method. Use the GermainUX RUM Browser Extension when the application’s top-level document cannot be modified.

📑 Prerequisites

Before deployment:

Identify the applications and environments to monitor.
Confirm that browsers can reach the GermainUX services through HTTPS.
Define the application name and URL patterns.
Review the application’s Content Security Policy.
Define privacy, masking, sampling, and retention requirements.
Identify test, synthetic, and administrative traffic that should be excluded.
Test the deployment in a nonproduction environment.

⚙️ Create the Angular Monitoring Profile

Go to Workspace -> Left Menu → Settings -> Wizards.

Angular Wizard - GermainUX
Select Angular.
Enter the application name and URL.

Angular JS Parameters - Germain UX
Configure the environment and privacy settings.
Complete the wizard.
Select one of the available installation methods:

Method	Recommended use
npm or Yarn dependency	Applications that manage monitoring through their build process
Remote script tag	Applications that can load RUM JS from an approved hosted location
Local script tag	Applications that must host RUM JS with their own assets
JavaScript loader	Applications using the generated GermainUX initialization snippet
Browser extension	Applications whose top-level document cannot be modified

Use only one RUM deployment method in each browser context.

📦 Deploy with npm or Yarn

Open the Installation section generated by the Angular wizard.

Npm or Yarn Install - Germain UX
Copy the current npm or Yarn command.
Install the dependency in the Angular project.
Add the generated initialization code.
Ensure monitoring initializes only once.
Build and deploy the application.
Confirm that telemetry reaches GermainUX.

Use the package name, version, and initialization code provided by the wizard. Do not reuse installation details from an older GermainUX release.

🔗 Deploy with a Script Tag

Add the generated RUM JS loader to the main Angular document, normally src/index.html.

Place it in the document <head-> according to the wizard instructions so it can capture the initial application load and subsequent route activity.

HTML

<!doctype html->
<html lang="en"->
<head->
  <meta charset="utf-8"->
  <title->Application</title->

  <!-- Generated GermainUX RUM JS loader --->

  <base href="/"->
</head->
<body->
  <app-root-></app-root->
</body->
</html->

Use the exact loader generated for the application’s UX Monitoring Profile.

🌎 Remote hosting

Use the remote script option when the browser can load RUM JS from the approved GermainUX or customer-controlled HTTPS location.

📁 Local hosting

For local hosting:

Download the current RUM JS file.
Add it to the Angular application’s assets.
Ensure the build copies it to the deployed application.
Reference the local file from index.html.
Update the file when upgrading GermainUX.

Locally hosted files do not update automatically.

📜 Deploy with the JavaScript Loader

Use the JavaScript loader when inline initialization is appropriate.

Copy the complete loader generated by the wizard.
Add it to the top-level HTML document.
Replace only the values identified by the wizard.
Ensure the loader executes once.
Build and deploy the application.

If inline scripts are blocked, use an approved CSP nonce, hash, or external script. Do not weaken the application’s security policy globally.

🔒 Configure Content Security Policy

The application may need to permit:

Requirement
The GermainUX script source
HTTPS connections to GermainUX ingestion services
Other GermainUX endpoints explicitly required by the generated configuration

Use the narrowest approved hostnames. Do not enable broad wildcards or unsafe-eval solely for monitoring.

After deployment, check the browser console for CSP violations.

🧭 Configure Angular Route Monitoring

Angular commonly changes routes without reloading the top-level HTML document. Verify that GermainUX captures:

Route activity
Initial application load
Route transitions
Lazy-loaded routes
Redirects
Browser back and forward navigation
Authentication transitions
Error routes
Custom navigation

Normalize routes containing dynamic or sensitive values. For example:

/customer/12345
/customer/67890

should be grouped as:

/customer/:id

This prevents excessive cardinality and avoids collecting record identifiers.

If the application uses a custom navigation framework rather than Angular Router, custom events or transactions may be required.

👥 Configure User Identification

GermainUX can associate sessions with an application-provided identifier when one is available and approved.

Use a stable, pseudonymous identifier where possible. Additional context can include:

Context
Role
Department
Region
Customer segment
Application release
Feature variant

Do not collect passwords, authentication tokens, session cookies, or unnecessary personal information.

🛡️ Configure Privacy and Session Replay

Before enabling production monitoring:

Action
Mask passwords and sensitive form controls.
Exclude confidential page areas.
Remove authentication tokens from URLs and headers.
Exclude sensitive query parameters.
Normalize routes containing record identifiers.
Restrict access to Session Replay.
Configure recording and sampling rules.
Define the retention period.
Review custom event and transaction attributes.

Angular can replace page content dynamically. Test privacy rules after route changes, lazy loading, modal dialogs, and dynamic component rendering.

🖼️ Frames and Embedded Applications

RUM JS monitors only the browser context in which it runs.

For cross-origin iframes:

Consideration
The parent page cannot inspect protected child-frame content.
The child application requires its own approved monitoring deployment.
Privacy rules must be configured for each monitored application.
Duplicate initialization must be avoided.

Do not use eval() or other methods to bypass browser origin or application security boundaries.

🔌 Deploy the Browser Extension

Use the GermainUX RUM Browser Extension when the top-level Angular application cannot be modified.

Install the extension in a supported browser.
Enter the GermainUX environment URL.
Add the Angular application URL.
Configure the application and UX Monitoring Profile names.
Refresh the application.
Confirm that monitoring starts.

For production, deploy and configure the extension through the organization’s browser-management platform.

Do not monitor the same application simultaneously through RUM JS and the extension unless the configuration explicitly prevents duplicate collection.

🛠️ Optional JavaScript Profiling

Enable the GermainUX JS Profiler when deeper browser-side JavaScript analysis is required.

It can help identify:

Issue
Functions consuming significant execution time
Long-running JavaScript activity
Expensive call paths
Code associated with slow interactions
Release-specific regressions

Profiling depends on browser capabilities and application security policy. Measuring a specific Angular component may require custom transaction instrumentation.

🤖 Optional Synthetic Monitoring

Use the GermainUX RPA Bot Recorder and Engine to monitor critical Angular workflows proactively.

Record the user scenario.
Add stable validation points.
Use dedicated test credentials and data.
Assign the scenario to a GermainUX Engine.
Configure its schedule, timeout, and alerts.
Exclude bot sessions from real-user analysis where appropriate.

Synthetic scenarios can validate login, search, navigation, form submission, checkout, and other critical workflows.

🖥️ Optional Backend Monitoring

Angular runs in the browser. Its supporting APIs, logs, services, databases, and infrastructure must be monitored separately.

The GermainUX Engine can monitor accessible:

Backend
APIs and endpoints
Application logs
Integration services
Databases
Hosts and processes
Containers

End-to-end correlation requires shared request or transaction identifiers and synchronized timestamps.

✅ Validate the Deployment

After deployment:

Open the Angular application.
Confirm that RUM JS initializes once.
Navigate through several routes.
Use browser back and forward navigation.
Click controls and submit a test form.
Execute network requests.
Generate a controlled browser error where safe.
Confirm that the session appears in GermainUX.
Verify routes, actions, errors, and requests.
Open Session Replay, when enabled.
Confirm that sensitive content is masked.
Test supported browsers and production builds.
Verify lazy-loaded routes.
Confirm that test and synthetic traffic is categorized correctly.

Troubleshooting

🔍 No telemetry appears

Verify that:

Check
RUM JS is present in the deployed application.
Initialization completes successfully.
The URL matches the UX Monitoring Profile.
The browser can reach GermainUX.
CSP, proxy, and firewall rules permit communication.
Monitoring filters do not exclude the session.
The production build contains the monitoring configuration.

🔁 Initial load appears but routes do not

Check:

Area
Angular Router configuration
Route-monitoring settings
Redirects
Lazy-loaded modules
Custom navigation
Route normalization

Custom events may be required for navigation not exposed through standard Angular routing.

🔂 Duplicate sessions or events appear

Confirm that:

Check
RUM JS is loaded only once.
Only one deployment method is active.
Initialization does not repeat during route changes.
Micro-frontends do not initialize the same profile independently.
The browser extension is not duplicating RUM JS collection.

🎥 Session Replay is incomplete

Verify that:

Check
Session Replay is enabled.
The session meets the sampling rules.
Monitoring started before the affected interaction.
Privacy rules are not excluding the relevant content.
Cross-origin frames are monitored separately where permitted.

📋 Deployment and configuration

For your Angular environment
Review the Angular Application Observability Overview.
Deploy Monitoring for Angular.
Deploy GermainUX RUM JS for Real User Monitoring, Session Replay, route and user-action analysis, heatmaps, errors, and performance monitoring.
Configure business-process monitoring for workflows such as authentication, onboarding, search, form submission, order processing, approval, and checkout.
Configure user feedback and correlate it with sessions, Session Replay, errors, performance, and business-process activity.
Deploy the GermainUX JS Profiler to identify JavaScript functions and call paths responsible for slow Angular interactions.
Deploy the GermainUX Engine when supporting APIs, integrations, logs, databases, services, infrastructure, synthetic monitoring, reports, or automation are required.
Deploy the GermainUX RPA Bot Recorder to create synthetic login, navigation, search, form-submission, and other critical workflow scenarios.
Configure Angular KPIs, SLAs, dashboards, alerts, and scheduled reports.

Component requirements and feature availability depend on the Angular architecture, deployment method, browser security policies, supporting backend systems, and desired monitoring depth.

ℹ️ Get Help

The Germain Team can help you set this up. Contact GermainUX Support.

Component: Engine, JS Profiler, Mobile App, RPA Bot Recorder, RUM JS

Feature Availability: 2017.1 or later