README states what refused reports, one sender and nginx's 413 do (closes #145, closes #146, closes #147)

The README said the page keeps refused samples and sends them later.
They live only in the 100-round history, so at the 1-second interval
one refused or failed report loses the oldest 20 seconds of each host's
samples, and a pause longer than the history loses everything since the
last delivered report. Report limits now says one address at the
defaults can fill the 1 GiB cap in about 17 minutes with reports made to
compress badly, and which settings bound it. In the image, nginx's
default client_max_body_size of 1 MiB answers an over-limit body with
413 and an HTML page before the backend sees it; the backend's own 413
sentences now say they apply to it run on its own.

Model: opus-5-5

README.md

@@ -153,8 +153,24 @@ report a delta, so only new samples are sent; the mark advances only on a
 delivered report, and while paused nothing is sent. Changing the interval clears
 each host's history on the page; the samples in it not yet reported still go in
 the next report. Delivery failure is quiet — one debug-log line per outage,
-retried at the next interval, never blocking probing. The report-building step
-is a pure function of host state.
+never blocking probing. The report-building step is a pure function of host
+state.
+
+A sample not yet delivered is kept only as long as the history holds it, so
+after a refused or failed report the next report carries the samples the history
+still has. The history keeps each host's last 100 rounds: 100 seconds at the
+1-second interval, 200 seconds at 2 seconds, 5 minutes at the default of 3
+seconds and 100 minutes at 60 seconds. At 1 second, one refused or failed report
+loses the oldest 20 seconds of each host's samples, as the next delivered report
+comes 2 minutes after the last. At 2 seconds and longer one loses nothing;
+samples are lost from the third refused report in a row at 2 seconds, from the
+fifth at 3 seconds, and later still at the longer intervals.
+
+No report is sent while the page is paused, but each paused round still adds an
+entry to the history, so each report due during a pause counts as a refused one.
+A pause longer than the history spans loses every sample recorded between the
+last delivered report and the pause: a minute's worth for each host if the
+report before the pause was delivered.
 
 ### Backend
 
@@ -240,17 +256,19 @@ Files are created with `O_EXCL` to prevent overwrites.
 
 The reports of a failed write stay in memory, and the next flush, within a
 minute, tries again to write them. From the failed write until a write succeeds,
-`POST /api/v1/reports` refuses every report with 500 and keeps nothing of it, so
-the page keeps its samples and sends them again at its next report. Reports
-already answered 200 are lost only if the server stops before a write succeeds;
-the final flush at stop tries them too, and if it fails, the process exits
-non-zero.
+`POST /api/v1/reports` refuses every report with 500 and keeps nothing of it.
+The page sends the refused samples again in its next report, as long as its
+history still holds them: at the 1-second interval one refused report already
+loses some (see [Reporting](#reporting)). Reports already answered 200 are lost
+only if the server stops before a write succeeds; the final flush at stop tries
+them too, and if it fails, the process exits non-zero.
 
 #### Report limits
 
 `POST /api/v1/reports` takes reports from anyone who can reach it, without
 credentials, so it is bounded instead. Each refusal below answers with the same
-`{"status":"error"}` body as any other error.
+`{"status":"error"}` body as any other error, except nginx's refusal of a body
+over the limit in the image.
 
 - **JSON only.** A report must be sent with `Content-Type: application/json`,
   parameters such as `charset` allowed, as the page sends it; any other is
@@ -258,6 +276,13 @@ credentials, so it is bounded instead. Each refusal below answers with the same
   send a `text/plain` POST, or a form, without a CORS preflight; refusing them
   keeps any site from making its visitors' browsers store reports (see
   [CORS](#cors)).
+- **Body limit.** A report body may be at most 1 MiB, the backend's limit for
+  any request. Run on its own, the backend refuses a larger body with 413:
+  before the route when the request declares a length over the limit, otherwise
+  at the route once reading the body passes it. In the image, nginx refuses it
+  first, with or without a declared length, as its `client_max_body_size`, which
+  `configs/nginx.conf` does not set, is 1 MiB by default. nginx answers 413 with
+  its own HTML error page, and the backend never sees the request.
 - **Rate limit.** Each client address, resolved through `TRUSTED_PROXIES`, may
   send `REPORTS_PER_MINUTE` reports a minute; past that it gets 429 with
   `Retry-After: 60`. The minute slides: reports from the minute before still
@@ -281,6 +306,12 @@ credentials, so it is bounded instead. Each refusal below answers with the same
   how much of the newest reports is kept: the default of 1 GiB is small enough
   for any host; set it to the space you can give `DATA_DIR`.
 
+At the defaults, one address may send 60 reports of up to 1 MiB a minute, and a
+report made up to compress badly takes about as much room in the report files as
+its request body, so in about 17 minutes one address can fill the 1 GiB cap with
+its own reports, every report stored before them deleted to make room. Lowering
+`REPORTS_PER_MINUTE` or raising `DATA_DIR_MAX_BYTES` makes that take longer.
+
 #### CORS
 
 The page calls the API from the origin it is served from, so by default the
@@ -302,12 +333,15 @@ the metrics record its duration and response size, labelled with its path,
 method and status; they also count those requests in progress, and include Go's
 runtime and process metrics. No other request is recorded: not those to
 `/metrics` itself, and not those answered before they reach either route, such
-as a CORS preflight, or a request refused with 404 for a path no route has, 405
-for a method its route does not take, or 413 for declaring a body length over
-the 1 MiB limit. A report whose body goes over the limit without declaring its
-length reaches the route, is answered 413 there, and is recorded with that
-status. Clients can make up any number of paths and methods, and each would add
-labels to the metrics for as long as the server runs.
+as a CORS preflight, or a request refused with 404 for a path no route has or
+405 for a method its route does not take. Run on its own, the backend also
+answers 413 before the route to a request declaring a body length over the 1 MiB
+limit, which is not recorded; a report whose body goes over the limit without
+declaring its length reaches the route, is answered 413 there, and is recorded
+with that status. In the image neither reaches the backend: nginx answers both
+with 413 itself (see [Report limits](#report-limits)), and nothing of them is
+recorded. Clients can make up any number of paths and methods, and each would
+add labels to the metrics for as long as the server runs.
 
 `/metrics` is rate limited, so that its password cannot be guessed quickly: each
 client address, resolved through `TRUSTED_PROXIES`, may make 60 requests to it a

TODO.md

@@ -21,6 +21,33 @@ Run `make frontend-viewport-test` in CI as its own step; it is not part of
 
 # Completed Steps
 
+- 2026-10-18: `README.md` says what the page loses while reports are refused or
+  the page is paused ([#145](https://git.eeqj.de/sneak/netwatch/issues/145)),
+  how fast one address can replace the stored reports
+  ([#146](https://git.eeqj.de/sneak/netwatch/issues/146)), and that in the image
+  nginx answers a body over 1 MiB itself
+  ([#147](https://git.eeqj.de/sneak/netwatch/issues/147)). A sample not yet
+  delivered is kept only as long as the history holds it: at the 1-second
+  interval one refused or failed report loses the oldest 20 seconds of each
+  host's samples, and a pause longer than the history loses every sample since
+  the last delivered report. At the defaults, one address sending 1 MiB reports
+  made up to compress badly can fill the 1 GiB cap in about 17 minutes. nginx's
+  `client_max_body_size` is also 1 MiB by default, so in the image it answers a
+  larger body with 413 and its own HTML page, and the backend never sees or
+  records it; the backend's own 413 sentences now say they apply to it run on
+  its own. The reporter, the body limit and nginx are unchanged
+- 2026-10-18: a browser that cannot format the header's clocks still probes
+  ([#149](https://git.eeqj.de/sneak/netwatch/issues/149)). The clocks name the
+  local time zone through `Intl.DateTimeFormat`'s `shortGeneric` option, which
+  Chrome before 95, Firefox before 91 and Safari before 15.4 reject with an
+  error; it came before the first round started, so such a browser never checked
+  a target. The clocks now start last, after the rounds, and an error formatting
+  them leaves both blank. The footer's color legend reads `>=500ms` for red,
+  where it read `>500ms`, so 500 ms, which is red, is in one of its colors
+  ([#152](https://git.eeqj.de/sneak/netwatch/issues/152)). Unit tests check the
+  clocks with a working `Intl.DateTimeFormat` and with one that rejects
+  `shortGeneric`, and draw the page and check the legend against every entry of
+  `CONFIG.latencyColors`
 - 2026-10-18: `netwatch-server prepare-data-dir` no longer changes the owner of
   a file outside `/data` through a hard link in the volume
   ([#143](https://git.eeqj.de/sneak/netwatch/issues/143)). A file with a second

test/unit/main.test.js

@@ -6,6 +6,7 @@ import { beforeEach, test } from "node:test";
 import assert from "node:assert/strict";
 import {
     AppState,
+    buildUI,
     CONFIG,
     greyOutUI,
     hostRowHTML,
@@ -17,6 +18,7 @@ import {
     measureLatency,
     Reporter,
     tick,
+    updateClocks,
     updateSummary,
 } from "../../web/src/main.js";
 
@@ -28,8 +30,10 @@ import {
 // selector until the next test starts. As on a page, writing its text
 // replaces its markup; the status dot greyOutUI looks for in it is not
 // there. Drawing a sparkline does nothing; it looks for the pixel ratio on
-// window and finds none. In each test, console.error and console.info
-// print nothing and keep what they are given.
+// window and finds none. The commit the page's footer names, which
+// vite.config.js fills in when it builds the page, is blank. In each test,
+// console.error and console.info print nothing and keep what they are
+// given.
 const doNothing = () => {};
 let elements;
 beforeEach((t) => {
@@ -51,6 +55,8 @@ const canvasContext = {
 globalThis.window = {};
 globalThis.requestAnimationFrame = doNothing;
 globalThis.cancelAnimationFrame = doNothing;
+globalThis.__COMMIT_HASH__ = "";
+globalThis.__COMMIT_FULL__ = "";
 globalThis.document = {
     getElementById: () => null,
     createElement: () => ({}),
@@ -579,6 +585,32 @@ test("a check that timed out or found its target unreachable has a grey figure a
     assert.equal(latencyHex(null), "#6b7280");
 });
 
+// buildUI draws the page into #app, here a plain object. Each entry in the
+// footer's color legend is a colored dot and the latencies it stands for,
+// with < and > written as &lt; and &gt;. A latency takes the color of the
+// first entry in CONFIG.latencyColors whose limit it is below, so the
+// legend has, for each of those entries in order, a dot of its color (a
+// bg- class where CONFIG.latencyColors has a text- one) and the latencies
+// below its limit, or, for the last, which has no limit, the latencies
+// from the limit before it up. A gray dot for offline comes after them.
+test("the footer's color legend has each entry in CONFIG.latencyColors, with its color and limit, then offline", (t) => {
+    const app = {};
+    t.mock.method(globalThis.document, "getElementById", () => app);
+    buildUI(new AppState([]));
+
+    const legend = [
+        ...app.innerHTML.matchAll(/(bg-\w+-500) [^"]*"><\/span>(\S+)/g),
+    ].map(([, dot, latencies]) => [dot, latencies]);
+    const colors = CONFIG.latencyColors;
+    const expected = colors.map((color, i) => [
+        color.className.replace("text-", "bg-"),
+        color.below === Infinity
+            ? `&gt;=${colors[i - 1].below}ms`
+            : `&lt;${color.below}ms`,
+    ]);
+    assert.deepEqual(legend, [...expected, ["bg-gray-500", "offline"]]);
+});
+
 // A target whose checks, in turn, answered after each of latencies ms, or,
 // for null, found it unreachable.
 function hostAfter(latencies) {
@@ -701,6 +733,56 @@ test("once every WAN target's check has failed, the summary's Reachable slot rea
     assert.equal(elements["#summary-reachable"].className, "text-red-400");
 });
 
+// In the next two tests each of the header's clocks is a plain object, made
+// the first time updateClocks looks it up and kept in elements under "#" and
+// its id.
+
+// The mocked clock reads 1970-01-01T00:00:00.000Z.
+test("the header's clocks show the local time with its time zone's name, and the UTC time", (t) => {
+    t.mock.method(
+        globalThis.document,
+        "getElementById",
+        (id) => (elements[`#${id}`] ??= {}),
+    );
+    t.mock.timers.enable({ apis: ["Date"] });
+
+    updateClocks();
+
+    assert.match(
+        elements["#clock-local"].textContent,
+        /^Local: \d{4}-\d\d-\d\d \d\d:\d\d:\d\d \S/,
+    );
+    assert.equal(
+        elements["#clock-utc"].textContent,
+        "UTC: 1970-01-01 00:00:00 UTC",
+    );
+});
+
+// Here Intl.DateTimeFormat is as in Chrome before 95, Firefox before 91 or
+// Safari before 15.4: it throws a RangeError when asked for the time zone's
+// "shortGeneric" name.
+test("in a browser that cannot name the time zone, updating the clocks throws nothing and leaves them blank", (t) => {
+    t.mock.method(
+        globalThis.document,
+        "getElementById",
+        (id) => (elements[`#${id}`] ??= {}),
+    );
+    const DateTimeFormat = Intl.DateTimeFormat;
+    t.mock.method(Intl, "DateTimeFormat", function (locales, options) {
+        if (options?.timeZoneName === "shortGeneric") {
+            throw new RangeError(
+                "Value shortGeneric out of range for Intl.DateTimeFormat options property timeZoneName",
+            );
+        }
+        return new DateTimeFormat(locales, options);
+    });
+
+    updateClocks();
+
+    assert.equal(elements["#clock-local"].textContent, "");
+    assert.equal(elements["#clock-utc"].textContent, "");
+});
+
 // An app state in which, of the WAN targets, the first timedOut timed out,
 // the next unreachable were found unreachable, the next answered answered
 // after latency ms, and the rest have not been checked yet.

web/src/main.js

@@ -829,7 +829,7 @@ function wanRowsHTML(wanHosts) {
     return rows.join("");
 }
 
-function buildUI(state) {
+export function buildUI(state) {
     const app = document.getElementById("app");
     app.innerHTML = `
     <div class="mx-auto px-[5%] py-8">
@@ -911,7 +911,7 @@ function buildUI(state) {
           <span class="inline-block w-3 h-3 rounded-full bg-lime-500 mr-1 ml-3 align-middle"></span>&lt;100ms
           <span class="inline-block w-3 h-3 rounded-full bg-yellow-500 mr-1 ml-3 align-middle"></span>&lt;200ms
           <span class="inline-block w-3 h-3 rounded-full bg-orange-500 mr-1 ml-3 align-middle"></span>&lt;500ms
-          <span class="inline-block w-3 h-3 rounded-full bg-red-500 mr-1 ml-3 align-middle"></span>&gt;500ms
+          <span class="inline-block w-3 h-3 rounded-full bg-red-500 mr-1 ml-3 align-middle"></span>&gt;=500ms
           <span class="inline-block w-3 h-3 rounded-full bg-gray-500 mr-1 ml-3 align-middle"></span>offline
         </p>
         <p class="mt-2"><a href="https://git.eeqj.de/sneak/netwatch/commit/${__COMMIT_FULL__}" target="_blank" rel="noopener" class="text-gray-600 hover:text-gray-400">${__COMMIT_HASH__}</a></p>
@@ -1114,6 +1114,33 @@ function updateHealthBox(state) {
     else if (health === "healthy") log.notice(`Health: ${labels[health]}`);
 }
 
+// Writes the local time, with its time zone's name, and the UTC time into
+// the header's clocks. The clocks only decorate the page: in a browser
+// whose Intl.DateTimeFormat rejects the "shortGeneric" time zone name
+// (Chrome before 95, Firefox before 91, Safari before 15.4) they are left
+// blank.
+export function updateClocks() {
+    let local = "";
+    let utc = "";
+    try {
+        const now = new Date();
+        const zone = new Intl.DateTimeFormat("en-US", {
+            timeZoneName: "shortGeneric",
+        })
+            .formatToParts(now)
+            .find((p) => p.type === "timeZoneName").value;
+        const pad = (n) => String(n).padStart(2, "0");
+        local = `Local: ${now.toLocaleString("sv-SE", { hour12: false })} ${zone}`;
+        utc =
+            `UTC: ${now.getUTCFullYear()}-${pad(now.getUTCMonth() + 1)}-${pad(now.getUTCDate())} ` +
+            `${pad(now.getUTCHours())}:${pad(now.getUTCMinutes())}:${pad(now.getUTCSeconds())} UTC`;
+    } catch {
+        // Both clocks are left blank.
+    }
+    document.getElementById("clock-local").textContent = local;
+    document.getElementById("clock-utc").textContent = utc;
+}
+
 // --- Debug Log Renderer ------------------------------------------------------
 
 // One line of the debug log panel, its message set as text.
@@ -1509,24 +1536,6 @@ async function init() {
         sortAndRebuildWAN(state);
     });
 
-    function updateClocks() {
-        const now = new Date();
-        const pad = (n) => String(n).padStart(2, "0");
-        const utc =
-            `${now.getUTCFullYear()}-${pad(now.getUTCMonth() + 1)}-${pad(now.getUTCDate())} ` +
-            `${pad(now.getUTCHours())}:${pad(now.getUTCMinutes())}:${pad(now.getUTCSeconds())} UTC`;
-        const local =
-            now.toLocaleString("sv-SE", { hour12: false }) +
-            " " +
-            new Intl.DateTimeFormat("en-US", { timeZoneName: "shortGeneric" })
-                .formatToParts(now)
-                .find((p) => p.type === "timeZoneName").value;
-        document.getElementById("clock-local").textContent = "Local: " + local;
-        document.getElementById("clock-utc").textContent = "UTC: " + utc;
-    }
-    updateClocks();
-    setInterval(updateClocks, 1000);
-
     // Rounds never overlap: a round first gives up the last round's checks
     // if they are still waiting, and the last round then records nothing
     // more. At a steady interval they never are, as they time out at 80% of
@@ -1606,6 +1615,11 @@ async function init() {
 
     window.addEventListener("resize", () => handleResize(state));
     setTimeout(() => handleResize(state), CONFIG.resizeDelay);
+
+    // The clocks start last, after the rounds: they only decorate the page,
+    // so nothing in them may stop the monitor from probing.
+    updateClocks();
+    setInterval(updateClocks, 1000);
 }
 
 // Bootstrap only when loaded as the page: a real DOM containing the #app