Real-time performance monitoring, analysis and profiling of JavaScript code by Germain UX. 

Feature

Light Real-time Analysis of Javascript

Any light/basic JS execution analysis can be performed with Germain UX RUM JS orGermain UX RUM Extension

Metrics and benefits

Example of Light JavaScript Execution Analysis

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

Detail Execution Flow for User Click

Detail Execution Flow for User Click

Advanced Real-time Analysis of Javascript

Any Advanced JS execution analysis can be performed with Germain UX JS Profiler

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 of Advanced JavaScript Execution Analysis

Line-by-line Time Breakdown (real-time)
JavaScript Waterfall Portlet

JavaScript Waterfall Portlet

Insights about Stall, Connection, Wait, Download ,etc
Transaction Breakdown

Transaction Breakdown

Deployment


Standard UX Only

Chrome Extension
(No banner)

Chrome Extension
(Banner on end-user browser)

Performance Profiling API

Benefits

User Experience Monitoring
User Session Replay

User Experience Monitoring
User Session Replay
JavaScript Execution Analysis/Profiling

User Experience Monitoring
User Session Replay
JavaScript Execution Analysis/Profiling

User Experience Monitoring
User Session Replay
JavaScript Execution Analysis/Profiling

Requires Germain Monitoring enabled

Yes

Yes

Yes

Yes

Requires Germain Chrome Extension
(Chrome extensions can be automatically deployed through Windows NT Group Policy or Mac Profile Manager)

No

Yes

Yes

No

Chrome to be run with banner silenced
(to run chrome.exe with --silent-debugger-extension-api)

No

Yes

No

No

Custom Response Header
(Document-Policy header)

No

No

No

Yes

End-User Experience
(of your Business Application e.g. siebel)

Impacted
(3-10% End-User response time)

Impacted
(3-10% End-User response time)

Impacted
(3-10% End-User response time)
(banner shows up on the end-user browser)

Impacted
(3-10% End-User response time)

Security

Standard

High
(other extensions that already have the 'debugger' permission, can use the debugger API without showing the banner)

Standard

Standard

Browser Support

Supported Browsers

Google Chrome 48+

Google Chrome 48+

Google Chrome 94+, Edge 94+, Opera 80+

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[];
TYPESCRIPT

Component: JS Profiler

Feature Availability: 2022.2 or later