@oneuptime/common 12.0.33 → 12.0.34

package/Types/Rum/SessionReplayHealth.ts

@@ -0,0 +1,238 @@
+/*
+ * Recording health for one RUM application: the answer to "why are there
+ * no recordings?" as data rather than as silence.
+ *
+ * Two shapes live here. SessionReplayIngestStatusResponseDto is the JSON
+ * that POST /telemetry/rum/session-replay/ingest-status answers today
+ * plus its additive fields, every new one optional. RecordingHealthStatus
+ * is the normalised object the Dashboard builds from it (see
+ * parseRecordingHealthStatus in Common/Utils/Rum/SessionReplayHealth.ts)
+ * and the only input diagnoseRecordingHealth takes. Keeping the two apart
+ * is what lets the diagnosis be exhaustively tested against a stable
+ * shape while the wire grows a field at a time.
+ *
+ * One rule runs through both: a counter that could not be read is null,
+ * never 0. "0 refusals" and "the refusal counter is unreachable" are
+ * different facts and the UI says "unknown" for the second.
+ */
+
+/*
+ * WHY the ingest gate refused a chunk. This is the gate's EXISTING closed
+ * vocabulary (SessionReplayIngestService.gateChunkRequest), copied rather
+ * than invented: the refusal counters are keyed on the reason string the
+ * gate already puts on the chunk response, so a customer's support ticket,
+ * the recorder's debug log and this list all quote the same word.
+ */
+export type SessionReplayRefusalReason =
+  /* SESSION_REPLAY_INGEST_ENABLED=false on this deployment. */
+  | "ingest-disabled"
+  /* No recorder artifact is published, so nothing should be posting. */
+  | "instance-not-offering-replay"
+  /* The policy lookup threw; failed closed. */
+  | "policy-unavailable"
+  /* Project or application switched off, or an unknown identifier. */
+  | "not-enabled"
+  /* The Origin header is not in the application's allowed origins. */
+  | "origin-not-allowed"
+  /* The session already holds MAX_SESSION_REPLAY_CHUNKS_PER_SESSION. */
+  | "session-chunk-cap"
+  /* The server's sampling draw disagrees with the recorder's. */
+  | "not-sampled"
+  | "rate-limited"
+  /* The rate counter (Redis) was unreachable; failed closed. */
+  | "rate-counter-unavailable"
+  /* The project's daily byte budget is spent. */
+  | "budget-exhausted"
+  /* The budget counter (Redis) was unreachable; failed closed. */
+  | "budget-counter-unavailable"
+  /* The application's own monthly budget is spent. */
+  | "app-monthly-budget-exhausted"
+  /*
+   * Every frame in the request asserted consent Unknown while the
+   * application requires explicit consent. The recorder is told to keep
+   * recording (directive continue): the page simply has not called
+   * grantConsent() yet, and this is the count that tells the customer so.
+   */
+  | "consent-required";
+
+export const SESSION_REPLAY_REFUSAL_REASONS: ReadonlyArray<SessionReplayRefusalReason> =
+  [
+    "ingest-disabled",
+    "instance-not-offering-replay",
+    "policy-unavailable",
+    "not-enabled",
+    "origin-not-allowed",
+    "session-chunk-cap",
+    "not-sampled",
+    "rate-limited",
+    "rate-counter-unavailable",
+    "budget-exhausted",
+    "budget-counter-unavailable",
+    "app-monthly-budget-exhausted",
+    "consent-required",
+  ];
+
+export function isSessionReplayRefusalReason(
+  value: unknown,
+): value is SessionReplayRefusalReason {
+  return (
+    typeof value === "string" &&
+    (SESSION_REPLAY_REFUSAL_REASONS as ReadonlyArray<string>).includes(value)
+  );
+}
+
+export interface SessionReplayRefusalCount {
+  reason: SessionReplayRefusalReason;
+  count: number;
+}
+
+/*
+ * The wire response of /ingest-status. The first block is what the route
+ * has always answered; everything after it is additive and optional.
+ */
+export interface SessionReplayIngestStatusResponseDto {
+  isProjectAllowed: boolean;
+  isApplicationEnabled: boolean;
+  appIdentifier: string;
+  allowedOrigins: Array<string>;
+  samplePercentage: number;
+  captureTrigger: string;
+  /* ISO-8601 or null. */
+  lastChunkReceivedAt: string | null;
+  budgetExceededAt: string | null;
+  /* null = counter unreachable. */
+  projectBytesUsedToday: number | null;
+  dailyByteLimit: number;
+  applicationBytesUsedThisMonth: number | null;
+  monthlyBudgetInGB: number | null;
+
+  /* ---- Additive. ---- */
+  consentMode?: string;
+  maskingMode?: string;
+  retentionInDays?: number;
+  /* The recorder artifact version the /config route hands out; null when none is built. */
+  publishedRecorderVersion?: string | null;
+  /* RumApplication.lastSeenAt: the /config route stamps it on every fetch. */
+  lastConfigFetchAt?: string | null;
+  lastSessionStartedAt?: string | null;
+  sessionsLast24h?: number | null;
+  playableSessionsLast24h?: number | null;
+  /* null when the counter store is unreachable; [] when nothing was refused. */
+  refusalsLast24h?: Array<{ reason: string; count: number }> | null;
+  /*
+   * Chunks the server ACCEPTED (202) and then dropped in the ingest worker,
+   * by reason. Kept apart from refusals because the recorder was told these
+   * landed; an open vocabulary (scrub-incomplete, over-cap, erased, ...)
+   * because the worker's drop reasons are operational, not a contract.
+   */
+  dropsLast24h?: Array<{ reason: string; count: number }> | null;
+  /*
+   * What the recorder that most recently uploaded announced it can
+   * capture (SESSION_REPLAY_RECORDER_CAPABILITIES on the chunk envelope,
+   * the same vocabulary the manifest header carries). The setup guide and
+   * the health card show it so "no clicks in the rail" can be answered
+   * with "this recorder does not send click events" rather than left as a
+   * mystery. null = not reported (an older server, or no chunk yet);
+   * [] = a recorder uploaded and announced nothing, which is a different
+   * fact and reads as "unknown capabilities" on purpose.
+   */
+  recorderCapabilities?: Array<string> | null;
+}
+
+/* The policy half of the status, as the recorder would see it. */
+export interface RecordingHealthPolicy {
+  isProjectEnabled: boolean;
+  isApplicationEnabled: boolean;
+  /* SessionReplayCaptureTrigger value; "" when the server did not say. */
+  captureTrigger: string;
+  samplePercentage: number;
+  /* SessionReplayConsentMode value; "" when the server did not say. */
+  consentMode: string;
+  /* SessionReplayMaskingMode value; "" when the server did not say. */
+  maskingMode: string;
+  /* null when the server did not say. */
+  retentionInDays: number | null;
+}
+
+/*
+ * Normalised health status. Timestamps stay ISO strings (null when the
+ * event never happened); the diagnosis converts them against `now` so it
+ * remains a pure function of its inputs.
+ */
+export interface RecordingHealthStatus {
+  appIdentifier: string;
+  allowedOrigins: Array<string>;
+  policy: RecordingHealthPolicy;
+  /* null when no recorder artifact is published or the server did not say. */
+  publishedRecorderVersion: string | null;
+  lastConfigFetchAt: string | null;
+  lastChunkReceivedAt: string | null;
+  lastSessionStartedAt: string | null;
+  budgetExceededAt: string | null;
+  sessionsLast24h: number | null;
+  playableSessionsLast24h: number | null;
+  refusalsLast24h: Array<SessionReplayRefusalCount> | null;
+  /*
+   * Open vocabulary; see SessionReplayIngestStatusResponseDto.dropsLast24h.
+   * Optional as well as nullable: it was added after the surfaces that
+   * build this object, and absent means the same as null (unknown).
+   */
+  dropsLast24h?: Array<{ reason: string; count: number }> | null;
+  /*
+   * See SessionReplayIngestStatusResponseDto.recorderCapabilities. Carried
+   * through parseRecordingHealthStatus so the surfaces that already hold a
+   * RecordingHealthStatus do not have to keep a second parse of the same
+   * body alive. Optional as well as nullable for the same reason
+   * dropsLast24h is: it postdates the objects that build this shape.
+   */
+  recorderCapabilities?: Array<string> | null;
+  projectBytesUsedToday: number | null;
+  dailyByteLimit: number;
+  applicationBytesUsedThisMonth: number | null;
+  monthlyBudgetInGB: number | null;
+}
+
+/*
+ * In strict priority order. The diagnosis returns the FIRST state whose
+ * condition holds, so a project that is switched off is reported as
+ * switched off even when its refusal counters are also climbing.
+ */
+export type RecordingHealthState =
+  | "disabled-project"
+  | "disabled-app"
+  | "budget-paused"
+  | "refusing"
+  | "never-loaded"
+  | "loaded-never-uploaded"
+  | "stale"
+  | "healthy-quiet"
+  | "healthy"
+  | "unknown";
+
+export type RecordingHealthSeverity = "ok" | "info" | "warning" | "error";
+
+/* Where the one offered action takes the viewer. */
+export type RecordingHealthActionTarget =
+  | "app-settings"
+  | "project-settings"
+  | "setup-guide"
+  | "docs-consent"
+  | "docs-csp"
+  | "budget"
+  | "allowed-origins";
+
+export interface RecordingHealthAction {
+  label: string;
+  target: RecordingHealthActionTarget;
+}
+
+export interface RecordingHealthDiagnosis {
+  state: RecordingHealthState;
+  severity: RecordingHealthSeverity;
+  /* One line: names the cause. */
+  title: string;
+  /* One or two sentences: quantifies it. */
+  detail: string;
+  /* At most one. Absent when nothing in the product fixes the state. */
+  action?: RecordingHealthAction;
+}

package/Types/Telemetry/TelemetryIngestSurface.ts

@@ -0,0 +1,95 @@
+/*
+ * Every distinct endpoint family that accepts a TelemetryIngestionKey.
+ *
+ * This enum exists so the "may this key write here?" decision is made in ONE
+ * place against a closed vocabulary, rather than each route inventing its own
+ * ad-hoc check. Each ingest route names the surface it is, the shared guard
+ * answers yes or no, and adding a new route becomes a conscious decision about
+ * whether a public browser key may reach it (the Record below will not compile
+ * until the new member is given a readable name).
+ *
+ * The string values are the wire/log form and are deliberately stable: they
+ * appear in refusal messages and in ingest logs, so renaming one changes what
+ * an operator greps for.
+ */
+enum TelemetryIngestSurface {
+  OtelTraces = "otel-traces",
+  OtelLogs = "otel-logs",
+  OtelMetrics = "otel-metrics",
+  OtelProfiles = "otel-profiles",
+  SessionReplay = "session-replay",
+  SourceMap = "source-map",
+  Syslog = "syslog",
+  Fluent = "fluent",
+  Pyroscope = "pyroscope",
+  KubernetesCost = "kubernetes-cost",
+  ChangeEvents = "change-events",
+  SecurityEvents = "security-events",
+  Grpc = "grpc",
+  Mqtt = "mqtt",
+}
+
+/*
+ * The only surfaces a Browser key may write to. This is an ALLOWLIST, not a
+ * denylist, on purpose: a surface added later is refused to browser keys until
+ * someone deliberately adds it here, so the failure mode of forgetting is
+ * "browser keys cannot reach a new endpoint" rather than "a key scraped off a
+ * public page can reach it".
+ *
+ * The four members are exactly what a real browser agent emits: OTLP traces,
+ * logs and metrics from the web SDKs, plus session replay chunks. Everything
+ * else is a server-side or infrastructure pipe that no page has any business
+ * calling - profiles, syslog, Fluent, Pyroscope, Kubernetes cost, gRPC, MQTT -
+ * or is a build-time artifact upload (source maps) that belongs in CI with a
+ * server key, not in the browser bundle, which would otherwise be able to
+ * overwrite the maps used to de-obfuscate everyone else's stack traces.
+ */
+export const BROWSER_ALLOWED_INGEST_SURFACES: ReadonlySet<TelemetryIngestSurface> =
+  new Set<TelemetryIngestSurface>([
+    TelemetryIngestSurface.OtelTraces,
+    TelemetryIngestSurface.OtelLogs,
+    TelemetryIngestSurface.OtelMetrics,
+    TelemetryIngestSurface.SessionReplay,
+  ]);
+
+/*
+ * Typed as a total Record rather than a partial lookup so that adding a member
+ * to the enum without naming it is a compile error, not a surface that
+ * silently reports itself by its raw slug in a customer-facing error.
+ */
+const INGEST_SURFACE_READABLE_NAMES: Record<TelemetryIngestSurface, string> = {
+  [TelemetryIngestSurface.OtelTraces]: "OTLP trace ingest",
+  [TelemetryIngestSurface.OtelLogs]: "OTLP log ingest",
+  [TelemetryIngestSurface.OtelMetrics]: "OTLP metric ingest",
+  [TelemetryIngestSurface.OtelProfiles]: "OTLP profile ingest",
+  [TelemetryIngestSurface.SessionReplay]: "session replay ingest",
+  [TelemetryIngestSurface.SourceMap]: "source map upload",
+  [TelemetryIngestSurface.Syslog]: "syslog ingest",
+  [TelemetryIngestSurface.Fluent]: "Fluentd / Fluent Bit ingest",
+  [TelemetryIngestSurface.Pyroscope]: "Pyroscope profile ingest",
+  [TelemetryIngestSurface.KubernetesCost]: "Kubernetes cost ingest",
+  [TelemetryIngestSurface.ChangeEvents]: "change event ingest",
+  [TelemetryIngestSurface.SecurityEvents]: "security event ingest",
+  [TelemetryIngestSurface.Grpc]: "gRPC ingest",
+  [TelemetryIngestSurface.Mqtt]: "MQTT ingest",
+};
+
+type GetIngestSurfaceReadableNameFunction = (
+  surface: TelemetryIngestSurface,
+) => string;
+
+export const getIngestSurfaceReadableName: GetIngestSurfaceReadableNameFunction =
+  (surface: TelemetryIngestSurface): string => {
+    /*
+     * The fallback guards the one case the type system cannot: a surface
+     * string that came off the wire, or out of an older row, and was cast
+     * into the enum. Echoing the raw slug beats rendering "undefined" in a
+     * refusal message.
+     */
+    const readableName: string | undefined =
+      INGEST_SURFACE_READABLE_NAMES[surface];
+
+    return readableName || String(surface);
+  };
+
+export default TelemetryIngestSurface;

package/Types/Telemetry/TelemetryIngestionKeyPolicy.ts

@@ -0,0 +1,75 @@
+import ObjectID from "../ObjectID";
+import TelemetryIngestionKeyType from "./TelemetryIngestionKeyType";
+
+/*
+ * The resolved, ingest-time view of one TelemetryIngestionKey: everything the
+ * guard needs to decide whether to accept a request, and nothing else.
+ *
+ * It is a plain type rather than the model itself so the hot path can cache it
+ * (and so nothing downstream is tempted to reach for the model's other
+ * columns, or to write through it). Note what is deliberately ABSENT: the
+ * secret. Once a request has been authenticated the secret has done its job,
+ * and a value that must never be logged is safest in a shape that never
+ * carries it.
+ *
+ * Every field is non-optional - null is spelled out - because these are
+ * decisions, and "the caller forgot to set it" must not be indistinguishable
+ * from "there is deliberately no limit here".
+ */
+export default interface TelemetryIngestionKeyPolicy {
+  ingestionKeyId: ObjectID;
+  projectId: ObjectID;
+
+  keyType: TelemetryIngestionKeyType;
+
+  /*
+   * Origins this key may be used from. REQUIRED and strictly enforced on a
+   * Browser key (empty means the key cannot be used at all, since a public
+   * key with no origin binding is just a key anyone may write with); IGNORED
+   * on a Server key, which has no Origin header to check in the first place.
+   *
+   * Note this is the opposite polarity from
+   * RumApplication.sessionReplayAllowedOrigins, where empty means "any
+   * origin". That column is an optional hardening control on an existing
+   * feature and could not be tightened without breaking live installations;
+   * this one is on a key type that did not exist before, so it can start
+   * closed.
+   */
+  allowedOrigins: Array<string>;
+
+  /*
+   * When set, every OTLP resource ingested with this key has its service.name
+   * REPLACED with this value. Null means the payload's own service.name is
+   * kept (the historical behaviour, and the only sane one for a server key
+   * that legitimately reports for many services).
+   */
+  pinnedServiceName: string | null;
+
+  /* Kill switch. False refuses everything, immediately, without deleting. */
+  isEnabled: boolean;
+
+  /* Null means never expires - the historical behaviour of every key. */
+  expiresAt: Date | null;
+
+  /*
+   * Null means "no explicit limit configured", which resolves differently per
+   * key type: a Browser key falls back to
+   * DEFAULT_BROWSER_KEY_REQUESTS_PER_MINUTE, a Server key is unlimited.
+   */
+  requestsPerMinuteLimit: number | null;
+}
+
+/*
+ * Shipped ceiling for a Browser key that has not set its own limit.
+ *
+ * Sized to be irrelevant to honest traffic and material to an abuser: 6000
+ * requests/minute is 100/second sustained, which a real page cannot approach
+ * (browser SDKs batch and flush on an interval, so one visitor generates
+ * single-digit requests per minute), while a scraped key driven from a script
+ * hits it in seconds. The limit is per KEY, not per visitor, so it must clear
+ * the whole legitimate fleet behind one key - hence a headroom this generous
+ * rather than a tight per-client number.
+ *
+ * A customer who genuinely needs more sets requestsPerMinuteLimit explicitly.
+ */
+export const DEFAULT_BROWSER_KEY_REQUESTS_PER_MINUTE: number = 6000;

package/Types/Telemetry/TelemetryIngestionKeyType.ts

@@ -0,0 +1,29 @@
+/*
+ * What kind of credential a TelemetryIngestionKey is, and therefore what the
+ * ingest side is willing to let it do.
+ *
+ * The distinction exists because these two are NOT the same secret class, even
+ * though today they are the same column:
+ *
+ * - Server keys live in a backend process, an OTel collector config, or a CI
+ *   secret. Nobody outside the customer's infrastructure ever sees them, so
+ *   they get the full ingest surface with no origin binding. This is the
+ *   historical behaviour and the DEFAULT, so every key that already exists
+ *   keeps working exactly as before.
+ * - Browser keys are pasted into a public web page - the session-replay
+ *   snippet, a browser OTLP exporter - which means "secret" is a fiction:
+ *   anyone who views source has it. They are therefore treated as PUBLIC
+ *   write-only credentials and are constrained on every axis that can be
+ *   enforced server-side: a required origin allowlist, a pinned service.name,
+ *   a per-key rate limit, an expiry, a kill switch, and a reduced set of
+ *   ingest surfaces (see BROWSER_ALLOWED_INGEST_SURFACES).
+ *
+ * The type of a key is immutable after creation - see the keyType column on
+ * TelemetryIngestionKey for why.
+ */
+enum TelemetryIngestionKeyType {
+  Server = "Server",
+  Browser = "Browser",
+}
+
+export default TelemetryIngestionKeyType;

package/Types/WebsiteRequest.ts

@@ -3,6 +3,9 @@ import Headers from "./API/Headers";
 import URL from "./API/URL";
 import Dictionary from "./Dictionary";
 import HTML from "./Html";
+import HTTPResponseBodyReader, {
+  HTTPResponseBodyBudget,
+} from "../Utils/HTTPResponseBodyReader";
 import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
 import type { Agent as HttpAgent } from "http";
 import type { Agent as HttpsAgent } from "https";
@@ -24,6 +27,17 @@ export default class WebsiteRequest {
       timeout?: number | undefined;
       isHeadRequest?: boolean | undefined;
       doNotFollowRedirects?: boolean | undefined;
+      doNotFallbackFromHead?: boolean | undefined;
+      acceptRedirectResponses?: boolean | undefined;
+      maxContentLength?: number | undefined;
+      maxBodyLength?: number | undefined;
+      disableProxy?: boolean | undefined;
+      signal?: AbortSignal | undefined;
+      responseBodyBudget?: HTTPResponseBodyBudget | undefined;
+      limitRedirectResponseBody?: boolean | undefined;
+      maximumResponseBytes?: number | undefined;
+      /** @internal Already-validated href used only for the Axios dispatch. */
+      dispatchUrl?: string | undefined;
       httpAgent?: HttpAgent | undefined; // per-request HTTP proxy agent
       httpsAgent?: HttpsAgent | undefined; // per-request HTTPS proxy agent
     },
@@ -45,6 +59,38 @@ export default class WebsiteRequest {
       axiosOptions.maxRedirects = 0;
     }
 
+    if (options.acceptRedirectResponses) {
+      axiosOptions.validateStatus = (status: number): boolean => {
+        return status >= 200 && status < 400;
+      };
+    }
+
+    if (options.maxContentLength !== undefined) {
+      axiosOptions.maxContentLength = options.maxContentLength;
+    }
+
+    if (options.maxBodyLength !== undefined) {
+      axiosOptions.maxBodyLength = options.maxBodyLength;
+    }
+
+    if (options.disableProxy) {
+      axiosOptions.proxy = false;
+    }
+
+    if (options.signal) {
+      axiosOptions.signal = options.signal;
+    }
+
+    if (options.responseBodyBudget) {
+      axiosOptions.responseType = "stream";
+      /*
+       * Let the shared streamed reader own this limit. Axios otherwise throws
+       * before yielding the over-limit chunk, so bytes already received on a
+       * failed attempt would never be charged to the cumulative budget.
+       */
+      axiosOptions.maxContentLength = -1;
+    }
+
     if (options.httpAgent) {
       (axiosOptions as AxiosRequestConfig).httpAgent = options.httpAgent;
     }
@@ -54,13 +100,36 @@ export default class WebsiteRequest {
 
     // use axios to fetch an HTML page
     let response: AxiosResponse | null = null;
+    let responseIsForHeadRequest: boolean = Boolean(options.isHeadRequest);
 
     try {
-      response = await axios(url.toString(), axiosOptions);
+      response = await axios(
+        options.dispatchUrl ?? url.toString(),
+        axiosOptions,
+      );
     } catch (err: unknown) {
-      if (err && options.isHeadRequest) {
+      if (
+        options.responseBodyBudget &&
+        axios.isAxiosError(err) &&
+        err.response
+      ) {
+        err.response.data = HTTPResponseBodyReader.decodeUtf8(
+          await HTTPResponseBodyReader.read(err.response.data, {
+            budget: options.responseBodyBudget,
+            statusCode: err.response.status,
+            headers: err.response.headers,
+            limitRedirectResponseBody:
+              options.limitRedirectResponseBody || false,
+            isHeadResponse: responseIsForHeadRequest,
+            maximumResponseBytes: options.maximumResponseBytes,
+          }),
+        );
+      }
+
+      if (err && options.isHeadRequest && !options.doNotFallbackFromHead) {
         // 404 because of HEAD request. Retry with GET request.
-        response = await axios(url.toString(), {
+        responseIsForHeadRequest = false;
+        response = await axios(options.dispatchUrl ?? url.toString(), {
           ...axiosOptions,
           method: HTTPMethod.GET,
         });
@@ -69,6 +138,19 @@ export default class WebsiteRequest {
       }
     }
 
+    if (options.responseBodyBudget) {
+      response!.data = HTTPResponseBodyReader.decodeUtf8(
+        await HTTPResponseBodyReader.read(response!.data, {
+          budget: options.responseBodyBudget,
+          statusCode: response!.status,
+          headers: response!.headers,
+          limitRedirectResponseBody: options.limitRedirectResponseBody || false,
+          isHeadResponse: responseIsForHeadRequest,
+          maximumResponseBytes: options.maximumResponseBytes,
+        }),
+      );
+    }
+
     // return the response
     return {
       url: url,

package/UI/Components/Charts/Area/AreaChart.tsx

@@ -144,6 +144,13 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
     const formatter: (value: Date) => string = XAxisUtil.getFormatter({
       xAxisMax: props.xAxis.options.max,
       xAxisMin: props.xAxis.options.min,
+      /*
+       * Exemplars are placed by label with no index fallback, so they have
+       * to be formatted at the axis's own grid step — a pinned axis
+       * labelled at a different precision would put every exemplar on a
+       * category that does not exist, and they would silently vanish.
+       */
+      precision: props.xAxis.options.precision,
     });
 
     return props.exemplarPoints.map((exemplar: ExemplarPoint) => {
@@ -164,8 +171,10 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
       return TimeAnnotationUtil.formatTimeReferenceLines({
         timeReferenceLines: props.timeReferenceLines,
         xAxis: props.xAxis,
+        // Same series the rows were built from — keeps marker indexes aligned.
+        seriesPoints: props.data || [],
       });
-    }, [props.timeReferenceLines, props.xAxis]);
+    }, [props.timeReferenceLines, props.xAxis, props.data]);
 
   const formattedReferenceRegions: Array<FormattedReferenceRegion> =
     useMemo(() => {
@@ -175,8 +184,10 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
       return TimeAnnotationUtil.formatReferenceRegions({
         referenceRegions: props.referenceRegions,
         xAxis: props.xAxis,
+        // Same series the rows were built from — keeps region indexes aligned.
+        seriesPoints: props.data || [],
       });
-    }, [props.referenceRegions, props.xAxis]);
+    }, [props.referenceRegions, props.xAxis, props.data]);
 
   const hasNoData: boolean =
     !props.data ||

package/UI/Components/Charts/Bar/BarChart.tsx

@@ -97,8 +97,10 @@ const BarChartElement: FunctionComponent<BarInternalProps> = (
       return TimeAnnotationUtil.formatTimeReferenceLines({
         timeReferenceLines: props.timeReferenceLines,
         xAxis: props.xAxis,
+        // Same series the rows were built from — keeps marker indexes aligned.
+        seriesPoints: props.data || [],
       });
-    }, [props.timeReferenceLines, props.xAxis]);
+    }, [props.timeReferenceLines, props.xAxis, props.data]);
 
   const formattedReferenceRegions: Array<FormattedReferenceRegion> =
     useMemo(() => {
@@ -108,8 +110,10 @@ const BarChartElement: FunctionComponent<BarInternalProps> = (
       return TimeAnnotationUtil.formatReferenceRegions({
         referenceRegions: props.referenceRegions,
         xAxis: props.xAxis,
+        // Same series the rows were built from — keeps region indexes aligned.
+        seriesPoints: props.data || [],
       });
-    }, [props.referenceRegions, props.xAxis]);
+    }, [props.referenceRegions, props.xAxis, props.data]);
 
   const hasNoData: boolean =
     !props.data ||

package/UI/Components/Charts/Line/LineChart.tsx

@@ -122,6 +122,13 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
     const formatter: (value: Date) => string = XAxisUtil.getFormatter({
       xAxisMax: props.xAxis.options.max,
       xAxisMin: props.xAxis.options.min,
+      /*
+       * Exemplars are placed by label with no index fallback, so they have
+       * to be formatted at the axis's own grid step — a pinned axis
+       * labelled at a different precision would put every exemplar on a
+       * category that does not exist, and they would silently vanish.
+       */
+      precision: props.xAxis.options.precision,
     });
 
     return props.exemplarPoints.map((exemplar: ExemplarPoint) => {
@@ -142,8 +149,10 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
       return TimeAnnotationUtil.formatTimeReferenceLines({
         timeReferenceLines: props.timeReferenceLines,
         xAxis: props.xAxis,
+        // Same series the rows were built from — keeps marker indexes aligned.
+        seriesPoints: props.data || [],
       });
-    }, [props.timeReferenceLines, props.xAxis]);
+    }, [props.timeReferenceLines, props.xAxis, props.data]);
 
   const formattedReferenceRegions: Array<FormattedReferenceRegion> =
     useMemo(() => {
@@ -153,8 +162,10 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
       return TimeAnnotationUtil.formatReferenceRegions({
         referenceRegions: props.referenceRegions,
         xAxis: props.xAxis,
+        // Same series the rows were built from — keeps region indexes aligned.
+        seriesPoints: props.data || [],
       });
-    }, [props.referenceRegions, props.xAxis]);
+    }, [props.referenceRegions, props.xAxis, props.data]);
 
   const hasNoData: boolean =
     !props.data ||