useRegionPing

1"use client";
2 
3import { useCallback, useEffect, useRef, useState } from "react";
4 
5export type RegionPingResult = number | null;
6 
7export type RegionPingStatus = "idle" | "measuring" | "done";
8 
9export interface UseRegionPingOptions {
10  /** Timed requests per region after the warmup; the best time wins. */
11  samples?: number;
12  /** Set false to defer measuring, then call refresh() when ready. */
13  enabled?: boolean;
14}
15 
16const DEFAULT_SAMPLES = 3;
17 
18/** One opaque round-trip to the endpoint; null when unreachable. */
19const timeRequest = async (url: string): Promise<RegionPingResult> => {
20  try {
21    const start = performance.now();
22 
23    await fetch(url, {
24      cache: "no-store",
25      method: "HEAD",
26      mode: "no-cors",
27    });
28 
29    return Math.round(performance.now() - start);
30  } catch {
31    return null;
32  }
33};
34 
35const measureRegion = async (
36  url: string,
37  samples: number
38): Promise<RegionPingResult> => {
39  // Warmup request pays DNS + TLS so samples measure the wire.
40  await timeRequest(url);
41 
42  let best: RegionPingResult = null;
43 
44  for (let index = 0; index < samples; index += 1) {
45    // Sequential on purpose: parallel samples contend for the socket.
46    // eslint-disable-next-line no-await-in-loop
47    const sample = await timeRequest(url);
48 
49    if (sample !== null && (best === null || sample < best)) {
50      best = sample;
51    }
52  }
53 
54  return best;
55};
56 
57/**
58 * Measures round-trip latency from the browser to each region
59 * endpoint. Endpoints must tolerate opaque no-cors HEAD requests
60 * (any reachable URL works; the response is never read).
61 */
62export const useRegionPing = (
63  urls: Record<string, string>,
64  { enabled = true, samples = DEFAULT_SAMPLES }: UseRegionPingOptions = {}
65) => {
66  const [pings, setPings] = useState<Record<string, RegionPingResult>>({});
67  const [status, setStatus] = useState<RegionPingStatus>("idle");
68  const urlsRef = useRef(urls);
69 
70  useEffect(() => {
71    urlsRef.current = urls;
72  }, [urls]);
73 
74  const refresh = useCallback(async () => {
75    setStatus("measuring");
76 
77    const entries = Object.entries(urlsRef.current);
78 
79    await Promise.all(
80      entries.map(async ([id, url]) => {
81        const ping = await measureRegion(url, samples);
82        setPings((current) => ({ ...current, [id]: ping }));
83      })
84    );
85 
86    setStatus("done");
87  }, [samples]);
88 
89  useEffect(() => {
90    if (!enabled) {
91      return;
92    }
93 
94    // Deferred a frame so the initial "measuring" state doesn't
95// … truncated