Sending Metrics from your frontend application

This documentation provides steps for sending metrics from your frontend application to SigNoz.

SigNoz natively supports OpenTelemetry for collecting metrics, so you can lift-and-shift existing log libraries or build new pipelines, all with the same unified model as your traces and logs.

Metrics can be collected on the client side at meaningful points to capture various events and state changes.

Prerequisites

• SigNoz Cloud or self-hosted account
• A web application from where you want to send metrics

Setup

Step 1: Setup OTel Collector

Install the OpenTelemetry Collector binary using these instructions. The Collector acts as an agent that receives, processes, and exports telemetry data. It is required to collect data from your application, including metrics.

You would also need to update the collector config to whitelist the frontend domain. This is required to allow Cross-Origin Resource Sharing (CORS) requests from your frontend application to the OpenTelemetry collector.

receivers:
  otlp:
    protocols:
      grpc:
        endpoint: 0.0.0.0:4317
      http:
        endpoint: 0.0.0.0:4318
        cors:
          allowed_origins:
            - <<YOUR_FRONTEND_URL>>
          allowed_headers: ['*']

Step 2: Install dependencies

Install the following dependencies.

yarn add \
  @opentelemetry/resources \
  @opentelemetry/sdk-metrics \
  @opentelemetry/exporter-metrics-otlp-http \
  @opentelemetry/api

Step 3: Create an instrumentation file

The instrumentation file is required to setup the MeterProvider which is used to create custom metrics within your application and export them to your collector. Inside your src directory, create a file named instrument.js (or instrument.ts for TypeScript):

  import {
    MeterProvider,
    PeriodicExportingMetricReader,
  } from '@opentelemetry/sdk-metrics';
  import { OTLPMetricExporter } from '@opentelemetry/exporter-metrics-otlp-http';
  import { resourceFromAttributes } from '@opentelemetry/resources';
  import { metrics } from '@opentelemetry/api';

  // Define your resource, e.g., service name, environment.
  const resource = resourceFromAttributes({
    'service.name': <<SERVICE_NAME>>,
  });

  // Create a metric reader with OTLP exporter configured to send metrics to a local collector.
  const metricReader = new PeriodicExportingMetricReader({
    exporter: new OTLPMetricExporter({
      url: `https://ingest.<<INGESTION_REGION>>.signoz.cloud:443/v1/metrics`,
      headers: {
        'signoz-ingestion-key': <<INGESTION_KEY>>,
      },
    }),
    exportIntervalMillis: 10000, // Export metrics every 10 seconds.
  });

  // Initialize a MeterProvider with the above configurations.
  const myServiceMeterProvider = new MeterProvider({
    resource,
    readers: [metricReader],
  });

  // Set the initialized MeterProvider as global to enable metric collection across the app.
  metrics.setGlobalMeterProvider(myServiceMeterProvider);

Step 4: Importing the instrumentation file

Import the instrumentation file at the top level of your application. This ensures that the OpenTelemetry instrumentation is initialized before any other code runs, allowing it to capture metrics from the very beginning of your application's execution.

import './instrument';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Step 5: Setting up Metrics within your Application

Now you can create and record metrics in your application. Here's an example of how to create and use metrics.

import { metrics } from '@opentelemetry/api';

// Get a meter from the global meter provider
const meter = metrics.getMeter('my-app-metrics');

// Create a counter metric
const requestCounter = meter.createCounter('http_requests_total', {
  description: 'Total number of HTTP requests',
});

// Create a histogram metric for measuring request duration
const requestDuration = meter.createHistogram('http_request_duration_seconds', {
  description: 'Duration of HTTP requests in seconds',
});

// Record metrics in your application
function handleRequest() {
  const startTime = performance.now();
  
  // Increment the request counter
  requestCounter.add(1, { endpoint: '/api/data' });
  
  // Your application logic here
  // ...
  
  // Record the request duration
  const duration = (performance.now() - startTime) / 1000; // Convert to seconds
  requestDuration.record(duration, { endpoint: '/api/data' });
}

Step 6: Viewing Captured Metrics in SigNoz

The captured metrics can then be viewed in the Metrics Explorer.

Demo Application

Check out this Sample React Application that demonstrates sending metrics to SigNoz.