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

typescript

import { Component, computed, DestroyRef, inject, input, output, signal } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { interval, map, takeWhile } from 'rxjs';

How a signal-driven countdown works in Angular

signals reactivity rxjs

Intermediate 8 steps

rust

use std::time::Duration;
 
#[derive(Debug, PartialEq)]
pub enum ParseDurationError {

Parsing duration strings safely in Rust

parsing error-handling checked-arithmetic

Intermediate 8 steps

typescript

type TokenType = "keyword" | "string" | "comment" | "number" | "text";
 
interface Token {
  type: TokenType;

How a regex tokenizer highlights code

tokenizer regex lexing

Intermediate 10 steps

javascript

const express = require('express');
const router = express.Router();
 
router.get('/articles/:slug', async (req, res, next) => {

Conditional GET caching in Express

http-caching conditional-get routing

Intermediate 8 steps

package handlers
 
import (
	"net/http"

Custom validators and binding in Gin

validation struct-tags error-handling

Intermediate 8 steps

typescript

import { Component, inject, signal } from '@angular/core';
import { CdkDragDrop, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
import { HttpClient } from '@angular/common/http';
import { finalize } from 'rxjs';