Perf Ninja

Front-End performance monitoring tool

Installation and Usage

To install a SDK, simply add the package:

npm install --save perfninja
yarn add perfninja

If you want to measure you own custom metric:

import { init, mark, measure } from 'perfninja';

// Endpoint where data will be sent
init({
  endpoint: 'https://perfninja.com/log',
});

mark('pageTransitionStart');

setTimeout(() => {
  measure(
    '3699c7ca-b7bf-434f-bfdf-ec32c6ee3386', // Perf Ninja Chart Id 
    {
      markName: 'pageTransitionStart', 
    }
  )
}, 1000);

You can also measure from NavigationTiming API marks.

Simply call measure method without marking before. Just pass one of the NavigationTiming keys to the markName prop:

import { init, mark, measure } from 'perfninja';

init({
  endpoint: 'https://perfninja.com/log',
});

measure(
  '3699c7ca-b7bf-434f-bfdf-ec32c6ee3386', // Perf Ninja Chart Id
  {
    markName: 'requestStart',
  }
);

Usage from CDN

Embed following code before any of your site scripts:

!function(e,n){var r=function(){e[n].q.push(arguments[0],Array.prototype.slice.call(arguments,1))},i=["init","mark","measure"];e[n]={q:[]};for(var t=0;t<2;t++)e[n][i[t]]=r.bind({},i[t]);var a=e.document.createElement("script");a.src="https://cdn.jsdelivr.net/gh/perfninja/[email protected]/index.min.js",e.document.head&&e.document.head.appendChild(a)}(window,"perfninja");

Call methods in your site from perfninja global variable:

window.perfninja.init({
  endpoint: 'https://perfninja.com/log',
});

window.perfninja.measure(
  '3699c7ca-b7bf-434f-bfdf-ec32c6ee3386', // Perf Ninja Chart Id
  {
    markName: 'requestStart',
  }
);

Links

• Documentation