Enhancing Client-side Monitoring in Skywalking

[PiyushSharma2812]

We have identified several areas where additional information can be collected and utilized to enhance the overall observability of applications. One such area involves incorporating session recording and DNS details fetching into the client-side JavaScript (client.js) codebase. Leveraging tools like rrweb for session recording, and exploring methods to fetch DNS details, we aim to provide richer insights into application behavior and performance. Below is the link of rrweb
https://github.com/rrweb-io/rrweb

I have seen it in Highlight.io so we thought its good to have if we implement in skywalking

[wu-sheng]

If you search for discussion, there was a browser related proposal too about another project

If someone commits to implement this in agent and backend side, we could discuss more details.

[PiyushSharma2812]

We are using a telemetry data collection framework, to gather and manage metrics within a Node.js environment that starts by importing the MeterProvider class from the '@opentelemetry/metrics' package and instantiates a MeterProvider object that facilitates the creation of meters, which are used to define and record various types of metrics.

Below is the code that we are using for this:
[Tuesday 17:34] Ajin Thankachan
const { MeterProvider } = require('@opentelemetry/metrics');

const meterProvider = new MeterProvider();

// Get the meter instance
const meter = meterProvider.getMeter('RUM-Metrics');

// Create a value recorder for load time
const loadTimeRecorder = meter.createValueRecorder('load_time', {
description: 'Current page load time',
});

//////////
const customCounter = meter.createCounter('custom_counter', {
description: 'A custom counter',
unit: '1',
});

// Record a value for the custom counter
customCounter.add(1);

// console.log(customCounter)
// Define custom gauge metric
const customGauge = meter.createValueObserver('custom_gauge', {
description: 'A custom gauge',
unit: '1',
}, (observerResult) => {
observerResult.observe(42);
});
//////////
// console.log(customGauge)
// console.log(loadTimeRecorder)
console.log(meter)
process.on('SIGINT', async () => {
console.log('Shutting down...');
await meterProvider.shutdown();
console.log('Meter provider stopped.');
process.exit(0);
});

How can we push the data through this in Skywlking version9.7.0 using OTLP

[wu-sheng]

How can we push the data through this in Skywlking version9.7.0 using OTLP

I am not an expert of OTLP node client. If you want to export data to us, we need the OTLP gRPC exporter, https://skywalking.apache.org/docs/main/latest/en/setup/backend/opentelemetry-receiver/.

I am not sure that client supports gRPC/Protobuf format directly, if not, you could choose OTLP collector to transfer the HTTP 1.x format to gRPC format. If it is supported by that node agent, you could simply point to OAP gRPC port(11800 by default)