novatecconsulting / boomerang-opentelemetry-plugin Goto Github PK
View Code? Open in Web Editor NEWBoomerang Plugin for collecting spans and exporting them to an OpenTelemetry Collector
License: Apache License 2.0
Boomerang Plugin for collecting spans and exporting them to an OpenTelemetry Collector
License: Apache License 2.0
The browser identification attributes will be added to the resource spans when traces are created. These attributes include platform, brands, mobile, language if the browser supports the userAgentData api, otherwise it will contain only the user_agent informations
Currently, the B3 context propagation uses single header injection to inject the tracing header into the XHR requests. It should be possible to use multi header injection, to be able to use the propergation in case the following system cannot handle single B3 headers.
Here are no information how to build the JS or where to download the Release.
Regards, Sascha
Hi,
Can you add license to your repo so we will be able to use it (fork, redistribute ... ) ?
Thanks
Update to newer version of Opentelemetry-js package. (For now it is 0.14)
Opentelemetry-js has reached GA with Version 1.0.0
v 1.0.0
This Plugin should updated to this Version.
The "OpenTelemetry UserInteraction Plugin for web" will add spans, for every User interaction on the observed.
See : OpenTelemetry UserInteraction Plugin
This plugin supports connecting the server side spans for the initial HTML load with the client side span for the load from the browser's timing API. This works by having the server send its parent trace context (trace ID, span ID and trace sampling decision) to the client.
Because the browser does not send a trace context header for the initial page navigation, the server needs to fake a trace context header in a middleware and then send that trace context header back to the client as a meta tag traceparent . The traceparent meta tag should be in the trace context W3C draft format . For example:
...
<head>
<!--
https://www.w3.org/TR/trace-context/
Set the `traceparent` in the server's HTML template code. It should be
dynamically generated server side to have the server's request trace Id,
a parent span Id that was set on the server's request span, and the trace
flags to indicate the server's sampling decision
(01 = sampled, 00 = notsampled).
'{version}-{traceId}-{spanId}-{sampleDecision}'
-->
<meta name="traceparent" content="00-ab42124a3c573678d4d8b21ba52df3bf-d21f7bc17caa5aba-01">
</head>
<body>
...
<script>
// and then initialise the WebTracer
// var webTracer = new WebTracer({ .......
</script>
</body>
When using Prototype below version 1.7, Prototype adds a toJSON
function to the Array
class. This leads to the problem, that the OpenTelemetry trace exporter sends the recorded spans and traces using an invalid/broken format.
In this ticket, the ability to add a set of common tag spans should be implemented. This set of tags should be added to all tags which are recorded.
I'm using Boomerang otel plugin in my front-end and boomerang otel in my backend. Each network call is getting traced and visible in jaeger-ui but propagation is not happening. Service name is same in both sides.
Below is my Boomerang OTEL plugin configuration.
BOOMR.init({
beacon_url: 'http://localhost:8997/beacon',
ResourceTiming: {
enabled: true,
clearOnBeacon: true
},
AutoXHR: {
alwaysSendXhr: true
},
instrument_xhr: true,
History: {
enabled: true
},
OpenTelemetry: {
samplingRate: 1.0,
corsUrls: '',
collectorConfiguration: {
url: 'http://localhost:4318/v1/traces',
method:'POST',
headers: {},
concurrencyLimit: 10,
},
plugins_config: {
instrument_fetch: {
enabled: true,
clearTimingResources: false,
path: "",
applyCustomAttributesOnSpan: null, //A method with the following structure: (span: Span, request: Request) => { },
ignoreUrls: [],
propagateTraceHeaderCorsUrls: ['']
},
instrument_xhr: {
enabled: true,
path: "",
applyCustomAttributesOnSpan: null, //A method with the following structure: (span: Span, xhr: XMLHttpRequest) => { },
propagateTraceHeaderCorsUrls: ['*'],
ignoreUrls: [],
clearTimingResources: false,
},
instrument_document_load: {
enabled: true,
path: "",
},
instrument_user_interaction: {
enabled: true,
path: "",
}
},
commonAttributes: {
"application": "UI",
"stage": "dev"
},
serviceName: "UI_BO_TEST",
propagationHeader: "TRACE_CONTEXT"
},
});
});
Instead of exporting each span separately, multiple spans can be combined and exported in a single batch using the BatchSpanProcessor
.
const provider = new WebTracerProvider();
const exporter = new CollectorTraceExporter(collectorOptions);
provider.addSpanProcessor(new BatchSpanProcessor(exporter, {
// The maximum queue size. After the size is reached spans are dropped.
maxQueueSize: 100,
// The maximum batch size of every export. It must be smaller or equal to maxQueueSize.
maxExportBatchSize: 10,
// The interval between two consecutive exports
scheduledDelayMillis: 500,
// How long the export can run before it is cancelled
exportTimeoutMillis: 30000,
}));
Include the OpenTelemetry Long Task Instrumentation for web Plugin. It could help with Enterprise-WebApps, with many long running task in the WebUI.
Regards, Sascha
When using the IE11 browser and Prototypejs, the plugin does not work. This is caused by the OpenTelemetry framework due to a polyfill of core-js which is used in OpenTelemetry and the fact, that Prototypejs adds a entries
attribute to the array class.
In that case, core-js fails to load its define-iterator module.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.