lightstep-tracer
Version:
> ❗ **This instrumentation is no longer recommended**. Please review [documentation on setting up and configuring the OpenTelemetry Node.js Launcher](https://github.com/lightstep/otel-launcher-node) or [OpenTelemetry JS (Browser)](https://github.com/open-
149 lines (133 loc) • 5.46 kB
HTML
<html>
<head>
<title>LightStep - Simple Browser Example</title>
<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
<style>
body, button, input, textarea {
font-family: 'Inconsolata';
}
input, button {
margin : 2px 0;
font-size : 11pt;
}
.main {
max-width : 720px;
margin : 32px auto;
}
textarea {
width : 100%;
min-height : 40em;
margin : 12px 0;
padding : 4px 8px;
font-size : 11pt;
}
</style>
</head>
<body>
<div class="main">
<h1>LightStep: Simple Browser Example</h1>
<p>
In this trivial example, a request is made to an endpoint being served from
an Express.js app. The request is traced and sent to LightStep.
</p>
<button id="span-button">Make Request</button>
<h3>Results</h3>
<div id="trace-link-div" style="opacity : 0">
<a id="trace-link" href="" target="_blank">Link to trace on LightStep</a>
</div>
<textarea id='results'></textarea>
</div>
<!--
Include the standard OpenTracing APIs and the LightStep bindings.
-->
<script type="text/javascript" src="opentracing-browser.min.js"></script>
<script type="text/javascript" src="lightstep-tracer.js"></script>
<!--
Add a quick example script using OpenTracing and LightStep
-->
<script type="text/javascript">
<!--
// Initialize the OpenTracing APIs to use the LightStep bindings
//
// NOTE: the access token will need to be replaced with your project's access
// token. The component_name can be an identifier you wish to use to
// identify the service or process.
//
opentracing.initGlobalTracer(new lightstep.Tracer({
access_token : '{your_access_token}',
component_name : 'lightstep-tracer/examples/browser',
xhr_instrumentation : true,
}));
//
// Add a button to send the request to to the express server
//
var button = document.getElementById('span-button');
var results = document.getElementById('results');
var linkDiv = document.getElementById('trace-link-div');
var link = document.getElementById('trace-link');
button.onclick = function() {
makeRequestToTestEndpoint();
};
function makeRequestToTestEndpoint() {
// Start the outer operation span
var span = opentracing.globalTracer().startSpan('makeRequestToTestEndpoint');
span.log({ event : 'request_started' });
hitEndpoint(span, function(err, json) {
span.log({ event : 'request_finished', response_body : json });
span.finish();
results.value = JSON.stringify(json);
});
}
function hitEndpoint(parentSpan, callback) {
httpGet(parentSpan, 'test_endpoint', function (err, json) {
if (err) {
callback(err);
}
callback(null, json);
});
}
function httpGet(parentSpan, urlString, callback) {
// Create a span representing the https request
var span = opentracing.globalTracer().startSpan('https.get', { childOf : parentSpan });
span.setTag('url', urlString);
var xhr = new XMLHttpRequest();
xhr.open('GET', urlString);
xhr.send(null);
xhr.onreadystatechange = function () {
var DONE = 4; // readyState 4 means the request is done.
var OK = 200; // status 200 is a successful return.
// The request is done. Log the results and finish the span!
if (xhr.readyState === DONE) {
var parsedJSON, err;
if (xhr.status === OK) {
var bodyBuffer = xhr.responseText;
span.log({
event : 'response_end',
body : bodyBuffer,
length : bodyBuffer.length,
});
try {
parsedJSON = JSON.parse(bodyBuffer);
} catch (exception) {
span.setTag('error', true);
span.log({
event : 'error',
'error.object' : exception,
buffer : bodyBuffer,
});
}
} else {
// An error occurred during the request.
err = 'Error: ' + xhr.status;
}
// Finish the span representing the request
span.finish();
callback(err, parsedJSON);
}
};
}
-->
</script>
</body>
</html>