/
JavaScript Tracing Scratch

JavaScript Tracing Scratch

 

Configuration Options

 

This options can be specified within the first code lines of the JavaScript file.

 

Configuration NameDescriptionpossible ValuesDefault Values
startEUEturn JavaScript tracing completely off or on
  • true
  • false
true
storageTypedefines the storage which should be used for saving the result strings
  • "sessionStorage"
  • "localStorage"
sessionStorage
storageBufferSizedefines the threshold of the maximum buffer size of the storage.
If it reaches the given threshold, the result strings are sent to the server 
  • " X entries" ( e.g. "15 entries")
  • " X MB" ( maximum: 5 MB)
  • "X KB" ( maximum: 5120 KB)
?
storageBufferTimeTriggerdefines a specific time period which triggers the sending initiation
periodically 
  • "X sec"
  • "X min"
  • "off"
?
screenShotCapturingtakes an screenshot of the specific target element. (In fact, it repaints
the element out of CSS and DOM-information --> external library) 
  • true
  • false
 false
elementDOMInfoIteratingParentsSpecifies the number of parents which should be traversed of the target
element in order to identify it. The value "0" determines that this property
won't be traced 
  • integer
3
maxWaitingTimePerRequestSpecifies the maximum waiting time for an asynchronous request before
the monitoring data are sent. Background: Some requests never get a
response (e.g. because the page is not available or has been changed, etc.) 
  • "X sec"
  • "X min"
  • "off"
1 min ?
storagePrefixIn order to avoid name collisions in the specified storage as the application could
use session or local storage within its functionality, the prefix is set just before the
ID.
  • any string
"myeueStorage_"

 

 

Result Strings

 

 

NameCondition(s)Format Example
First Load Timings
  • very first result string to trace general information

  • This string is only traced once per session 

  • will be sent immediately (not stored into buffer)

  • geoInfo will only be traced if internet connection
    is available. If not, this property will be skipped 
{
    "timings": {
        "ttfb": 2696,
        "frontendProcessing": 652,
        "startTime": 1405072101648
    },
    "browser": "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, l ike Gecko) Chrome/35.0.1916.153 Safari/537.36",
    "geoInfo": {
        "city": "Stuttgart",
        "country": "Germany",
        "longitude": 9.1833,
        "latitude": 48.7667
    }
}
Ajax Request (with target)
  • User makes an interaction, e.g. button click
{
     "timings": {
            "startTime": 1405676325228,
            "duration": 8
			"processingTime": 20
        }
        "url": "/prime-showcase-1.0.0-SNAPSHOT/ui/ajaxifyKeyEvents.jsf",
        "requestType": "async",
        "elementInfo": {
            "eventType": "keyup",
            "domPath": "TR > > KeyUp:\t\tsf > INPUT class=\"ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all ui-state-focus\" > TD",
            "elementID": "form:firstname",
            "elementTagName": "INPUT",
			"imageBase64": "iVsdgrfsfd..."
        },
         
    }
Ajax Request (without target)
  • Ajax request which is triggered
    without a user request (e.g. polling mechanisms)
 {
        "timings": {
            "startTime": 1405676039599,
            "duration": 5
			"processingTime": 10
        },
        "url": "localhost:8080http://localhost:8080/eueResponse",
        "requestType": "async"
    }
Synchronous Request (Link, Form
unload-Event)
  • link must be available at the beginning of the page
  • no link was clicked. This is for tracing for example
    the Back-Button in the browser or dynamically
    generated links 
  • Form
 "requestType": "sync",
        "targetType": "link",  // or: "form", "unload"
        "elementInfo": {
            "eventType": "click",
            "domPath": "A >  > Events > A",
            "elementID": "",
            "elementTagName": "A"
        },
        "timings": {
            "startTime": 1405679928407,
            "ttfb": 72,
            "frontendProcessing": 315
        }
Errors
  • stacktrace is only available in Chrome
{
        "message": "Uncaught TypeError: Cannot read property 'noProperty' of undefined",
        "url": "http://localhost:8080/prime-showcase-1.0.0-SNAPSHOT/ui/ajaxifyKeyEvents.jsf",
        "linenumber": 124,
        "timings": {
            "timestamp": 1405689763452
        },
        "columnNumber": 22,
        "stacktrace": "TypeError: Cannot read property 'noProperty' of undefined\n    at errorFunction (http://localhost:8080/prime-showcase-1.0.0-
			SNAPSHOT/ui/pprCounter.jsf:124:22)"
    }

 

 

 

 

Example of a whole result String

Whole result String
{
    "1": {
        "timings": {
            "startTime": 1406886427575,
            "duration": 4,
            "processingTime": 1
        },
        "url": "http://localhost:8080/eueResponse",
        "requestType": "async"
    },
    "2": {
        "requestType": "sync",
        "targetType": "link",
        "elementInfo": {
            "eventType": "click",
            "domPath": "SPAN >  > Manager App > SPAN",
            "elementID": "",
            "elementTagName": "SPAN"
        },
        "timings": {
            "startTime": 1406886435362,
            "ttfb": 3396,
            "frontendProcessing": 56
        }
    },
    "3": {
        "requestType": "sync",
        "targetType": "link",
        "elementInfo": {
            "eventType": "click",
            "domPath": "A >  > /prime-showcase-1.0.0-SNAPSHOT > A",
            "elementID": "",
            "elementTagName": "A"
        },
        "timings": {
            "startTime": 1406886444551,
            "ttfb": 497,
            "frontendProcessing": 392
        }
    },
    "4": {
        "requestType": "sync",
        "targetType": "link",
        "elementInfo": {
            "eventType": "click",
            "domPath": "A >  > Events > A",
            "elementID": "",
            "elementTagName": "A"
        },
        "timings": {
            "startTime": 1406886449961,
            "ttfb": 65,
            "frontendProcessing": 309
        }
    },
    "5": {
        "timings": {
            "startTime": 1406886451402,
            "duration": 24,
            "processingTime": 4
        },
        "url": "/prime-showcase-1.0.0-SNAPSHOT/ui/ajaxifyKeyEvents.jsf",
        "requestType": "async"
    },
    "6": {
        "timings": {
            "startTime": 1406886451991,
            "duration": 16,
            "processingTime": 3
        },
        "url": "/prime-showcase-1.0.0-SNAPSHOT/ui/ajaxifyKeyEvents.jsf",
        "requestType": "async"
    },
    "7": {
        "timings": {
            "startTime": 1406886452468,
            "duration": 15,
            "processingTime": 2
        },
        "url": "/prime-showcase-1.0.0-SNAPSHOT/ui/ajaxifyKeyEvents.jsf",
        "requestType": "async"
    },
    "8": {
        "requestType": "sync",
        "targetType": "link",
        "elementInfo": {
            "eventType": "click",
            "domPath": "A >  > Selects > A",
            "elementID": "",
            "elementTagName": "A"
        },
        "timings": {
            "startTime": 1406886453255,
            "ttfb": 39,
            "frontendProcessing": 300
        }
    },
    "9": {
        "requestType": "sync",
        "targetType": "link",
        "elementInfo": {
            "eventType": "click",
            "domPath": "A >  > Events > A",
            "elementID": "",
            "elementTagName": "A"
        },
        "timings": {
            "startTime": 1406886455295,
            "ttfb": 14,
            "frontendProcessing": 296
        }
    },
    "10": {
        "timings": {
            "startTime": 1406886458169,
            "duration": 25,
            "processingTime": 4
        },
        "url": "/prime-showcase-1.0.0-SNAPSHOT/ui/ajaxifyKeyEvents.jsf",
        "requestType": "async"
    },
    "11": {
        "requestType": "sync",
        "targetType": "link",
        "elementInfo": {
            "eventType": "click",
            "domPath": "A >  > Selectors > A",
            "elementID": "",
            "elementTagName": "A"
        },
        "timings": {
            "startTime": 1406886458950,
            "ttfb": 45,
            "frontendProcessing": 272
        }
    },
    "12": {
        "timings": {
            "startTime": 1406886463323,
            "duration": 49,
            "processingTime": 45
        },
        "url": "/prime-showcase-1.0.0-SNAPSHOT/ui/selectors.jsf",
        "requestType": "async"
    }
}

 

 

 

 

 

 

 

 

Problems

  • timings are not accurate
  • JavaScript: "strict mode" in firefox prevents Function.caller to be executed