Javascript

Features

Real-time performance monitoring and analysis of Javascript application, down to the line of JS code can be performed by Germain JS Profiler (Chrome Extension), 24x7, in real-time. 

Metrics provided: similar to what Google Chrome provides, including:

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

Javascript Execution Analysis

JS line-by-line Time Breakdown

Insights about Stall, Connection, Wait, Download ,etc

Overview of a User Click or other Backend Transaction Analysis

Deployment

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

Disabling Javascript Monitoring

1. Go to Analytics > UX Monitoring Profiles

2. Select UX Monitoring Profile to update

3. Unselect JavaScript Profiling Monitoring in the Configuration Editor

Advanced Configuration

The following configuration settings are available.

/** JavaScript Profiler settings (JavaScript Profiler browser extension must be installed for this feature) */
jsProfiling: {
    /** 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[];
}

Feature available in Germain v2022.2 or later