This is an automated email from the ASF dual-hosted git repository. poorejc pushed a commit to branch test in repository https://gitbox.apache.org/repos/asf/incubator-flagon-useralejs.git
commit 2aabad8fb968ebdafedd63caad8bd3d36221efe7 Author: Alex Veerasammy <[email protected]> AuthorDate: Wed Jan 12 11:04:03 2022 -0500 populated index.js and README with OTel documentation --- example/custom-log-example/README.md | 70 ++++++++++++++++++++++++++++++++++++ example/custom-log-example/index.js | 58 ++++++++++++++++++++++++++++++ 2 files changed, 128 insertions(+) diff --git a/example/custom-log-example/README.md b/example/custom-log-example/README.md index e69de29..76a68e4 100644 --- a/example/custom-log-example/README.md +++ b/example/custom-log-example/README.md @@ -0,0 +1,70 @@ +## README + +First, OpenTelemetry can be installed as follows: + +``` +npm install --save @opentelemetry/instrumentation-user-interaction +``` + +Then, OpenTelemetry can be automatically instrumented using the following code from the <a href="https://github.com/open-telemetry/opentelemetry-js-contrib/tree/main/plugins/web/opentelemetry-instrumentation-user-interaction";>Open Telemetry GitHub Repository</a>: + +```JavaScript +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 +``` \ No newline at end of file diff --git a/example/custom-log-example/index.js b/example/custom-log-example/index.js index e69de29..d3c427c 100644 --- a/example/custom-log-example/index.js +++ b/example/custom-log-example/index.js @@ -0,0 +1,58 @@ +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 \ No newline at end of file
