@oneuptime/common 12.0.34 → 13.0.1

package/UI/Components/MonitorGraphs/Uptime.tsx

@@ -13,12 +13,7 @@ import MonitorStatusTimeline from "../../../Models/DatabaseModels/MonitorStatusT
 import StatusPageHistoryChartBarColorRule from "../../../Models/DatabaseModels/StatusPageHistoryChartBarColorRule";
 import UptimeBarTooltipIncident from "../../../Types/Monitor/UptimeBarTooltipIncident";
 import UptimeHistoryLabels from "../../../Types/Monitor/UptimeHistoryLabels";
-import React, {
-  FunctionComponent,
-  ReactElement,
-  useEffect,
-  useState,
-} from "react";
+import React, { FunctionComponent, ReactElement, useMemo } from "react";
 
 export type MonitorEvent = CommonMonitorEvent;
 
@@ -47,29 +42,24 @@ export interface ComponentProps {
 const MonitorUptimeGraph: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  const [events, setEvents] = useState<Array<Event>>([]);
-
-  const [barColorRules, setBarColorRules] = useState<BarChartRule[]>([]);
-
-  useEffect(() => {
-    const eventList: Array<Event> = UptimeUtil.getNonOverlappingMonitorEvents(
-      props.items,
-    );
-    setEvents(eventList);
+  /*
+   * A search can reveal many histories at once. Derive their data before the
+   * first paint instead of painting empty bars and rebuilding them in effects.
+   */
+  const events: Array<Event> = useMemo(() => {
+    return UptimeUtil.getNonOverlappingMonitorEvents(props.items);
   }, [props.items]);
 
-  useEffect(() => {
-    if (props.barColorRules) {
-      setBarColorRules(
-        props.barColorRules.map((rule: StatusPageHistoryChartBarColorRule) => {
-          return {
-            barColor: rule.barColor!,
-            uptimePercentGreaterThanOrEqualTo:
-              rule.uptimePercentGreaterThanOrEqualTo!,
-          };
-        }),
-      );
-    }
+  const barColorRules: Array<BarChartRule> = useMemo(() => {
+    return (props.barColorRules || []).map(
+      (rule: StatusPageHistoryChartBarColorRule): BarChartRule => {
+        return {
+          barColor: rule.barColor!,
+          uptimePercentGreaterThanOrEqualTo:
+            rule.uptimePercentGreaterThanOrEqualTo!,
+        };
+      },
+    );
   }, [props.barColorRules]);
 
   if (props.isLoading) {

package/UI/Components/MonitorTemplateVariables/TemplateVariablesCatalog.ts

@@ -33,7 +33,7 @@ export default class TemplateVariablesCatalog {
     /**
      * Attribute keys the user has configured on the metric query
      * (e.g. ["host.name", "region"]). For metric/kubernetes/docker/
-     * proxmox/ceph monitors, these become per-series template variables
+     * proxmox/vmware/ceph monitors, these become per-series template variables
      * — one incident fires per unique value combination, and each
      * incident can reference the label values via `{{host.name}}` etc.
      */
@@ -58,6 +58,7 @@ export default class TemplateVariablesCatalog {
       input.monitorType === MonitorType.Podman ||
       input.monitorType === MonitorType.DockerSwarm ||
       input.monitorType === MonitorType.Proxmox ||
+      input.monitorType === MonitorType.VMware ||
       input.monitorType === MonitorType.Ceph
     ) {
       groups.push(
@@ -672,6 +673,7 @@ export default class TemplateVariablesCatalog {
       case MonitorType.Podman:
       case MonitorType.DockerSwarm:
       case MonitorType.Proxmox:
+      case MonitorType.VMware:
       case MonitorType.Ceph:
         return {
           title: "Metric",

package/UI/Components/Tooltip/Tooltip.tsx

@@ -1,5 +1,10 @@
 import Tippy from "@tippyjs/react";
-import React, { FunctionComponent, ReactElement } from "react";
+import React, {
+  cloneElement,
+  FunctionComponent,
+  ReactElement,
+  useState,
+} from "react";
 import "tippy.js/dist/tippy.css";
 import "tippy.js/themes/light-border.css";
 import "tippy.js/animations/shift-away-subtle.css";
@@ -8,10 +13,16 @@ export interface ComponentProps {
   text?: string | undefined;
   children: ReactElement;
   richContent?: ReactElement | undefined;
+  // Large collections can wait to create a tooltip until first opened.
+  lazy?: boolean | undefined;
 }
 
-const Tooltip: FunctionComponent<ComponentProps> = (
-  props: ComponentProps,
+interface PopupProps extends ComponentProps {
+  reference?: HTMLElement | undefined;
+}
+
+const TooltipPopup: FunctionComponent<PopupProps> = (
+  props: PopupProps,
 ): ReactElement => {
   if (!props.text && !props.richContent) {
     return props.children;
@@ -47,6 +58,9 @@ const Tooltip: FunctionComponent<ComponentProps> = (
        * impossible to build under it.
        */
       content={tooltipContent}
+      {...(props.reference
+        ? { reference: props.reference, showOnCreate: true }
+        : { children: props.children })}
       interactive={isRich}
       trigger="mouseenter focus"
       hideOnClick={false}
@@ -65,9 +79,41 @@ const Tooltip: FunctionComponent<ComponentProps> = (
          */
         expanded: false,
       }}
-    >
-      {props.children}
-    </Tippy>
+    />
+  );
+};
+
+const Tooltip: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [reference, setReference] = useState<HTMLElement | null>(null);
+
+  if (!props.lazy || (!props.text && !props.richContent)) {
+    return <TooltipPopup {...props} />;
+  }
+
+  /*
+   * Keep the trigger in the same place before and after opening. Wrapping it
+   * in Tippy on first interaction would replace the DOM node and lose focus.
+   * Tippy attaches its normal hover, focus and interactive-hide handlers to
+   * this external reference once, when the visitor first uses the tooltip.
+   */
+  const child: ReactElement<React.HTMLAttributes<HTMLElement>> = props.children;
+
+  return (
+    <>
+      {cloneElement(child, {
+        onMouseEnter: (event: React.MouseEvent<HTMLElement>) => {
+          child.props.onMouseEnter?.(event);
+          setReference(event.currentTarget);
+        },
+        onFocus: (event: React.FocusEvent<HTMLElement>) => {
+          child.props.onFocus?.(event);
+          setReference(event.currentTarget);
+        },
+      })}
+      {reference && <TooltipPopup {...props} reference={reference} />}
+    </>
   );
 };
 

package/UI/Utils/DashboardStackingLayers.ts

@@ -0,0 +1,85 @@
+/*
+ * Paint order on a dashboard page, in one place.
+ *
+ * github.com/OneUptime/oneuptime/issues/3660. A tile that had been clicked
+ * once painted ON TOP of the toolbar's auto-refresh dropdown, so the picker
+ * opened into a white rectangle the user could not see. Both numbers behind
+ * that were reasonable on their own - the canvas raises a selected tile so it
+ * sits above the tiles it overlaps, and the dropdown asked for a modest
+ * layer - but neither element sat inside a stacking context of its own, so
+ * "above my neighbours on the board" and "above the toolbar card" were
+ * silently resolved against each other in the ROOT stacking context, and the
+ * larger number won.
+ *
+ * Numbers alone cannot fix that; the next person to raise a widget by one
+ * step re-breaks it. So the contract has two halves and both live here:
+ *
+ *   1. The canvas positioner establishes its OWN stacking context
+ *      (CANVAS_ISOLATION below). Every z-index inside the canvas is then a
+ *      statement about the other things ON THE BOARD, and cannot outrank page
+ *      chrome however large it grows. This is what actually fixes the bug -
+ *      and it fixes the unreported half of it too, because a selected tile at
+ *      20 and a dragged tile at 60 were also outranking the app's own sticky
+ *      header (`sticky top-0 z-10`, Common/UI/Components/MasterPage).
+ *
+ *   2. The toolbar's hand-rolled auto-refresh menu sits at TOOLBAR_POPUP, the
+ *      layer MoreMenu already uses (`z-50`,
+ *      Common/UI/Components/MoreMenu/MoreMenu.tsx), so the two menus in that
+ *      one toolbar stop disagreeing about how high a menu opens.
+ *
+ * These are plain numbers rather than Tailwind classes on purpose: the
+ * relationship between them is the thing that matters, and a relationship
+ * spelled as `z-10` in one file and `zIndex: 20` in another is exactly what
+ * broke. Written this way it is one import, and a test can assert the
+ * ordering instead of trusting two string literals to stay in step.
+ */
+
+export interface DashboardStackingLayerScale {
+  /**
+   * The dashed drop-target outline shown while a widget is dragged or
+   * resized. Below the widget being moved, so the card stays readable as it
+   * crosses its own placeholder.
+   */
+  canvasPlaceholder: number;
+
+  /**
+   * The selected widget. Raised so its selection ring and resize handles
+   * are not clipped by the neighbours they overlap.
+   */
+  canvasSelectedComponent: number;
+
+  /**
+   * The widget under an active drag or resize. Above everything else on the
+   * board, including the placeholder it is heading for, and held there until
+   * the settle transition finishes (see UseDashboardGridDnd).
+   */
+  canvasDraggingComponent: number;
+
+  /**
+   * Menus and panels anchored to the dashboard toolbar. Above the canvas -
+   * which, being isolated, cannot compete - and above the app's sticky
+   * header, matching MoreMenu.
+   */
+  toolbarPopup: number;
+}
+
+const DashboardStackingLayers: DashboardStackingLayerScale = {
+  canvasPlaceholder: 5,
+  canvasSelectedComponent: 20,
+  canvasDraggingComponent: 60,
+  toolbarPopup: 50,
+};
+
+/**
+ * The `isolation` value the dashboard canvas positioner carries.
+ *
+ * `isolate` is the property whose only job is to open a stacking context: it
+ * changes no layout, clips nothing, and - unlike `transform` or `filter` -
+ * does not become the containing block for `position: fixed` descendants, so
+ * portalled popups and fullscreen keep working exactly as they did.
+ */
+export type DashboardCanvasIsolation = "isolate";
+
+export const DASHBOARD_CANVAS_ISOLATION: DashboardCanvasIsolation = "isolate";
+
+export default DashboardStackingLayers;

package/UI/Utils/LabelRuleImportExport.ts

@@ -0,0 +1,310 @@
+import BaseModel, {
+  DatabaseBaseModelType,
+} from "../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+import ListResult from "../../Types/BaseDatabase/ListResult";
+import Query from "../../Types/BaseDatabase/Query";
+import Select from "../../Types/BaseDatabase/Select";
+import SortOrder from "../../Types/BaseDatabase/SortOrder";
+import { TableColumnMetadata } from "../../Types/Database/TableColumn";
+import TableColumnType from "../../Types/Database/TableColumnType";
+import BadDataException from "../../Types/Exception/BadDataException";
+import { JSONObject } from "../../Types/JSON";
+import ObjectID from "../../Types/ObjectID";
+import LabelRuleFile, {
+  ParsedLabelRuleImport,
+} from "../../Utils/LabelRuleImportExport";
+import API from "./API/API";
+import ModelAPI from "./ModelAPI/ModelAPI";
+
+export interface LabelRuleImportItem {
+  index: number;
+  name: string;
+  description: string;
+  isEnabled: boolean;
+  labels: Array<string>;
+  json: JSONObject;
+  displayJson: JSONObject;
+  portableJson: JSONObject;
+}
+
+export interface LabelRuleImportPreview {
+  projectId: string;
+  sourceResourceType: string;
+  destinationResourceType: string;
+  mappings: Array<string>;
+  items: Array<LabelRuleImportItem>;
+}
+
+export interface LabelRuleImportFailure {
+  index: number;
+  itemName: string;
+  errorMessage: string;
+}
+
+export interface LabelRuleImportResult {
+  successCount: number;
+  failures: Array<LabelRuleImportFailure>;
+  retryPreview: LabelRuleImportPreview;
+}
+
+export const LABEL_RULE_IMPORT_CONCURRENCY: number = 5;
+const PAGE_SIZE: number = 500;
+
+export default class LabelRuleImportExport {
+  public static async exportAll(data: {
+    modelType: DatabaseBaseModelType;
+    projectId: ObjectID;
+    modelAPI?: typeof ModelAPI | undefined;
+  }): Promise<JSONObject> {
+    const items: Array<BaseModel> = await this.getAll({
+      ...data,
+      select: LabelRuleFile.getExportSelect(data.modelType),
+    });
+    return LabelRuleFile.buildExportEnvelope({
+      modelType: data.modelType,
+      items,
+    });
+  }
+
+  public static async preview(data: {
+    modelType: DatabaseBaseModelType;
+    fileText: string;
+    projectId: ObjectID;
+    modelAPI?: typeof ModelAPI | undefined;
+  }): Promise<LabelRuleImportPreview> {
+    // Parse every row before any lookup, and resolve every relation before any write.
+    const parsed: ParsedLabelRuleImport = LabelRuleFile.parse(data);
+    const model: BaseModel = new data.modelType();
+    const relationColumns: Array<string> = LabelRuleFile.getColumns(
+      data.modelType,
+    ).filter((column: string): boolean => {
+      return (
+        model.getTableColumnMetadata(column)?.type ===
+        TableColumnType.EntityArray
+      );
+    });
+    const indexes: Map<
+      DatabaseBaseModelType,
+      Map<string, Array<string>>
+    > = new Map();
+    for (const column of relationColumns) {
+      if (
+        !parsed.items.some(
+          (item: ParsedLabelRuleImport["items"][number]): boolean => {
+            return (item.json[column] as Array<string>).length > 0;
+          },
+        )
+      ) {
+        continue;
+      }
+      const metadata: TableColumnMetadata =
+        model.getTableColumnMetadata(column)!;
+      const relationType: DatabaseBaseModelType = metadata.modelType!;
+      if (indexes.has(relationType)) {
+        continue;
+      }
+      const relations: Array<BaseModel> = await this.getAll({
+        modelType: relationType,
+        projectId: data.projectId,
+        modelAPI: data.modelAPI,
+        select: { _id: true, name: true } as Select<BaseModel>,
+      });
+      const names: Map<string, Array<string>> = new Map();
+      for (const relation of relations) {
+        const name: unknown = relation.getValue("name");
+        if (typeof name === "string" && relation.id) {
+          const ids: Array<string> = names.get(name) || [];
+          if (!ids.includes(relation.id.toString())) {
+            ids.push(relation.id.toString());
+          }
+          names.set(name, ids);
+        }
+      }
+      indexes.set(relationType, names);
+    }
+
+    const errors: Array<string> = [];
+    const items: Array<LabelRuleImportItem> = parsed.items.map(
+      (
+        item: ParsedLabelRuleImport["items"][number],
+        index: number,
+      ): LabelRuleImportItem => {
+        const json: JSONObject = { ...item.json };
+        for (const column of relationColumns) {
+          const metadata: TableColumnMetadata =
+            model.getTableColumnMetadata(column)!;
+          json[column] = (item.json[column] as Array<string>).map(
+            (name: string): JSONObject => {
+              const ids: Array<string> =
+                indexes.get(metadata.modelType!)?.get(name) || [];
+              if (ids.length !== 1) {
+                errors.push(
+                  `Rule ${index + 1} (${item.json["name"]}): ${metadata.title || column} "${name}" ${ids.length ? "matches multiple resources" : "was not found"} in the destination project. ${ids.length ? "Give these resources distinct names" : "Create or rename the resource"} before importing.`,
+                );
+                return {};
+              }
+              return { _id: ids[0]! };
+            },
+          );
+        }
+        return {
+          index: index + 1,
+          name: item.json["name"] as string,
+          description: (item.json["description"] as string) || "",
+          isEnabled: item.json["isEnabled"] as boolean,
+          labels: item.json["labelsToAdd"] as Array<string>,
+          json,
+          displayJson: item.json,
+          portableJson: item.portableJson,
+        };
+      },
+    );
+    if (errors.length) {
+      throw new BadDataException(
+        errors.slice(0, 20).join("\n") +
+          (errors.length > 20
+            ? `\nAnd ${errors.length - 20} more unresolved resources.`
+            : ""),
+      );
+    }
+    return {
+      projectId: data.projectId.toString(),
+      sourceResourceType: parsed.sourceResourceType,
+      destinationResourceType: parsed.destinationResourceType,
+      mappings: parsed.mappings,
+      items,
+    };
+  }
+
+  public static getRetryEnvelope(preview: LabelRuleImportPreview): JSONObject {
+    return LabelRuleFile.envelope({
+      resourceType: preview.sourceResourceType,
+      items: preview.items.map((item: LabelRuleImportItem): JSONObject => {
+        return item.portableJson;
+      }),
+    });
+  }
+
+  public static async importPreview(data: {
+    preview: LabelRuleImportPreview;
+    modelType: DatabaseBaseModelType;
+    modelAPI?: typeof ModelAPI | undefined;
+    onProgress?:
+      | ((completedCount: number, totalCount: number) => void)
+      | undefined;
+  }): Promise<LabelRuleImportResult> {
+    if (
+      new data.modelType().tableName !== data.preview.destinationResourceType
+    ) {
+      throw new BadDataException(
+        "The destination rule type changed. Preview this file again before importing.",
+      );
+    }
+    const projectId: ObjectID = new ObjectID(data.preview.projectId);
+    const modelAPI: typeof ModelAPI = data.modelAPI || ModelAPI;
+    let nextItem: number = 0;
+    let completed: number = 0;
+    let successCount: number = 0;
+    const failures: Array<LabelRuleImportFailure> = [];
+    const worker: () => Promise<void> = async (): Promise<void> => {
+      while (nextItem < data.preview.items.length) {
+        const item: LabelRuleImportItem = data.preview.items[nextItem++]!;
+        try {
+          const model: BaseModel = BaseModel.fromJSONObject(
+            item.json,
+            data.modelType,
+          );
+          model.setValue("projectId", projectId);
+          /*
+           * Each row uses the normal API permission checks and validation hooks.
+           * Never automatically retry: a lost response can follow a successful write.
+           */
+          await modelAPI.create({
+            model,
+            modelType: data.modelType,
+            requestOptions: {
+              requestHeaders: { tenantid: projectId.toString() },
+            },
+          });
+          successCount++;
+        } catch (error) {
+          failures.push({
+            index: item.index,
+            itemName: item.name,
+            errorMessage: API.getFriendlyMessage(error),
+          });
+        }
+        completed++;
+        if (data.onProgress) {
+          try {
+            data.onProgress(completed, data.preview.items.length);
+          } catch {
+            // A rendering failure must not hide completed writes or abort the batch.
+          }
+        }
+      }
+    };
+    await Promise.all(
+      Array.from(
+        {
+          length: Math.min(
+            LABEL_RULE_IMPORT_CONCURRENCY,
+            data.preview.items.length,
+          ),
+        },
+        worker,
+      ),
+    );
+    failures.sort(
+      (left: LabelRuleImportFailure, right: LabelRuleImportFailure): number => {
+        return left.index - right.index;
+      },
+    );
+    const failedIndexes: Set<number> = new Set(
+      failures.map((failure: LabelRuleImportFailure): number => {
+        return failure.index;
+      }),
+    );
+    return {
+      successCount,
+      failures,
+      retryPreview: {
+        ...data.preview,
+        items: data.preview.items.filter(
+          (item: LabelRuleImportItem): boolean => {
+            return failedIndexes.has(item.index);
+          },
+        ),
+      },
+    };
+  }
+
+  private static async getAll(data: {
+    modelType: DatabaseBaseModelType;
+    projectId: ObjectID;
+    modelAPI?: typeof ModelAPI | undefined;
+    select: Select<BaseModel>;
+  }): Promise<Array<BaseModel>> {
+    const modelAPI: typeof ModelAPI = data.modelAPI || ModelAPI;
+    const items: Array<BaseModel> = [];
+    let skip: number = 0;
+    while (true) {
+      const result: ListResult<BaseModel> = await modelAPI.getList({
+        modelType: data.modelType,
+        query: { projectId: data.projectId } as Query<BaseModel>,
+        select: data.select,
+        skip,
+        limit: PAGE_SIZE,
+        sort: { _id: SortOrder.Ascending },
+        requestOptions: {
+          requestHeaders: { tenantid: data.projectId.toString() },
+        },
+      });
+      items.push(...result.data);
+      skip += result.data.length;
+      if (result.data.length === 0 || skip >= result.count) {
+        return items;
+      }
+    }
+  }
+}

package/UI/Utils/ModelAPI/ModelAPI.ts

@@ -232,9 +232,10 @@ export default class ModelAPI {
       );
     }
 
-    const headers: Dictionary<string> = this.getCommonHeaders(
-      data.requestOptions,
-    );
+    const headers: Dictionary<string> = {
+      ...this.getCommonHeaders(data.requestOptions),
+      ...(data.requestOptions?.requestHeaders || {}),
+    };
     if (data.requestOptions && data.requestOptions.isMultiTenantRequest) {
       headers["isMultiTenantRequest"] = "true";
     }

package/UI/Utils/TelemetryService.ts

@@ -24,7 +24,7 @@ export const UNKNOWN_SERVICE_NAME: string = "Unknown Service";
  * OpenTelemetry service, or the synthetic "Unknown Service" for the
  * unattributed bucket) — or a plain `label` for infrastructure resource
  * types (Host / DockerHost / KubernetesCluster / ProxmoxCluster /
- * CephCluster) that have no Service row.
+ * CephCluster / VMwareVCenter) that have no Service row.
  */
 export interface ResolvedTelemetryResource {
   service?: Service;
@@ -67,8 +67,8 @@ export default class TelemetryServiceUtil {
    * old server-side `service` ORM relation on TelemetryException: a real
    * Service resolves from the loaded list, the unattributed bucket resolves
    * to the synthetic "Unknown Service", and Host / DockerHost /
-   * KubernetesCluster / ProxmoxCluster / CephCluster resolve to a type
-   * label (no Service row exists for them). Mirrors how the ClickHouse
+   * KubernetesCluster / ProxmoxCluster / CephCluster / VMwareVCenter
+   * resolve to a type label (no Service row exists for them). Mirrors how the ClickHouse
    * analytics rows are resolved.
    */
   public static resolveTelemetryResource(data: {
@@ -106,6 +106,7 @@ export default class TelemetryServiceUtil {
       [ServiceType.KubernetesCluster]: "Kubernetes telemetry",
       [ServiceType.ProxmoxCluster]: "Proxmox Cluster",
       [ServiceType.CephCluster]: "Ceph Cluster",
+      [ServiceType.VMwareVCenter]: "vCenter",
     };
     const label: string | undefined = data.primaryEntityType
       ? typeLabels[data.primaryEntityType.toString()]

package/UI/Utils/UseDashboardGridDnd.ts

@@ -1,4 +1,5 @@
 import GridLayoutUtil, { GridRect } from "../../Utils/Dashboard/GridLayout";
+import DashboardStackingLayers from "./DashboardStackingLayers";
 import React, {
   useCallback,
   useEffect,
@@ -537,7 +538,9 @@ const useDashboardGridDnd: UseDashboardGridDndFunction = (
     if (element) {
       element.style.transition = "none";
       element.style.willChange = "transform, width, height";
-      element.style.zIndex = "60";
+      element.style.zIndex = String(
+        DashboardStackingLayers.canvasDraggingComponent,
+      );
     }
 
     document.body.style.userSelect = "none";

package/UI/Utils/UserEmailRegistrationStatus.ts

@@ -1,4 +1,10 @@
-import { MutableRefObject, useCallback, useRef, useState } from "react";
+import {
+  MutableRefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import Dictionary from "../../Types/Dictionary";
 import Email from "../../Types/Email";
 import HTTPErrorResponse from "../../Types/API/HTTPErrorResponse";
@@ -36,8 +42,28 @@ export function useUserEmailRegistrationStatus(options?: {
   > | null> = useRef<ReturnType<typeof setTimeout> | null>(null);
   const latestEmail: MutableRefObject<string> = useRef<string>("");
 
-  const getRequestHeaders: (() => Dictionary<string>) | undefined =
-    options?.getRequestHeaders;
+  /*
+   * Held in a ref so a caller that writes its options inline - which is every
+   * caller - does not get a new checkEmail on every render, and through it a
+   * new field definition and a new re-render of the form it is attached to.
+   */
+  const getRequestHeaders: MutableRefObject<
+    (() => Dictionary<string>) | undefined
+  > = useRef<(() => Dictionary<string>) | undefined>(
+    options?.getRequestHeaders,
+  );
+
+  getRequestHeaders.current = options?.getRequestHeaders;
+
+  // A check still in flight when the form closes has nowhere to report to.
+  useEffect(() => {
+    return () => {
+      if (debounceTimeout.current) {
+        clearTimeout(debounceTimeout.current);
+        debounceTimeout.current = null;
+      }
+    };
+  }, []);
 
   const checkEmail: (email: string) => void = useCallback(
     (email: string): void => {
@@ -64,7 +90,9 @@ export function useUserEmailRegistrationStatus(options?: {
               data: {
                 email: trimmedEmail,
               },
-              ...(getRequestHeaders ? { headers: getRequestHeaders() } : {}),
+              ...(getRequestHeaders.current
+                ? { headers: getRequestHeaders.current() }
+                : {}),
             });
 
           if (latestEmail.current !== trimmedEmail) {
@@ -86,7 +114,7 @@ export function useUserEmailRegistrationStatus(options?: {
         }
       }, 400);
     },
-    [getRequestHeaders],
+    [],
   );
 
   return { isEmailRegistered, checkEmail };