Monitor the performance of the user's browser and code for real users. Allows you to collect WebVitals metrics, performance and business metrics through the Prometheuse monitoring system.

• WebVitals - allows you to collect the main performance metrics of the WebVitals initiative,
• Custom Metrics - allows you to collect the custom performance metrics,
• Business Metrics - allows you to collect any business metrics and sales funnels,
• Network Metrics - allows you to evaluate the quality of the connection from clients to your servers,
• Leaks Detection - allows you to detect leaks in DOM elements, listeners, js and others.

npm:

npm install @mts-pjsc/bretrics

yarn

yarn add @mts-pjsc/bretrics

The package has a pre-configured monitoring mode that includes the necessary webvitals metrics.

import {bretrics} from "@mts-pjsc/bretrics";

bretrics
    .setup({apiPath: "/bretrics"}) // <-- microservice deploy location
    .useDefaultMonitoring()
    .sendMetrics({my_metric: 5}); // <-- custom metrics

If you need to send custom metric, you must use the sendMetrics method.

Prometheus labels can be set as default for all metrics, or individually for each value.

import {bretrics} from "@mts-pjsc/bretrics";

bretrics
    .setup({apiPath: "/bretrics"})
    .useDefaultMonitoring()
    .setLabels({stage: "beta", path: location.pathname})
    .sendMetrics({
        my_metric: {
            value: 5,
            labels: {path: "/blog"}
        }
    });

The default labels will be added to the metrics if you didn't pass them in the sendMetrics method.

The library exports the web monitoring constructor class, so you can inherit from it and implement logic according to OOP principles.

import {Bretrics} from "@mts-pjsc/bretrics";

export class BretricsService extends Bretrics {

    public override sendMetrics (metric: Record<string, number>): this {
        super.sendMetrics(metric);

        // ... your code here ...

        return this;
    }

}

WebMon is MIT licensed.