react-activity-tracker/src/utils/trackUserInteractions.js

A library to track user interactions and API activity in React apps

// src/utils/trackUserInteractions.js
export function initUserInteractionTracking(onTrack) {
  document.addEventListener('click', (e) => {
    const target = e.target;
    onTrack({
      type: 'click',
      element: target.tagName,
      id: target.id,
      className: target.className,
      label: extractLabel(target),
      time: new Date().toISOString(),
    });
  });

  document.addEventListener('input', (e) => {
    const target = e.target;
    onTrack({
      type: 'input',
      element: target.tagName,
      id: target.id,
      name: target.name,
      value: target.value,
      label: extractLabel(target),
      time: new Date().toISOString(),
    });
  });
}

function extractLabel(el) {
  return (
    el.name ||
    el.id ||
    (el.innerText && el.innerText.trim().substring(0, 50)) || // fall back to visible text
    el.placeholder ||
    el.className ||
    ''
  );
}