From 091f7c4f4f74f4a45fd380797d88f83536d101b1 Mon Sep 17 00:00:00 2001
From: Joan Leon <joan.leon@gmail.com>
Date: Sat, 14 Nov 2026 21:47:30 +0100
Subject: [PATCH] fix(cli): report a snippet the browser does not support as
 not supported
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A result with the unsupported status fell through to the metric row of the human and markdown reports, which printed "undefined" as its value and, in the markdown table, "· undefined" as its status.

Both reports say "not supported" and the reason the snippet gives, or that the browser lacks the API when it gives none.
---
 cli/CHANGELOG.md                 |  1 +
 cli/src/reporters/human.js       |  5 +++++
 cli/src/reporters/markdown.js    |  6 ++++++
 cli/tests/unit/reporters.test.js | 25 +++++++++++++++++++++++++
 4 files changed, 37 insertions(+)

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index 93eeec32..dba1153c 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -10,6 +10,7 @@ Format based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). The CL
 
 ### Fixed
 - The markdown report escapes the message of an error in the New errors and Fixed errors lists of `--baseline`, as it does in its Errors and warnings list and in its tables. They printed the message as it came, so GitHub dropped the `<head>` of `1 blocking script(s) in <head>` there, and a line break in a message could start a heading or another list item.
+- The human and markdown reports say `not supported` and why for a snippet whose API the browser lacks, a result with the `unsupported` status. They printed it as a metric without a value: `undefined` as its value, and `· undefined` as its status in the markdown table.
 
 ---
 
diff --git a/cli/src/reporters/human.js b/cli/src/reporters/human.js
index de580dab..96618e3b 100644
--- a/cli/src/reporters/human.js
+++ b/cli/src/reporters/human.js
@@ -148,6 +148,11 @@ function renderResult(r, verbose) {
     return `  ${styleText("dim", "·")} ${pad(r.id, 16)} ${styleText("dim", `not measured: ${r.message ?? "nothing recorded"}`)}`;
   }
 
+  // The browser lacks the API the snippet reads, so there is no value to show
+  if (r.status === "unsupported") {
+    return `  ${styleText("dim", "·")} ${pad(r.id, 16)} ${styleText("dim", `not supported: ${r.error ?? "the browser lacks the API"}`)}`;
+  }
+
   if (r.script === "Fonts-Preloaded-Loaded-and-used-above-the-fold") {
     return renderFontsResult(r);
   }
diff --git a/cli/src/reporters/markdown.js b/cli/src/reporters/markdown.js
index 5762b6d8..5c0b33bd 100644
--- a/cli/src/reporters/markdown.js
+++ b/cli/src/reporters/markdown.js
@@ -48,6 +48,11 @@ function renderNotMeasuredRow(r) {
   return `| ${r.id} | · not measured | ${cell(r.message ?? "nothing recorded")} |`;
 }
 
+// The browser lacks the API the snippet reads, so there is no value to show
+function renderUnsupportedRow(r) {
+  return `| ${r.id} | · not supported | ${cell(r.error ?? "the browser lacks the API")} |`;
+}
+
 // A result with a count and no value: its count, and its first numbers as the human report gives them
 function renderSummaryRow(r) {
   return `| ${r.id} | · ${r.count ?? ""} | ${summaryNumbers(r).join(" · ")} |`;
@@ -57,6 +62,7 @@ function renderRow(r) {
   if (r.status === "skipped") return renderSkippedRow(r);
   if (r.status === "error") return renderErrorRow(r);
   if (r.status === "tracking") return renderNotMeasuredRow(r);
+  if (r.status === "unsupported") return renderUnsupportedRow(r);
   if (Array.isArray(r.issues)) return renderAuditRow(r);
   if (isSummaryResult(r)) return renderSummaryRow(r);
   return renderMetricRow(r);
diff --git a/cli/tests/unit/reporters.test.js b/cli/tests/unit/reporters.test.js
index 90c96594..7bfc869c 100644
--- a/cli/tests/unit/reporters.test.js
+++ b/cli/tests/unit/reporters.test.js
@@ -800,3 +800,28 @@ describe("the details of each result in the markdown report", () => {
     expect(output).not.toContain("<details>");
   });
 });
+
+describe("a result of a browser without the API", () => {
+  const unsupported = {
+    url: "https://example.com",
+    navMs: 850,
+    results: [
+      { id: "LCP", script: "LCP", status: "unsupported", error: "largest-contentful-paint entries not supported in this browser" },
+      { id: "INP", script: "INP", status: "unsupported" },
+    ],
+  };
+
+  it("shows in the human report as not supported with its reason, and not as a value", () => {
+    const output = reportHuman(unsupported);
+    expect(output).toMatch(/LCP\s+.*not supported: largest-contentful-paint entries not supported in this browser/);
+    expect(output).toMatch(/INP\s+.*not supported: the browser lacks the API/);
+    expect(output).not.toContain("undefined");
+  });
+
+  it("shows in the markdown report as not supported with its reason, and not as a value", () => {
+    const output = reportMarkdown(unsupported);
+    expect(output).toContain("| LCP | · not supported | largest-contentful-paint entries not supported in this browser |");
+    expect(output).toContain("| INP | · not supported | the browser lacks the API |");
+    expect(output).not.toContain("undefined");
+  });
+});