Security News
Supply Chain Attack Detected in Solana's web3.js Library
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
@opentelemetry/instrumentation-document-load
Advanced tools
OpenTelemetry instrumentation for document load operations in browser applications
@opentelemetry/instrumentation-document-load is an npm package that provides automatic instrumentation for document load events in web applications. It helps in capturing and reporting performance metrics related to the loading of web pages, which can be useful for monitoring and optimizing the performance of web applications.
Automatic Instrumentation of Document Load
This feature allows you to automatically instrument document load events. The code sample demonstrates how to set up the instrumentation using the `DocumentLoadInstrumentation` class and `registerInstrumentations` function.
const { DocumentLoadInstrumentation } = require('@opentelemetry/instrumentation-document-load');
const { registerInstrumentations } = require('@opentelemetry/instrumentation');
registerInstrumentations({
instrumentations: [
new DocumentLoadInstrumentation(),
],
});
Custom Span Attributes
This feature allows you to add custom attributes to the spans created during document load events. The code sample shows how to use the `applyCustomAttributesOnSpan` option to set a custom attribute on the span.
const { DocumentLoadInstrumentation } = require('@opentelemetry/instrumentation-document-load');
const { registerInstrumentations } = require('@opentelemetry/instrumentation');
const documentLoadInstrumentation = new DocumentLoadInstrumentation({
applyCustomAttributesOnSpan: (span) => {
span.setAttribute('custom_attribute', 'value');
},
});
registerInstrumentations({
instrumentations: [documentLoadInstrumentation],
});
The `web-vitals` package is a library for measuring essential web performance metrics. It provides a simple API to capture metrics like First Contentful Paint (FCP), Largest Contentful Paint (LCP), and Cumulative Layout Shift (CLS). Unlike @opentelemetry/instrumentation-document-load, which focuses on OpenTelemetry standards and spans, `web-vitals` is more focused on Google's Web Vitals metrics.
This module provides automatic instrumentation for document load for Web applications, which may be loaded using the @opentelemetry/sdk-trace-web
package.
If total installation size is not constrained, it is recommended to use the @opentelemetry/auto-instrumentations-web
bundle with @opentelemetry/sdk-trace-web
for the most seamless instrumentation experience.
Compatible with OpenTelemetry JS API and SDK 1.0+
.
npm install --save @opentelemetry/instrumentation-document-load
import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load';
import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { B3Propagator } from '@opentelemetry/propagator-b3';
import { CompositePropagator, W3CTraceContextPropagator } from '@opentelemetry/core';
const provider = new WebTracerProvider();
provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
provider.register({
propagator: new CompositePropagator({
propagators: [
new B3Propagator(),
new W3CTraceContextPropagator(),
],
}),
});
registerInstrumentations({
instrumentations: [
new DocumentLoadInstrumentation(),
new XMLHttpRequestInstrumentation({
ignoreUrls: [/localhost/],
propagateTraceHeaderCorsUrls: [
'http://localhost:8090',
],
}),
],
});
This instrumentation 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>
If it is needed to add custom attributes to the document load span,and/or document fetch span and/or resource fetch spans, respective functions to do so needs to be provided as a config to the DocumentLoad Instrumentation as shown below. The attributes will be added to the respective spans before the individual are spans are ended. If the function throws an error , no attributes will be added to the span and the rest of the process continues.
const addCustomAttributesToSpan = (span: Span) => {
span.setAttribute('<custom.attribute.key>','<custom-attribute-value>');
}
const addCustomAttributesToResourceFetchSpan = (span: Span, resource: PerformanceResourceTiming) => {
span.setAttribute('<custom.attribute.key>','<custom-attribute-value>');
span.setAttribute('resource.tcp.duration_ms', resource.connectEnd - resource.connectStart);
}
registerInstrumentations({
instrumentations: [
new DocumentLoadInstrumentation({
applyCustomAttributesOnSpan: {
documentLoad: addCustomAttributesToSpan,
resourceFetch: addCustomAttributesToResourceFetchSpan
}
})
]
})
See examples/tracer-web for a short example.
The document load instrumentation plugin has few options available to choose from. You can set the following:
Options | Type | Description |
---|---|---|
applyCustomAttributesOnSpan.documentLoad | DocumentLoadCustomAttributeFunction | Function for adding custom attributes to documentLoad spans. |
applyCustomAttributesOnSpan.documentFetch | DocumentLoadCustomAttributeFunction | Function for adding custom attributes to documentFetch spans. |
applyCustomAttributesOnSpan.resourceFetch | ResourceFetchCustomAttributeFunction | Function for adding custom attributes to resourceFetch spans |
ignoreNetworkEvents | boolean | Ignore adding network events as span events for document fetch and resource fetch spans. |
ignorePerformancePaintEvents | boolean | Ignore adding performance resource paint span events to document load spans. |
This package uses @opentelemetry/semantic-conventions
version 1.22+
, which implements Semantic Convention Version 1.7.0
Attributes collected:
Attribute | Short Description |
---|---|
http.url | Full HTTP request URL in the form scheme://host[:port]/path?query[#fragment] |
http.user_agent | Value of the HTTP User-Agent header sent by the client |
Apache 2.0 - See LICENSE for more information.
FAQs
OpenTelemetry instrumentation for document load operations in browser applications
The npm package @opentelemetry/instrumentation-document-load receives a total of 170,164 weekly downloads. As such, @opentelemetry/instrumentation-document-load popularity was classified as popular.
We found that @opentelemetry/instrumentation-document-load demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.