@elliemae/pui-user-monitoring

pui-user-monitoring

Browser Real Time User monitoring (BRUM) library

This library currently uses App Dynamics BRUM solution

Prerequisites for integration

App Key - Unique key which tracks your application on AppDynamics. Keys will be different in Appdynamics Dev vs Prod environment. Please work with Naveed Mohammed [e-mail] to get the keys for your application

Integration

Skip step 1 if your application is using pui-app-sdk node module. (check your applicaiton package.json)

1. npm install -save pui-user-monitoring

2. Add below script to head tag of your html file. This should be the first script execution in the html.

     window.emui = window.emui || {};
     window.emui.brumConfig = {
       appKey: '<key>'
     };
   </script>
   
   <script
     src="https://assets.ellieservices.com/pui-user-monitoring"
     type="module"
   ></script>```
   

• change key to the appKey provided for your application
• change version to the semantic version of the pui-user-monitoring library you installed in step 1. (if you are using pui-app-sdk, you can find the pui-user-monitoring library version inside the node_modules/@elliemae/pui-user-monitoring/package.json)

appKey, beaconUrlHttp, beaconUrlHttps values are different for AppDyanmics Development vs Production Environments. All pre-prod application deployments should report metrics to AppDynamics Development environment. Production application deployments should use AppDynamics production enviornment. Please make sure your deployment scripts are coded to update the values for appKey, beaconUrlHttp & beaconUrlHttps values during production application deployment.

Configuration (window.emui.brumConfig)

By default init() functions set some adrum settings which can be override easily.

{
  // app dynamics key
  appKey: <key>, //required
  // app dyanmics beacons listener url
  beaconUrlHttp: 'http://appdynamics-dev-eum.elliemae.com:80', //default
  // app dyanmics beacons listener url (https)
  beaconUrlHttp: 'https://appdynamics-dev-eum.elliemae.com:80', //default
  // Url where adrum.ext files are hosted
  adrumExtUrlHttp: '/public/js/vendor', //default
  // Url where adrum.ext files are hosted (https)
  adrumExtUrlHttps: '/public/js/vendor', //default
  // cross-domain session correlations
  xd: { enable: true } //default,
  // single page monitoring
  spa: { spa2: true }, //default
  // function that returns a custom user data as key value pair object
  customData: null //default
}

API

setCustomUserData() : Binds callback functions to send custom user specific data to track real time scenarios. It takes following parameters

pageViewCustomDataCB : Callback gets trigger for page

vPageViewCustomDataCB : Callback gets trigger for virtual pages

ajaxCustomDataCB : Callback gets trigger for ajax call

setXHRFilter() : It Filters XHR calls by URLs patterns. Note : To use XHR filters, you must assign XHR filters to xhr.include and xhr.exclude before you inject the adrum.js script It takes 'filterPattern' as parameter.

{
  include : {
      urls:
        [
          {
            pattern: ".*foo.*"
          },
          {
            pattern: ".*bar.*"
          }
        ],
      method: 'GET'
  },
  exclude : {
      urls:
        [
          {
            pattern: ".*user-profile.*"
          }
        ],
      method: 'POST'
  }
}

setVPageFilter() : It Excludes Virtual Pages from Being Monitored based on filter patterns. It takes 'filterPattern' as parameter.

exclude: {
  "urls": [
    {
      "pattern": "contact"
    },
    {
      "pattern": "api*"
    }]
  }
}

setCustomVPageName() : To Set Custom Virtual Page Names Note : To name virtual pages with the JavaScript Agent, you need to enable SPA2 monitoring.

setMaxResUrlSegmentNumber() : To Set the Maximum Number of Segments

setXHRPayloadParams() : To capture xhr payload parameters based on patterns It takes 'payloadParams' as parameter.

[
  {
    method: 'POST'
  },
  {
    urls: [
      {
        pattern: '.*/businessContacts'
      }
    ]
  }
]
```javascript

`setSPA2()` : It sets the spa2 settings.

_Note : By default setting is set to spa2._

`setCustomPageName()` : To Set Custom Page Names.
Takes 'userPageName' as parameter

`reportError()` : To Report Events with the JavaScript API.
It takes 'exception' object as parameter

```javascript
{
  message : 'Uncaught Exception',
  line : 10
}

disableFetchMonitoring() : To Disable Monitoring of Fetch API Calls.

reportWindowOnError() : To Handle the window.onerror Event.

Note: If any script on your monitored web pages, including library code, sets the JavaScript window.onerror event, add the following method to the page immediately after setting window.onerror

disableBrowserMonitoring() : To Disable Browser Monitoring Programmatically

enableBrowserMonitoring() : To Enable Browser Monitoring Programmatically

startVirtualPageWithCustomUrl() : Marking the beginning of the virtual page and waiting for the end to be manually marked. It takes 'myCustomVPName' as parameter

startVirtualPageNotWaitingForMarkVirtualPageEnd() : Marking the beginning of the virtual page and allowing the JS Agent to mark the end of the virtual page. It takes 'myCustomVPName' as parameter

endVirtualPage() : Manually marking the end of the virtual page.

filterURLQueryString() : To Hide All or Parts of the URL Query String. It takes 'filterURLQuery' as parameter. filterURLQuery can be false(by default), true or array of keys.

isScriptLoaded() : checks for agent script injection and returns 'window.Adrum' object for easy client side implementation.

getErrorHandle() : To get error event handle to set required error log properties.

getAjaxHandle() : To get ajax event handle to set required ajax log properties. User need to set tracking ajax url handles comes with four function which can be call in different stages of the ajax call.

url()

markSendTime(), markFirstByteTime(), markRespAvailTime(), markRespProcTime()

getVPageViewHandle() : To get virtual page view event handle to set required ajax log properties.

reportAjax() : To Report a custom Ajax event passing properties It takes 'reportInfo' as parameter.

{
  url : 'http://abc.com/api',
  markSendTime : 100,
  markFirstByteTime : 200,
  markRespAvailTime : 300,
  markRespProcTime : 400
}

setVPFilter() : Excludes Ajax from VPageView using ADRUM configuration It takes 'filterPattern' as parameter.

{
  include : {
      urls:
        [
          {
            pattern: ".*foo.*"
          },
          {
            pattern: ".*bar.*"
          }
        ],
      method: 'GET'
  },
  exclude : {
      urls:
        [
          {
            pattern: ".*user-profile.*"
          }
        ],
      method: 'POST'
  }
}

report() : To Report a custom Ajax/Error/VPageView event passing properties

captureApiPostParameters() : To Set Ajax Request Names Based on Captured POST Parameters It takes two parameters

url : url to track statistics.

getFromBodyCB : Callback function to capture post parameters.