typescript 50 lines · 8 steps

Batching analytics events in TypeScript

An EventBatcher buffers events in memory and flushes them to a server by size or on a timer, requeuing on failure.

Explained by highlit

Intermediate batching buffering async error-handling timers

1type Event = Record<string, unknown>;
2 
3interface BatcherOptions {
endpoint: string;
maxBatchSize?: number;
flushIntervalMs?: number;
7}
8 
9export class EventBatcher {
private queue: Event[] = [];
private timer: ReturnType<typeof setInterval> | null = null;
private readonly maxBatchSize: number;
13 
constructor(private readonly options: BatcherOptions) {
  this.maxBatchSize = options.maxBatchSize ?? 50;
  this.timer = setInterval(() => {
    void this.flush();
  }, options.flushIntervalMs ?? 5000);
}
20 
track(event: Event): void {
  this.queue.push({ ...event, ts: Date.now() });
  if (this.queue.length >= this.maxBatchSize) {
    void this.flush();
  }
}
27 
async flush(): Promise<void> {
  if (this.queue.length === 0) return;
30 
  const batch = this.queue.splice(0, this.queue.length);
  try {
    await fetch(this.options.endpoint, {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ events: batch }),
      keepalive: true,
    });
  } catch (err) {
    this.queue.unshift(...batch);
    console.error("event flush failed, requeued", err);
  }
}
44 
async close(): Promise<void> {
  if (this.timer) clearInterval(this.timer);
  this.timer = null;
  await this.flush();
}
50}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Batching trades a little latency for far fewer network round-trips.
2Flushing on both a size threshold and a timer bounds memory and delay at once.
3Requeuing a failed batch preserves data at the cost of possible duplicate delivery.

Related explainers

javascript

const logger = require('./logger');
 
class AppError extends Error {
  constructor(message, statusCode = 500, details = null) {

Centralized error handling in Express

error-handling middleware custom-errors

Intermediate 8 steps

typescript

import { Injectable } from '@angular/core';
import { PreloadingStrategy, Route, Routes, RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { Observable, of, timer } from 'rxjs';

A custom preloading strategy in Angular

lazy-loading preloading rxjs

Intermediate 7 steps

php

<?php
 
namespace App\Services;

Resilient HTTP retries with Laravel's client

http-client retry-logic error-handling

Intermediate 7 steps

rust

use std::fs::File;
use std::io::{self, BufWriter};
use std::path::Path;

Serializing config to JSON in Rust

serialization serde file-io

Intermediate 7 steps

typescript

import { Processor, WorkerHost, OnWorkerEvent } from '@nestjs/bullmq';
import { Logger } from '@nestjs/common';
import { Job } from 'bullmq';
import { MailerService } from '../mailer/mailer.service';

Processing background email jobs in NestJS

job-queue background-processing dependency-injection

Intermediate 7 steps

typescript

import { Component, computed, inject, signal } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { CommonModule } from '@angular/common';