@codeankitanime/eventlogger NPM

event-logger

A lightweight front-end event tracking utility with system and location metadata.

Features

Tracks: click, scroll, input, keydown, mousemove, focus, blur
Collects metadata: OS, browser, device type, geolocation (if permitted)
Optionally adds geolocation (HTML5) and IP-based location (via backend)

Installation

npm install event-logger

Tech Stack

MongoDB: Document-oriented NoSQL database for storing user interaction data.
Express: Web application framework for Node.js, designed for building APIs and handling requests.
React: Front-end library for building user interfaces, used to create interactive components for capturing events.
Node.js: JavaScript runtime for executing server-side code.

Usage

The Front End Logger captures various user events such as clicks, scrolls, and navigation.
Simply integrate the logger component into your React application and configure it according to your needs.
You can view the captured events from the MongoDB database or create a dashboard to visualize the data.

import { initEventLogger } from 'event-logger';

initEventLogger({
  events: ['click', 'input'],
  flushInterval: 5000,
  onFlush: (data) => {
    console.log(data); // contains meta and events
  }
});

Note

-For full IP/location info, use a backend API and append the result to the meta field. Backend Example (/api/get-meta-info)

// Express backend route
app.get('/api/get-ip-info', (req, res) => {
  const ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
  const geo = geoip.lookup(ip);

  res.json({
    ip,
    location: geo
      ? `${geo.city || 'Unknown'}, ${geo.region || ''}, ${geo.country || ''}`
      : 'Unknown'
  });
});

Than Intigration

import { initEventLogger } from 'event-logger';

async function setupLogger() {
  const res = await fetch('/api/get-meta-info');
  const backendMeta = await res.json();

  initEventLogger({
    events: ['click', 'input', 'scroll'],
    flushInterval: 5000,
    onFlush: (data) => {
      const fullMeta = {
        ...data.meta,
        ...backendMeta
      };

      const payload = {
        meta: fullMeta,
        events: data.events
      };

      console.log('Flushed Payload:', payload);

      // Optional: send to your logging service
      // fetch('/api/log', {
      //   method: 'POST',
      //   headers: { 'Content-Type': 'application/json' },
      //   body: JSON.stringify(payload)
      // });
    }
  });
}

setupLogger();