Custom timings

In Real User Monitoring you can track custom performance measurements across your website or application using custom timings. For example, you might track the time it takes for a specific video to play, or for the search bar to load. Custom timings gives you the flexibility to track the timing on events that matter to your users, and your business.


Tracking custom timings

Enable

To enable Custom 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

To send Custom timings call trackEvent with an object of custom timings. You can choose up to 10 custom timing values to be tracked in Real User Monitoring.

note: Make sure to include every timing you want to track, as custom timings can only be sent once per page request.

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,
  }
});

Example

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

We record the time in milliseconds that it takes for each asynchronous component to load. Once all our promises have resolved, we then 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

To enable Custom timings, navigate to the Real User Monitoring Settings page. On this page you’ll find the Custom timings table. Use the toggles on the right-hand side of the table to enable or disable each of the timings you are sending.

tip: Click the settings cog on the right-hand side to give each custom timing a name, description and colour. This gives clarity to what each timing is measuring, and enable you to easily distinguish different timings.

Enable custom timing 1 in Real User Monitoring settings.


note: Custom timings don't currently work with virtual pages.