Custom timings

Track custom performance measurements across your website using the Custom Timings.


Tracking custom timings

Enable

To enable customing timings first set the ‘pulseCustomLoadTimeEnabled’ flag to true in your Raygun4JS configuration options.

rg4js('options', {
  pulseCustomLoadTimeEnabled: true
  // Plus any other configuration options
});

Add custom timings

Up to 10 custom timing values can be tracked in Real User Monitoring. To send custom timings call ‘trackEvent’ with an object of custom timings.

note: Include every timing you want to track as custom timings can only be set once per page.

rg4js('trackEvent', {
  type: 'customTimings',
  timings: {
    custom1: 10,
    custom2: 20,
    custom3: 30,
    custom4: 40,
    custom5: 50,
    custom6: 60,
    custom7: 70,
    custom8: 80,
    custom9: 90,
    custom10: 10,
  }
});
Tips

  • All timing values are in milliseconds
  • Custom timings do not work with virtual pages
  • You can omit any custom timing you do not want to send


Example

Consider the following simplified scenario where we have multiple asynchronous events occurring in an application.

We can record the time in milliseconds that it takes for each asynchronous component to load, then when all of our promises have resolved, send the custom timing data to Real User Monitoring.

const d = new Date();
// Define up to 10 different custom timings
let customTiming1, customTiming2, customTiming3, customTiming4;
const startTime = d.getTime();
const component1 = new AsyncComponent('Header');
const component2 = new AsyncComponent('Sidebar');
const component3 = new AsyncComponent('Footer');

const promise1 = component1.load().then(() => {
  customTiming1 = d.getTime() - startTime;
});

const promise2 = component2.load().then(() => {
  customTiming2 = d.getTime() - startTime;
});

const promise3 = component3.load().then(() => {
  customTiming3 = d.getTime() - startTime;
});

Promise.all([promise1, promise2, promise3]).then(() => {
  customTiming4 = d.getTime() - startTime;

  rg4js('trackEvent', {
    type: 'customTimings',
    timings: {
      custom1: customTiming1,
      custom2: customTiming2,
      custom3: customTiming3,
      custom4: customTiming4
    }
  });
});

Configure custom timings

Enable custom timings in your Raygun Application by going to RUM settings and enabling the metrics you are sending.

Enable custom timing 1 in Real User Monitoring settings.

Give each timing a name, description and color to improve clarity on what they are used for in your Applilcation.

Configure custom timing 1.