🙏 Best practice to track custom performances

[edoudou]

I want to track functions duration to determine if my web app is getting slower or faster I wanna monitor event in my app. More especially want to track performances during a drag and drop action. I would like to track the onDragStart duration, multiples onDrag duration, then the onDragStop.

Current state : Using the performance API and sending data as RUM Metrics Right now, I am tracking the data locally using performance API. My current code looks like this :

// ...
const onDragStart = () => {
  performance.mark('on-drag-start---start-mark');
  // ...
  performance.mark('on-drag-start---end-mark');
  performance.measure('on-drag-start', 'on-drag-start---start-mark', 'on-drag-start---end-mark');
}
// ...
const onDrag = () => {
  performance.mark('on-drag---start-mark');
  // ...
  performance.mark('on-drag---end-mark');
  performance.measure('on-drag', 'on-drag---start-mark', 'on-drag---end-mark');
}
// ...
const onDragStop = () => {
  performance.mark('on-drag-stop---start-mark');
  // ...
  performance.mark('on-drag-stop---end-mark');
  performance.measure('on-drag-stop', 'on-drag-stop---start-mark', 'on-drag-stop---end-mark');

  // TODO : Send to Datadog
}
// ...

Should I keep using the performance API ? If so how do I send the data to Datadog ? Should I use a built in Datadog feature ? If so which one ?

[clintharris]

I believe the way to track something like this from a browser is through the RUM client library (see docs). So maybe something like this, for example:

import { datadogRum } from '@datadog/browser-rum';

function onDragStop() {
    datadogRum.addAction('dragPerformance', { 'dragTimeMsec': 1234 })
}

[edoudou]

This solution seems to be what I am looking for.

One more question, I have trouble finding how to create a view to show my average weighted in the doc. Right now I get N performances informations for each onDrag event before my onDragEnd event. At the end of the user action, I calculate everything to make it faster to upload to datadog.

This looks like something like this.

const onDragPerformanceStats = getObjectArrayStats(onDragPerformances, 'duration');
  datadogRum.addAction('storyBuilder.dragging.onDrag', {
    count: onDragPerformances.length,
    avg: onDragPerformanceStats.avg,
    min: onDragPerformanceStats.min,
    max: onDragPerformanceStats.max,
    sum: onDragPerformanceStats.sum,
    ts: now,
});

I pre calculate the avg to prevent sending N action (N could be thousands).

Should I just send every action ? What Impact does it have on my performances ? Or is it just that I havn't found how to create a metrics that will get me an avg weighted by count ?

[Meemaw]

Sentry's tracing automatically tracks custom metrics emitted through performance API. I wish DataDog would do the same.