JavaScript Monitoring

Real-time Uptime, Performance and User Experience Monitoring and Insights of JavaScript Application by Germain UX. 

Features for JavaScript

Germain can monitor any JavaScript application. The main features of Germain's JavaScript Application monitoring include:

Real User Monitoring & Replay

Monitors Real User Experience to gather data from actual users of your JavaScript application. Monitors and records videos of user sessions, user actions, clicks, form submissions, page navigation and performance metrics to gain insights into real-world usage patterns and identify areas for improvement. Captures user behavior data to gain insights into how users interact with the application and identify areas for improvement. More details on User Session Monitoring & Session Replay .

Synthetic Transactions

Germain allows you to set up synthetic transactions to simulate user interactions or application-level actions within your JavaScript application. These synthetic transactions can be configured to monitor specific functionalities, user journeys, or critical workflows. By regularly executing these synthetic transactions, Germain can proactively monitor the uptime and performance of your JavaScript application and alert you in case of any issues or deviations from expected behavior.

Uptime and Performance of JavaScript Application

Cross-Browser Compatibility

Monitors the JavaScript application across different web browsers and versions to ensure consistent behavior and compatibility. Monitors any browser-specific errors or issues that may arise.

Errors and Exceptions

Monitors and track JavaScript errors and exceptions that occur during runtime. Identifies the type of errors, their frequency, and the affected parts of the code. This helps in troubleshooting and resolving issues quickly.

Network Requests

Monitors AJAX requests, HTTP requests, and WebSocket connections made by the JavaScript application. Tracks response times, status codes, and data transfer sizes. This helps identify performance issues and potential bottlenecks in network communication.

Performance

Monitors the performance of your JavaScript code to ensure optimal execution and responsiveness. Tracks metrics such as execution time, memory usage, and CPU utilization.

Resource Usage

Monitors the usage of browser resources, such as DOM elements, memory, and CPU, by the JavaScript application. Identifies memory leaks, excessive DOM manipulation, or high CPU usage that could impact performance and user experience.

Mobile Compatibility

If your JavaScript application targets mobile devices, monitors its performance and compatibility on various mobile platforms and screen sizes.

Third-Party Dependencies

Monitors the performance and reliability of third-party libraries and APIs used in your JavaScript application. Tracks their response times, error rates, and impact on overall application performance.

Basic Real-time Analysis of JavaScript Code

By default, Germain is configured to provide light analysis of JavaScript Code Execution via Germain UX RUM JS or Germain UX RUM Extension.

Example

Example of User Click Analysis that includes Light JS Execution or other Backend Transaction Analysis (real-time)

More details about the preconfigured KPIs.

Advanced Real-time Analysis of JavaScript Code

Advanced analysis of JavaScript Code Execution can be performed with Germain UX JS Profiler browser extension.

Benefits & Metrics

Real-time performance monitoring and analysis of JavaScript application, down to the line of JS code can be performed by Germain UX, 24x7, in real-time. 

Metrics provided:

• JavaScript method execution time

• JavaScript line (of code) execution time

• Stall duration

• Download duration

• Wait duration

• etc

That above feature can be used in conjunction with other Germain’s tracing features to automate end-to-end transaction analysis of User Click or other Transaction (browser>java script>network request>web request>application code>database sql,...levels and any integration layers). More details about .

Example

Line-by-line Time Breakdown (real-time)

Insights about Stall, Connection, Wait, Download ,etc

Deployment

Enable JavaScript Monitoring

Chrome Extension (No banner)

This option avoids the Debugging banner from appearing on the end-user’s browser while JavaScript Execution Time/profiling is being collected in the background. Have the End-Users launch Chrome with an additional flag

1. Go to Germain Workspace > Left Menu > Analytics > UX Monitoring Profiles

2. Select UX Monitoring Profile to update

3. Select JavaScript Profiling Monitoring in the Configuration Editor

4. Locate the shortcut file used to launch Chrome: search for the shortcut in the Start Menu, right-click the shortcut, choose "Open file location"

5. Edit the properties of the Chrome shortcut file: right click, properties

6. Add --silent-debugger-extension-api to the end of the target value, leaving a space between

7. Ensure that this modified shortcut is what is used when running Chrome to open the web page being monitored

Chrome Extension (Banner on end-user browser)

1. Go to Germain Workspace > Left Menu > Analytics > UX Monitoring Profiles

2. Select UX Monitoring Profile to update

3. Select JavaScript Profiling Monitoring in the Configuration Editor

As a security feature, Chrome will display a banner along the top of the browser window when a monitored page is open. It looks like the following:

If the user clicks either the Cancel or X buttons, the JS profiler details will cease to be collected until the page is opened in a new tab and the banner re-appears.

Custom Response Header

1. Go to Germain Workspace > Left Menu > Analytics > UX Monitoring Profiles

2. Select UX Monitoring Profile to update

3. Select JavaScript Profiling Monitoring in the Configuration Editor

4. Add Document-Policy: js-profiling response header to each page for which you want to collect JavaScript Time Execution / Profiling details

Disable JavaScript Monitoring

1. Go to Germain Workspace > Left Menu > Analytics > UX Monitoring Profiles

2. Select UX Monitoring Profile to update

3. Unselect JavaScript Profiling Monitoring in the Configuration Editor

Advanced Configuration

All the settings available on the settings.plugins.jsProfiling object are listed below. Please contact us If you need any help with this advanced configuration.

/** Minimum function/stack hits to end up in the result output. Default: 0. */
functionMinStackHits: number;
/** Maximum sample capacity for JavaScript Self-Profiling API only (in samples). Default: 1000. */
maxSampleBufferSize: number;
/** Maximum profiling duration (in seconds). Default: 30. */
maxProfileDuration: number;
/** Start profiler on first page ready event if true. Otherwise it will start from the next page load. Default: true. */
profileOnPageReady: boolean;
/** Target sample interval (in millis per sample). Default: 20. */
sampleIntervalMillis: Millis;
/** Check for JavaScript Self-Profiling API and before checking for JS Profiler extension. This avoids "Document policy violation: js-profiling is not allowed in this document." error message if API not allowed but we check for it. Default: false. */
useSelfProfilingAPI: boolean;
/** Run profiler for all except these usernames. Undefined or empty array means run for everyone. Default: undefined. */
excludedUsernames?: string[];
/** Run profiler only for these usernames. Undefined or empty array means run for everyone. Default: undefined. */
includedUsernames?: string[];

For more detailed information, please reach out to us. We will provide you with further guidance and assistance tailored to your needs.

Component: JS Profiler

Feature Availability: 2022.2 or later