DEV Community

Cover image for Fanos: The Ultimate Beacon API Wrapper for Reliable Data Transmission
A.S Nasseri
A.S Nasseri

Posted on

Fanos: The Ultimate Beacon API Wrapper for Reliable Data Transmission

Sending data asynchronously in web applications can be tricky, especially when you need reliability without blocking the main thread. Meet Fanos, a lightweight JavaScript library that simplifies sending asynchronous requests using the Beacon API with a fallback to Fetch for maximum reliability.

Whether you're building analytics, logging systems, or tracking user interactions, Fanos ensures your data is transmitted efficiently and reliably, even in challenging network conditions.

  • Non-blocking requests: Uses the Beacon API for asynchronous data transmission.
  • Automatic retries: Stores failed requests and retries them automatically.
  • Fetch fallback: Falls back to the Fetch API if Beacon isn’t supported.
  • Multiple payload formats: Supports JSON, FormData, Blobs, and more.
  • Debug mode: Logs internal operations for easy troubleshooting.

Install

Install Fanos via npm:

npm install fanos
Enter fullscreen mode Exit fullscreen mode

Or include it directly in your HTML:

<script src="https://cdn.jsdelivr.net/npm/fanos@latest/dist/fanos.umd.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

Basic Usage

Here’s how to get started in just a few lines of code:

import Fanos from 'fanos';

// Configure the global instance
Fanos.configure({
    url: 'https://example.com/api/log', // Your endpoint
    debug: true, // Enable debug logging
});

// Send a simple payload
Fanos.send({ event: 'click', timestamp: Date.now() })
    .then(() => console.log('Data sent successfully!'))
    .catch(err => console.error('Failed to send data:', err));
Enter fullscreen mode Exit fullscreen mode

Browser Support

Fanos works in all modern browsers:

  • Chrome
  • Firefox
  • Safari
  • Edge

For older browsers, enable the Fetch fallback:

Fanos.configure({ fallbackToFetch: true });
Enter fullscreen mode Exit fullscreen mode

Get Started Today!

Ready to simplify your data transmission? Check out the Fanos GitHub repository for more details, examples, and documentation.Give it a START or contribute if you like it.

Top comments (0)