<!DOCTYPE html>
<html>
<head>
<title>Sample Application using WeblogNG Standalone logger</title>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://rawgit.com/weblogng/weblogng-client-javascript/master/release/logger.js"></script>
</head>
<body>
<h1>Sample Application using WeblogNG Logger</h1>
<p>Look at source or inspect the DOM to see how it works.</p>
<button type="button" id="measureOperationBtn-simple">Measure Operation - Simple</button>
<button type="button" id="measureOperationBtn-useTimerDirectly">Measure Operation - Use Timer Directly</button>
<button type="button" id="measureOperationBtn-executeWithTiming">Measure Operation - Execute With Timing</button>
<br/>
<p>
Last Status: <span id="statusMessage">None - Click a button above to measure an operation that simulates a small delay!</span>
</p>
<script type="text/javascript">
$(document).ready(function() {
console.log("document ready, creating logger");
window.logger = new weblogng.Logger("api.weblogng.com", "93c5a127-e2a4-42cc-9cc6-cf17fdac8a7f", {
application: 'Javascript Sample App'
, publishNavigationTimingMetrics: true
, publishUserActive: true
});
console.log("logger: " + logger.toString());
});
function generateRandomDelay() {
return (Math.random() * 50) + 75;
}
function updateStatusMessage(message) {
console.log(message);
$("#statusMessage").text(message);
}
/**
* Using recordStart and recordFinish is the simplest way to use the Logger.
*
* However, the Logger does not support concurrent tracking of a single metric name,
* so use one of the other approaches if the operation might be executed concurrently.
*/
$('#measureOperationBtn-simple').bind('click', function() {
console.log("start simple operation " + new Date());
logger.recordStart('operation-simple');
//simulate executing a function that will take some time
setTimeout(function() {
//now inside the completion callback for our successful 'operation'; record success!
logger.recordFinishAndSendMetric('operation-simple');
console.log("finish simple operation " + new Date());
updateStatusMessage("executed and measured operation-simple");
}, generateRandomDelay());
});
/**
* Use the Timer objects directly to time an operation and then send the metric
* data to the api using the Logger's sendMetric function.
*/
$('#measureOperationBtn-useTimerDirectly').bind('click', function() {
console.log("start use timer directly for operation " + new Date());
var timer = new weblogng.Timer();
timer.start();
//simulate executing a function or an async request that will take some time
setTimeout(function() {
//now inside the completion callback for our successful 'operation'; record success!
timer.finish();
logger.sendMetric('operation-useTimerDirectly', timer.getElapsedTime());
console.log("finish use timer directly for operation " + new Date());
updateStatusMessage("executed and measured operation-useTimerDirectly");
}, generateRandomDelay());
});
/**
* Use executeWithTiming when a function needs to be executed with instrumentation.
*/
$('#measureOperationBtn-executeWithTiming').bind('click', function() {
var function_to_exec = function() {
console.log("start function_to_exec " + new Date());
setTimeout(function() {
//now inside the completion callback for our successful 'operation'; record success!
console.log("finish function_to_exec " + new Date());
updateStatusMessage("executed and measured operation-executeWithTiming");
}, generateRandomDelay());
};
logger.executeWithTiming("operation-executeWithTiming", function_to_exec);
});
</script>
</body>
</html>
## WeblogNG Sample Application ##
The WeblogNG Sample Application supports the WeblogNG
[Javascript client developer documentation](http://weblog-ng-ui.herokuapp.com/app/#/dev-center/javascript).
The sample app demonstrates three ways to measure operations:
1. Using Logger's recordStart and recordFinish functions
2. Using Timer directly in conjunction with Logger#sendMetric
3. Using Logger#executeWithTiming