81 lines
2.7 KiB
JavaScript
81 lines
2.7 KiB
JavaScript
const { context, trace } = require("@opentelemetry/api");
|
|
const { ConsoleSpanExporter, SimpleSpanProcessor} = require("@opentelemetry/sdk-trace-base");
|
|
const { WebTracerProvider } = require("@opentelemetry/sdk-trace-web");
|
|
const { FetchInstrumentation } = require("@opentelemetry/instrumentation-fetch");
|
|
const { ZoneContextManager } = require("@opentelemetry/context-zone");
|
|
const { B3Propagator } = require("@opentelemetry/propagator-b3");
|
|
const { registerInstrumentations } = require("@opentelemetry/instrumentation");
|
|
const { OTLPTraceExporter: OTLPTraceExporterProto } = require("@opentelemetry/exporter-trace-otlp-proto");
|
|
|
|
const provider = new WebTracerProvider();
|
|
|
|
// Note: For production consider using the "BatchSpanProcessor" to reduce the number of requests
|
|
// to your exporter. Using the SimpleSpanProcessor here as it sends the spans immediately to the
|
|
// exporter without delay
|
|
provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
|
|
provider.addSpanProcessor(
|
|
new SimpleSpanProcessor(new OTLPTraceExporterProto())
|
|
);
|
|
|
|
provider.register({
|
|
contextManager: new ZoneContextManager(),
|
|
propagator: new B3Propagator(),
|
|
});
|
|
|
|
registerInstrumentations({
|
|
instrumentations: [
|
|
new FetchInstrumentation({
|
|
ignoreUrls: [/localhost:8090\/sockjs-node/],
|
|
propagateTraceHeaderCorsUrls: [
|
|
"https://cors-test.appspot.com/test",
|
|
"https://httpbin.org/get",
|
|
],
|
|
clearTimingResources: true,
|
|
}),
|
|
],
|
|
});
|
|
|
|
const webTracerWithZone = provider.getTracer("example-tracer-web");
|
|
|
|
const getData = (url) =>
|
|
fetch(url, {
|
|
method: "GET",
|
|
headers: {
|
|
Accept: "application/json",
|
|
"Content-Type": "application/json",
|
|
},
|
|
});
|
|
|
|
// example of keeping track of context between async operations
|
|
const prepareClickEvent = () => {
|
|
const url = "https://httpbin.org/get";
|
|
|
|
const element = document.getElementById("button1");
|
|
|
|
const onClick = () => {
|
|
const singleSpan = webTracerWithZone.startSpan("files-series-info");
|
|
context.with(trace.setSpan(context.active(), singleSpan), () => {
|
|
getData(url).then((_data) => {
|
|
trace
|
|
.getSpan(context.active())
|
|
.addEvent("fetching-single-span-completed");
|
|
singleSpan.end();
|
|
});
|
|
});
|
|
for (let i = 0, j = 5; i < j; i += 1) {
|
|
const span = webTracerWithZone.startSpan(`files-series-info-${i}`);
|
|
context.with(trace.setSpan(context.active(), span), () => {
|
|
getData(url).then((_data) => {
|
|
trace
|
|
.getSpan(context.active())
|
|
.addEvent(`fetching-span-${i}-completed`);
|
|
span.end();
|
|
});
|
|
});
|
|
}
|
|
};
|
|
element.addEventListener("click", onClick);
|
|
};
|
|
|
|
window.addEventListener("load", prepareClickEvent);
|