# 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

```bash
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.

```bash
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)**

```bash
// 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 
```bash 
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](https://github.com/ankitkicode)

## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.