Skip to main content

Datadog Metrics

The Datadog Metrics hook allows you to easily send custom metrics to Datadog from your components. This is useful for tracking performance, user interactions, or any other custom events in your application.

Note: This is only available in client side render. For server side, you can just hit Datadog Agent on ECS Side. Please contact web-infra-eng for guidance if needed.​

Usage​

To track metrics using Datadog in your React components, you can use the useDatadogMetrics hook. Here's how to use it:

import React from 'react';
import { useDatadogMetrics } from '@traveloka/core/tracking';

function YourComponent() {
  const trackMetrics = useDatadogMetrics();

  const handleSomeAction = () => {
    trackMetrics([
      {
        name: 'business.product_name.visit.latency',
        points: 150, // milliseconds
        tags: { domain: 'bei', interface: 'mobile' },
      },
      {
        name: 'business.product_name.search.latency',
        points: [
          { value: 200 }, // uses current timestamp
          { value: 250, timestamp: Date.now() - 60000 }, // 1 minute ago
        ],
        tags: { domain: 'bei', interface: 'desktop', version: '2.0' },
      },
    ]);
  };

  return <button onClick={handleSomeAction}>Perform Action</button>;
}

Metric Names​

The supported metric names are defined in BEI repo

Note: To add more supported metric names, please raise PR to that repository.

Tags​

Tags help categorize and filter your metrics in Datadog. Some tags are automatically added by the hook, while others can be specified optionally.

Automatically Added Tags​

The following tags are automatically added by the useDatadogMetrics hook:

  • interface: The client interface type (e.g., 'mobile', 'desktop')
  • locale: The user's locale in the format language-country (lowercase)
  • country: The user's country

Optional Tags​

The type of tags is Record<string, any>, You can specify additional tags depending on your use case. Please make sure the value of the tags is defined in BEI Repository.

Usage Example​

Here's an example of how to use both automatic and optional tags:

trackMetrics([
  {
    name: 'business.product_name.search.latency',
    points: 150,
    tags: {
      domain: 'bei',
      version: 'v2',
      result: 'success',
    },
  },
]);

In this example, the domain, version, and result tags are specified manually, while interface, locale, and country will be added automatically by the hook.

Just like the metric names, if you need to add more values to the tags, please raise a PR to https://github.com/traveloka/bei-observability-platform/blob/main/beicddpx-springboot-application/src/main/resources/tags.json with the value that you want to add.

Points​

Points represent the value of the metric being tracked.

You can specify points in several ways:

  1. Single number: points: 150
  2. Single object: points: { value: 200, timestamp: Date.now() }
  3. Array of objects: points: [{ value: 200 }, { value: 250, timestamp: Date.now() - 60000 }]

If you don't specify a timestamp, the current timestamp will be used.

Debugging​

When developing locally, you can use browser developer tools to inspect the network requests made to the Datadog API. Look for POST requests to the /v1/metrics endpoint to verify that your metrics are being sent correctly.

Remember to test your metrics in a non-production environment before deploying to ensure they are captured and displayed correctly in your Datadog dashboard.

You can track the metrics sent to Datadog in this link by selecting the metric name that you have sent.