Add interaction tracking

[marvinhagemeister]

It's essentially a more powerful performance.measure() alternative that captures additional details that's exclusive to extensions like CPU load.

Links:

• https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16
• Profiler plug-in for DevTools facebook/react-devtools#1069
• https://addyosmani.com/assets/images/4324242.jpg
• https://addyosmani.com/assets/images/interaction@2x.jpg
• https://user-images.githubusercontent.com/29597/43925307-c81d5b76-9bdb-11e8-9273-1d9229ac5815.png

[marvinhagemeister]

Turns out this is much more useful, because it can be used to track application performance in Preact and have that sent to a Graphana/Splunk instanace.

Quoting a thread on our slack channel:

the idea is to use this on each click handler

import {unstable_trace as trace} from 'scheduler/tracing'
trace('click', performance.now(), () => setCount(c => c + 1))

function reportProfile(
  id, // the "id" prop of the Profiler tree that has just committed
  phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
  actualDuration, // time spent rendering the committed update
  baseDuration, // estimated time to render the entire subtree without memoization
  startTime, // when React began rendering this update
  commitTime, // when React committed this update
  interactions, // the Set of interactions belonging to this update
) {
  queue.push({
    id,
    phase,
    actualDuration,
    baseDuration,
    startTime,
    commitTime,
    interactions,
  })
  // this is a fire and forget, so we don't return anything.
}

and then each 5 seconds send the request to save the data in Splunk
const queueToSend = [...queue]