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 aa41a6cb7150394e7719b17bee880c635f98bdbf Author: Joshua Poore <[email protected]> AuthorDate: Fri Jan 14 09:32:05 2022 -0500 modified folder name, added in co-developed example --- example/custom-log-example/README.md | 70 ---------------------- example/custom-non-user-events-example/README.md | 39 ++++++++++++ .../index.js | 21 ++++++- 3 files changed, 57 insertions(+), 73 deletions(-) diff --git a/example/custom-log-example/README.md b/example/custom-log-example/README.md deleted file mode 100644 index 76a68e4..0000000 --- a/example/custom-log-example/README.md +++ /dev/null @@ -1,70 +0,0 @@ -## 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-non-user-events-example/README.md b/example/custom-non-user-events-example/README.md new file mode 100644 index 0000000..090afe0 --- /dev/null +++ b/example/custom-non-user-events-example/README.md @@ -0,0 +1,39 @@ +## Logging Non-User Events Examples + +First, OpenTelemetry can be installed as follows: + +```JavaScript + req.onreadystatechange = function () { + if (req.readyState == XMLHttpRequest.DONE) { + userale.log({ + clientTime: Date.now(), + type: 'XMLHttpRequest', + logType: 'custom', + userAction: 'false', + details: JSON.parse(req.response), + userId: userale.options().userId, + useraleVersion: userale.options().useraleVersion, + sessionID: userale.options().sessionID, + }); + } + } +``` + +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 + req.onreadystatechange = function () { + if (req.readyState == XMLHttpRequest.DONE) { + userale.log({ + clientTime: Date.now(), + type: 'XMLHttpRequest', + logType: 'custom', + userAction: 'false', + details: JSON.parse(req.response), + userId: userale.options().userId, + useraleVersion: userale.options().useraleVersion, + sessionID: userale.options().sessionID, + traceId: trace.getSpan(context.active())._spanContext.traceId + }); + } + } +``` \ No newline at end of file diff --git a/example/custom-log-example/index.js b/example/custom-non-user-events-example/index.js similarity index 72% rename from example/custom-log-example/index.js rename to example/custom-non-user-events-example/index.js index d3c427c..a46d0a3 100644 --- a/example/custom-log-example/index.js +++ b/example/custom-non-user-events-example/index.js @@ -42,8 +42,8 @@ btn2.addEventListener('click', () => { }); document.querySelector('body').append(btn2); -function getData(url) { - return new Promise(async (resolve) => { +function getData(url, resolve) { + return new Promise(async (resolve, reject) => { const req = new XMLHttpRequest(); req.open('GET', url, true); req.setRequestHeader('Content-Type', 'application/json'); @@ -52,7 +52,22 @@ function getData(url) { req.onload = function () { resolve(); }; + req.onreadystatechange = function () { + if (req.readyState == XMLHttpRequest.DONE) { + console.log(req.response); + userale.log({ + clientTime: Date.now(), + type: 'XMLHttpRequest', + logType: 'custom', + userAction: 'false', + details: JSON.parse(req.response), + userId: userale.options().userId, + useraleVersion: userale.options().useraleVersion, + sessionID: userale.options().sessionID, + traceId: trace.getSpan(context.active())._spanContext.traceId + }); + } + } }); } - // now click on buttons \ No newline at end of file
