Package Exports
- @opentelemetry/instrumentation-user-interaction
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@opentelemetry/instrumentation-user-interaction) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
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.
Installation
npm install --save @opentelemetry/instrumentation-user-interactionUsage
import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/tracing';
import { WebTracerProvider } from '@opentelemetry/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.