Batched Elm Event Logger in JS

MessageLogger.js

export default class MessageLogger {
  constructor() {
    this.eventQueue = [];
  }

  eventReceived(eventData) {
    this.eventQueue.push(eventData);
  }

  uploadMessages() {
    // use splice to ensure that we don't lose messages at the transition
    const messagesToSend = this.eventQueue.splice(0, this.eventQueue.length);
    if (messagesToSend.length == 0) {
      return new Promise(() => {});
    }

    const body = JSON.stringify({ events: messagesToSend });

    return fetch(`${yourServerURL}/logging`, {
      body: body,
      method: "POST"
    })
      .then(response => {
        if (!response.ok) {
          // if the messages didn't make it, put them back on the queue at the front to preserve order
          this.eventQueue.splice(0, 0, ...messagesToSend);
        }
      })
      .catch(() => {
        // if the messages didn't make it, put them back on the queue at the front to preserve order
        this.eventQueue.splice(0, 0, ...messagesToSend);
      });
  }

  startListening(ports, interval) {
    ports.logEvent.subscribe(eventData => {
      this.eventReceived(JSON.parse(eventData));
    });

    // send messages every 10 seconds
    setInterval(() => this.uploadMessages(), interval || 10000);

    // can't hurt to try
    window.addEventListener("beforeunload", event => {
      this.uploadMessages();
    });
  }
}