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

Prerequisites

Confirm before Angular deployment

Configure Angular Route Monitoring

Capture route changes accurately

Optional JavaScript Profiling

Deeper browser-side analysis

Deployment and configuration

Feature availability by version

​
Overview

Deploy GermainUX RUM JS in an Angular or AngularJS application to monitor:
  • 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:
1

Identify the applications and environments to monitor

2

Confirm that browsers can reach the GermainUX services through HTTPS

3

Define the application name and URL patterns

4

Review the application’s Content Security Policy

5

Define privacy, masking, sampling, and retention requirements

6

Identify test, synthetic, and administrative traffic that should be excluded

7

Test the deployment in a nonproduction environment

​
Create the Angular Monitoring Profile

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

    Angular Wizard - GermainUX

  2. Select Angular.
  3. Enter the application name and URL.

    Angular JS Parameters - GermainUX

  4. Configure the environment and privacy settings.
  5. Complete the wizard.
  6. Select one of the available installation methods:
Use only one RUM deployment method in each browser context.

​
Deploy with npm or Yarn

  1. Open the Installation section generated by the Angular wizard.

    Npm or Yarn Install - GermainUX

  2. Copy the current npm or Yarn command.
  3. Install the dependency in the Angular project.
  4. Add the generated initialization code.
  5. Ensure monitoring initializes only once.
  6. Build and deploy the application.
  7. 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.
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:
1

Download the current RUM JS file

2

Add it to the Angular application’s assets

3

Ensure the build copies it to the deployed application

4

Reference the local file from index.html

5

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.
1

Copy the complete loader generated by the wizard

2

Add it to the top-level HTML document

3

Replace only the values identified by the wizard

4

Ensure the loader executes once

5

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:
  • 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:
  • 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:
should be grouped as:
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:
  • 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:
  • 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:
  • 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.
1

Install the extension in a supported browser

2

Enter the GermainUX environment URL

3

Add the Angular application URL

4

Configure the application and UX Monitoring Profile names

5

Refresh the application

6

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:
  • 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.
1

Record the user scenario

2

Add stable validation points

3

Use dedicated test credentials and data

4

Assign the scenario to a GermainUX Engine

5

Configure its schedule, timeout, and alerts

6

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:
  • 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:
1

Open the Angular application

2

Confirm that RUM JS initializes once

3

Navigate through several routes

4

Use browser back and forward navigation

5

Click controls and submit a test form

6

Execute network requests

7

Generate a controlled browser error where safe

8

Confirm that the session appears in GermainUX

9

Verify routes, actions, errors, and requests

10

Open Session Replay, when enabled

11

Confirm that sensitive content is masked

12

Test supported browsers and production builds

13

Verify lazy-loaded routes

14

Confirm that test and synthetic traffic is categorized correctly

​
Troubleshooting

​
No telemetry appears

Verify that:
  • 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:
  • 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:
  • 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:
  • 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

  • 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

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.