@yotamloe/instrumentation-user-interaction
v0.0.1
Published
OpenTelemetry UserInteraction automatic instrumentation package.
Downloads
3
Maintainers
Readme
OpenTelemetry UserInteraction Instrumentation for web
This module provides auto instrumentation of user interaction for web. This module can work either with zone-js or without it. With zone-js and ZoneContextManager it will fully support the async operations. If you use Angular you already have the zone-js. It will be the same if you use @opentelemetry/context-zone. Without zone-js it will still work but with limited support.
Compatible with OpenTelemetry JS API and SDK 1.0+
.
Installation
npm install --save @opentelemetry/instrumentation-user-interaction
Usage
import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction';
import { ZoneContextManager } from '@opentelemetry/context-zone';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
// or if you already have zone.js
// import { ZoneContextManager } from '@opentelemetry/context-zone-peer-dep';
const provider = new WebTracerProvider({
contextManager: new ZoneContextManager()
});
provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
provider.register();
registerInstrumentations({
instrumentations: [
new UserInteractionInstrumentation(),
],
});
// and some test
const btn1 = document.createElement('button');
btn1.append(document.createTextNode('btn1'));
btn1.addEventListener('click', () => {
console.log('clicked');
});
document.querySelector('body').append(btn1);
const btn2 = document.createElement('button');
btn2.append(document.createTextNode('btn2'));
btn2.addEventListener('click', () => {
getData('https://httpbin.org/get').then(() => {
getData('https://httpbin.org/get').then(() => {
console.log('data downloaded 2');
});
getData('https://httpbin.org/get').then(() => {
console.log('data downloaded 3');
});
console.log('data downloaded 1');
});
});
document.querySelector('body').append(btn2);
function getData(url) {
return new Promise(async (resolve) => {
const req = new XMLHttpRequest();
req.open('GET', url, true);
req.setRequestHeader('Content-Type', 'application/json');
req.setRequestHeader('Accept', 'application/json');
req.send();
req.onload = function () {
resolve();
};
});
}
// now click on buttons
Example Screenshots
Useful links
- For more information on OpenTelemetry, visit: https://opentelemetry.io/
- For more about OpenTelemetry JavaScript: https://github.com/open-telemetry/opentelemetry-js
- For help or feedback on this project, join us in GitHub Discussions
License
Apache 2.0 - See LICENSE for more information.