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();

Author

Ankit - Your GitHub Profile

License

This project is licensed under the MIT License. See the LICENSE file for details.