@oneuptime/common 12.0.3 → 12.0.5

package/Types/Permission.ts

@@ -402,12 +402,24 @@ enum Permission {
   EditScheduledMaintenanceOwnerUser = "EditScheduledMaintenanceOwnerUser",
   ReadScheduledMaintenanceOwnerUser = "ReadScheduledMaintenanceOwnerUser",
 
-  CreateScheduledMaintenanceTemplateOwnerUser = "CreateScheduledMaintenanceOwnerUser",
+  /*
+   * The two Create members below shipped with the value of their non-template
+   * counterparts (2024-09-09, "Add new migration for ScheduledMaintenanceTemplate"),
+   * so `CreateScheduledMaintenanceTemplateOwnerUser === CreateScheduledMaintenanceOwnerUser`
+   * at runtime and the two capabilities were one permission wearing two names.
+   * Granting either conferred create on BOTH the template owner table and the
+   * real scheduled-maintenance owner table — and since owner rows drive the
+   * Owned permission scope, that widened access to events the holder did not
+   * own. Their Delete/Edit/Read siblings were always correct; only Create was
+   * mis-keyed. AddScheduledMaintenanceTemplateOwnerPermissions backfills the
+   * stored grants so no install loses access when these values changed.
+   */
+  CreateScheduledMaintenanceTemplateOwnerUser = "CreateScheduledMaintenanceTemplateOwnerUser",
   DeleteScheduledMaintenanceTemplateOwnerUser = "DeleteScheduledMaintenanceTemplateOwnerUser",
   EditScheduledMaintenanceTemplateOwnerUser = "EditScheduledMaintenanceTemplateOwnerUser",
   ReadScheduledMaintenanceTemplateOwnerUser = "ReadScheduledMaintenanceTemplateOwnerUser",
 
-  CreateScheduledMaintenanceTemplateOwnerTeam = "CreateScheduledMaintenanceOwnerTeam",
+  CreateScheduledMaintenanceTemplateOwnerTeam = "CreateScheduledMaintenanceTemplateOwnerTeam",
   DeleteScheduledMaintenanceTemplateOwnerTeam = "DeleteScheduledMaintenanceTemplateOwnerTeam",
   EditScheduledMaintenanceTemplateOwnerTeam = "EditScheduledMaintenanceTemplateOwnerTeam",
   ReadScheduledMaintenanceTemplateOwnerTeam = "ReadScheduledMaintenanceTemplateOwnerTeam",
@@ -3287,88 +3299,6 @@ export class PermissionHelper {
         group: PermissionGroup.Monitor,
       },
 
-      {
-        permission: Permission.CreateStatusPageAnnouncement,
-        title: "Create Status Page Announcement",
-        description:
-          "This permission can create Status Page Announcement this project.",
-        isAssignableToTenant: true,
-        isAccessControlPermission: false,
-        isRolePermission: false,
-        group: PermissionGroup.StatusPage,
-      },
-      {
-        permission: Permission.DeleteStatusPageAnnouncement,
-        title: "Delete Status Page Announcement",
-        description:
-          "This permission can delete Status Page Announcement of this project.",
-        isAssignableToTenant: true,
-        isAccessControlPermission: false,
-        isRolePermission: false,
-        group: PermissionGroup.StatusPage,
-      },
-      {
-        permission: Permission.EditStatusPageAnnouncement,
-        title: "Edit Status Page Announcement",
-        description:
-          "This permission can edit Status Page Announcement of this project.",
-        isAssignableToTenant: true,
-        isAccessControlPermission: false,
-        isRolePermission: false,
-        group: PermissionGroup.StatusPage,
-      },
-      {
-        permission: Permission.ReadStatusPageAnnouncement,
-        title: "Read Status Page Announcement",
-        description:
-          "This permission can read Status Page Announcement of this project.",
-        isAssignableToTenant: true,
-        isAccessControlPermission: false,
-        isRolePermission: false,
-        group: PermissionGroup.StatusPage,
-      },
-
-      {
-        permission: Permission.CreateStatusPageAnnouncementTemplate,
-        title: "Create Status Page Announcement Template",
-        description:
-          "This permission can create Status Page Announcement Templates in this project.",
-        isAssignableToTenant: true,
-        isAccessControlPermission: false,
-        isRolePermission: false,
-        group: PermissionGroup.StatusPage,
-      },
-      {
-        permission: Permission.DeleteStatusPageAnnouncementTemplate,
-        title: "Delete Status Page Announcement Template",
-        description:
-          "This permission can delete Status Page Announcement Templates of this project.",
-        isAssignableToTenant: true,
-        isAccessControlPermission: false,
-        isRolePermission: false,
-        group: PermissionGroup.StatusPage,
-      },
-      {
-        permission: Permission.EditStatusPageAnnouncementTemplate,
-        title: "Edit Status Page Announcement Template",
-        description:
-          "This permission can edit Status Page Announcement Templates of this project.",
-        isAssignableToTenant: true,
-        isAccessControlPermission: false,
-        isRolePermission: false,
-        group: PermissionGroup.StatusPage,
-      },
-      {
-        permission: Permission.ReadStatusPageAnnouncementTemplate,
-        title: "Read Status Page Announcement Template",
-        description:
-          "This permission can read Status Page Announcement Templates of this project.",
-        isAssignableToTenant: true,
-        isAccessControlPermission: false,
-        isRolePermission: false,
-        group: PermissionGroup.StatusPage,
-      },
-
       {
         permission: Permission.CreateStatusPageAnnouncement,
         title: "Create Status Page Announcement",
@@ -4841,47 +4771,6 @@ export class PermissionHelper {
         group: PermissionGroup.Settings,
       },
 
-      {
-        permission: Permission.CreateStatusPageDomain,
-        title: "Create Status Page Domain",
-        description:
-          "This permission can create Status Page Domain in this project.",
-        isAssignableToTenant: true,
-        isAccessControlPermission: false,
-        isRolePermission: false,
-        group: PermissionGroup.StatusPage,
-      },
-      {
-        permission: Permission.DeleteStatusPageDomain,
-        title: "Delete Status Page Domain",
-        description:
-          "This permission can delete Status Page Domain in this project.",
-        isAssignableToTenant: true,
-        isAccessControlPermission: false,
-        isRolePermission: false,
-        group: PermissionGroup.StatusPage,
-      },
-      {
-        permission: Permission.EditStatusPageDomain,
-        title: "Edit Status Page Domain",
-        description:
-          "This permission can edit Status Page Domain in this project.",
-        isAssignableToTenant: true,
-        isAccessControlPermission: false,
-        isRolePermission: false,
-        group: PermissionGroup.StatusPage,
-      },
-      {
-        permission: Permission.ReadStatusPageDomain,
-        title: "Read Status Page Domain",
-        description:
-          "This permission can read Status Page Domain in this project.",
-        isAssignableToTenant: true,
-        isAccessControlPermission: false,
-        isRolePermission: false,
-        group: PermissionGroup.StatusPage,
-      },
-
       {
         permission: Permission.CreateIncidentSeverity,
         title: "Create Incident Severity",
@@ -10046,7 +9935,7 @@ export class PermissionHelper {
         permission: Permission.CreateScheduledMaintenanceTemplateOwnerUser,
         title: "Create Scheduled Maintenance Template User Owner",
         description:
-          "This permission can create Scheduled Maintenance Template User Owner this project.",
+          "This permission can create Scheduled Maintenance Template User Owner in this project.",
         isAssignableToTenant: true,
         isAccessControlPermission: false,
         isRolePermission: false,
@@ -10085,9 +9974,9 @@ export class PermissionHelper {
 
       {
         permission: Permission.CreateScheduledMaintenanceTemplateOwnerTeam,
-        title: "Create Scheduled Maintenance Template User Team",
+        title: "Create Scheduled Maintenance Template Team Owner",
         description:
-          "This permission can create Scheduled Maintenance Template User Owner this project.",
+          "This permission can create Scheduled Maintenance Template Team Owner in this project.",
         isAssignableToTenant: true,
         isAccessControlPermission: false,
         isRolePermission: false,
@@ -10095,9 +9984,9 @@ export class PermissionHelper {
       },
       {
         permission: Permission.DeleteScheduledMaintenanceTemplateOwnerTeam,
-        title: "Delete Scheduled Maintenance Template User Team",
+        title: "Delete Scheduled Maintenance Template Team Owner",
         description:
-          "This permission can delete Scheduled Maintenance Template User Owner of this project.",
+          "This permission can delete Scheduled Maintenance Template Team Owner of this project.",
         isAssignableToTenant: true,
         isAccessControlPermission: false,
         isRolePermission: false,
@@ -10105,9 +9994,9 @@ export class PermissionHelper {
       },
       {
         permission: Permission.EditScheduledMaintenanceTemplateOwnerTeam,
-        title: "Edit Scheduled Maintenance Template User Team",
+        title: "Edit Scheduled Maintenance Template Team Owner",
         description:
-          "This permission can edit Scheduled Maintenance Template User Owner of this project.",
+          "This permission can edit Scheduled Maintenance Template Team Owner of this project.",
         isAssignableToTenant: true,
         isAccessControlPermission: false,
         isRolePermission: false,
@@ -10115,9 +10004,9 @@ export class PermissionHelper {
       },
       {
         permission: Permission.ReadScheduledMaintenanceTemplateOwnerTeam,
-        title: "Read Scheduled Maintenance Template User Team",
+        title: "Read Scheduled Maintenance Template Team Owner",
         description:
-          "This permission can read Scheduled Maintenance Template User Owner of this project.",
+          "This permission can read Scheduled Maintenance Template Team Owner of this project.",
         isAssignableToTenant: true,
         isAccessControlPermission: false,
         isRolePermission: false,
@@ -10778,47 +10667,6 @@ export class PermissionHelper {
         group: PermissionGroup.Incident,
       },
 
-      {
-        permission: Permission.CreateStatusPageOwnerTeam,
-        title: "Create Status Page Team Owner",
-        description:
-          "This permission can create Status Page Team Owner this project.",
-        isAssignableToTenant: true,
-        isAccessControlPermission: false,
-        isRolePermission: false,
-        group: PermissionGroup.StatusPage,
-      },
-      {
-        permission: Permission.DeleteStatusPageOwnerTeam,
-        title: "Delete Status Page Team Owner",
-        description:
-          "This permission can delete Status Page Team Owner of this project.",
-        isAssignableToTenant: true,
-        isAccessControlPermission: false,
-        isRolePermission: false,
-        group: PermissionGroup.StatusPage,
-      },
-      {
-        permission: Permission.EditStatusPageOwnerTeam,
-        title: "Edit Status Page Team Owner",
-        description:
-          "This permission can edit Status Page Team Owner of this project.",
-        isAssignableToTenant: true,
-        isAccessControlPermission: false,
-        isRolePermission: false,
-        group: PermissionGroup.StatusPage,
-      },
-      {
-        permission: Permission.ReadStatusPageOwnerTeam,
-        title: "Read Status Page Team Owner",
-        description:
-          "This permission can read Status Page Team Owner of this project.",
-        isAssignableToTenant: true,
-        isAccessControlPermission: false,
-        isRolePermission: false,
-        group: PermissionGroup.StatusPage,
-      },
-
       {
         permission: Permission.CreateStatusPageOwnerUser,
         title: "Create Status Page User Owner",

package/Types/Probe/ProbeMonitorResponse.ts

@@ -17,6 +17,7 @@ import ExternalStatusPageMonitorResponse from "../Monitor/ExternalStatusPageMoni
 import HttpPhaseTimings from "../Monitor/HttpPhaseTimings";
 import MonitorEvaluationSummary from "../Monitor/MonitorEvaluationSummary";
 import NetworkPathTrace from "../Monitor/NetworkMonitor/NetworkPathTrace";
+import PortMonitorTimings from "../Monitor/PortMonitor/PortMonitorTimings";
 import ObjectID from "../ObjectID";
 import Port from "../Port";
 import ProbeAttempt from "./ProbeAttempt";
@@ -58,6 +59,11 @@ export default interface ProbeMonitorResponse {
    * checks. Absent when the request went through a proxy.
    */
   httpTimings?: HttpPhaseTimings | undefined;
+  /*
+   * DNS / TCP / total connection timing for Port checks. DNS is absent for
+   * IP literals. Also present when Ping/IP checks use the Port fallback.
+   */
+  portTimings?: PortMonitorTimings | undefined;
   dnsResponse?: DnsMonitorResponse | undefined;
   domainResponse?: DomainMonitorResponse | undefined;
   dnssecResponse?: DnssecMonitorResponse | undefined;

package/UI/Components/BulkUpdate/BulkUpdateForm.tsx

@@ -201,9 +201,7 @@ const BulkUpdateForm: <T extends GenericObject>(
     let itemClassName: string = "";
     let iconClassName: string = "";
 
-    if (isDisabled) {
-      itemClassName = "opacity-50 cursor-not-allowed hover:bg-transparent";
-    } else if (isDanger) {
+    if (!isDisabled && isDanger) {
       itemClassName = "text-red-700 hover:text-red-800 hover:bg-red-50";
       iconClassName = "text-red-400 group-hover:text-red-500";
     }
@@ -215,6 +213,7 @@ const BulkUpdateForm: <T extends GenericObject>(
         icon={button.icon}
         className={itemClassName}
         iconClassName={iconClassName}
+        isDisabled={isDisabled}
         onClick={() => {
           triggerButtonClick(button);
         }}

package/UI/Components/CustomFields/CustomFieldsDetail.tsx

@@ -51,14 +51,41 @@ export interface ComponentProps {
   customFieldType: DatabaseBaseModelType;
   projectId: ObjectID;
   name: string;
-  isEditable?: boolean;
+  isEditable?: boolean | undefined;
+  /*
+   * For call sites that mount this card unconditionally - the resource
+   * overview pages - where most projects have never defined a custom field.
+   *
+   * With this set the card renders NOTHING until it knows the project has at
+   * least one field of this type: no loader flash and no "no custom fields
+   * have been added" placeholder occupying a slot on a page the operator
+   * opened to look at something else.
+   *
+   * It also hides on a load failure, because reading the schema is gated on
+   * both a permission and a billing plan. Without that, every incident a
+   * project below the custom-fields plan opens would carry an error card it
+   * can do nothing about. The dedicated Custom Fields page mounts this same
+   * component WITHOUT the flag, so anyone who goes looking still sees the
+   * real reason.
+   */
+  hideIfEmpty?: boolean | undefined;
 }
 
 const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   const [schemaList, setSchemaList] = useState<Array<BaseModel>>([]);
-  const [error, setError] = useState<string>("");
+  /*
+   * Read failures and write failures are kept apart because hideIfEmpty
+   * treats them oppositely. Failing to READ the schema is something an
+   * overview page swallows - the project may simply not be on a plan that
+   * includes custom fields, and there is nothing the operator can do about it
+   * on an incident page. Failing to WRITE is the operator's own edit coming
+   * back rejected, and must be reported wherever it happens. Sharing one slot
+   * meant a rejected save made the whole card disappear.
+   */
+  const [loadError, setLoadError] = useState<string>("");
+  const [saveError, setSaveError] = useState<string>("");
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [model, setModel] = useState<BaseModel | null>(null);
   const [showModelForm, setShowModelForm] = useState<boolean>(false);
@@ -67,6 +94,7 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
     try {
       // load schema.
       setIsLoading(true);
+      setLoadError("");
 
       const schemaList: ListResult<BaseModel> =
         await ModelAPI.getList<BaseModel>({
@@ -99,7 +127,7 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
       setIsLoading(false);
     } catch (err) {
       setIsLoading(false);
-      setError(API.getFriendlyMessage(err));
+      setLoadError(API.getFriendlyMessage(err));
     }
   };
 
@@ -109,6 +137,7 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
     try {
       // load schema.
       setIsLoading(true);
+      setSaveError("");
       setShowModelForm(false);
 
       await ModelAPI.updateById({
@@ -122,7 +151,7 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
       await onLoad();
     } catch (err) {
       setIsLoading(false);
-      setError(API.getFriendlyMessage(err));
+      setSaveError(API.getFriendlyMessage(err));
     }
   };
 
@@ -132,12 +161,45 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
 
   const isEditable: boolean = props.isEditable !== false;
 
+  /*
+   * schemaList is empty both before the first load finishes and when the
+   * project genuinely has no fields of this type, which is exactly when an
+   * overview page should show nothing - so one check covers both.
+   *
+   * `!model` covers the record itself coming back empty. On a page that is
+   * plainly displaying that record, a card announcing "Item not found" is a
+   * contradiction; showing nothing is the honest version.
+   *
+   * Deliberately NOT saveError: a rejected save has to stay on screen, and it
+   * leaves schemaList and model intact, so the card keeps rendering.
+   */
+  if (
+    props.hideIfEmpty &&
+    (Boolean(loadError) || schemaList.length === 0 || !model)
+  ) {
+    return <></>;
+  }
+
+  /*
+   * There has to be something to edit before the button is worth offering:
+   * the modal reads its initial values off the record and its inputs off the
+   * schema, so opening it mid-load threw on a null record, and opening it
+   * with no fields defined produced a form with nothing in it.
+   *
+   * A failed LOAD needs no term of its own - it leaves schemaList empty and
+   * model null, which the checks below already cover. A failed SAVE must not
+   * take the button away, or the error message is telling the operator to
+   * retry something they can no longer reach.
+   */
+  const canEdit: boolean =
+    isEditable && !isLoading && schemaList.length > 0 && Boolean(model);
+
   return (
     <Card
       title={props.title}
       description={props.description}
       buttons={
-        isEditable
+        canEdit
           ? [
               {
                 title: "Edit Fields",
@@ -152,14 +214,26 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
       }
     >
       <div className="border-t border-gray-200 px-4 py-5 sm:px-6 -m-6 -mt-2">
-        {isLoading && !error && <ComponentLoader />}
-        {!isLoading && !error && schemaList.length === 0 && (
+        {isLoading && !loadError && <ComponentLoader />}
+        {!isLoading && !loadError && schemaList.length === 0 && (
           <ErrorMessage message="No custom fields have been added for this resource. You may add custom fields in Project Settings." />
         )}
-        {error && <ErrorMessage message={error} />}
-        {!model && <ErrorMessage message={"Item not found"} />}
+        {loadError && <ErrorMessage message={loadError} />}
+        {/*
+         * Above the values, which are still the ones on the record: the save
+         * did not happen, so what is on screen below is what is stored.
+         */}
+        {saveError && <ErrorMessage message={saveError} />}
+        {/*
+         * Only once the fetch has settled: model is null on the very first
+         * render too, and announcing "Item not found" while the request is
+         * still in flight reads as a broken record rather than a pending one.
+         */}
+        {!isLoading && !loadError && schemaList.length > 0 && !model && (
+          <ErrorMessage message={"Item not found"} />
+        )}
 
-        {!isLoading && !error && model && (
+        {!isLoading && !loadError && schemaList.length > 0 && model && (
           <Detail
             id={props.name}
             item={(model as any)["customFields"] || {}}
@@ -194,7 +268,7 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
               await onSave(data).catch();
             }}
             formProps={{
-              initialValues: (model as any)["customFields"] || {},
+              initialValues: (model as any)?.["customFields"] || {},
               fields: schemaList.map((schemaItem: BaseModel) => {
                 const isDropdown: boolean =
                   (schemaItem as any).customFieldType ===

package/UI/Components/ErrorBoundary.tsx

@@ -1,4 +1,12 @@
-import React, { FunctionComponent, ReactElement, ReactNode } from "react";
+import { downloadErrorSupportBundle } from "../Utils/ErrorSupportBundle";
+import React, {
+  ErrorInfo,
+  FunctionComponent,
+  ReactElement,
+  ReactNode,
+  useRef,
+  useState,
+} from "react";
 import {
   ErrorBoundary as NativeErrorBoundary,
   FallbackProps,
@@ -14,7 +22,22 @@ export interface ComponentProps {
    */
   resetKey?: string | undefined;
   /** Notified for every caught error. Used by tests and by callers that report. */
-  onError?: ((error: Error) => void) | undefined;
+  onError?: ((error: Error, errorInfo: ErrorInfo) => void) | undefined;
+}
+
+interface CapturedErrorDetails {
+  error: unknown;
+  componentStack: string | null;
+  digest: string | null;
+  capturedAt: string;
+}
+
+type GetCapturedErrorDetailsFunction = (
+  error: unknown,
+) => CapturedErrorDetails | null;
+
+interface FallbackComponentProps extends FallbackProps {
+  getCapturedErrorDetails?: GetCapturedErrorDetailsFunction | undefined;
 }
 
 /**
@@ -146,17 +169,45 @@ export const handleChunkLoadError: HandleChunkLoadErrorFunction = (
   return true;
 };
 
-export const Fallback: FunctionComponent<FallbackProps> = (
-  props: FallbackProps,
+export const Fallback: FunctionComponent<FallbackComponentProps> = (
+  props: FallbackComponentProps,
 ): ReactElement => {
+  const [supportBundleStatus, setSupportBundleStatus] = useState<string>("");
   const errorMessage: string =
     props.error && typeof props.error.message === "string"
       ? props.error.message
       : "";
 
+  type DownloadSupportBundleFunction = () => void;
+
+  const downloadSupportBundle: DownloadSupportBundleFunction = (): void => {
+    setSupportBundleStatus("");
+
+    try {
+      const capturedErrorDetails: CapturedErrorDetails | null =
+        props.getCapturedErrorDetails?.(props.error) || null;
+
+      downloadErrorSupportBundle({
+        error: props.error,
+        componentStack: capturedErrorDetails?.componentStack,
+        digest: capturedErrorDetails?.digest,
+        capturedAt: capturedErrorDetails?.capturedAt,
+      });
+
+      setSupportBundleStatus(
+        "Support bundle downloaded. Review it, then attach it when contacting OneUptime Support.",
+      );
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error("Unable to download the error support bundle:", error);
+      setSupportBundleStatus(
+        "The support bundle could not be downloaded. Please try again.",
+      );
+    }
+  };
+
   return (
     <div
-      role="alert"
       data-testid="error-boundary-fallback"
       style={{
         minHeight: "60vh",
@@ -170,8 +221,8 @@ export const Fallback: FunctionComponent<FallbackProps> = (
         textAlign: "center",
       }}
     >
-      <div style={{ maxWidth: "32rem" }}>
-        <div style={{ fontWeight: 600, marginBottom: "0.5rem" }}>
+      <div style={{ maxWidth: "40rem" }}>
+        <div role="alert" style={{ fontWeight: 600, marginBottom: "0.5rem" }}>
           An unexpected error has occurred. Please reload the page to continue
         </div>
         <div
@@ -189,6 +240,7 @@ export const Fallback: FunctionComponent<FallbackProps> = (
             display: "flex",
             gap: "0.75rem",
             justifyContent: "center",
+            flexWrap: "wrap",
           }}
         >
           <button
@@ -225,6 +277,45 @@ export const Fallback: FunctionComponent<FallbackProps> = (
           >
             Reload page
           </button>
+          <button
+            type="button"
+            data-testid="error-boundary-download-support-bundle"
+            onClick={downloadSupportBundle}
+            style={{
+              padding: "0.5rem 1rem",
+              borderRadius: "0.375rem",
+              border: "1px solid var(--ou-border-primary, #d1d5db)",
+              backgroundColor: "transparent",
+              color: "inherit",
+              cursor: "pointer",
+            }}
+          >
+            Download support bundle
+          </button>
+        </div>
+        <div
+          style={{
+            marginTop: "1rem",
+            fontSize: "0.75rem",
+            color: "var(--ou-text-secondary, #6b7280)",
+          }}
+        >
+          Download a local diagnostics file with the error stack, component
+          stack, scrubbed page URL, browser details, and OneUptime build. It
+          never reads cookies, saved browser data, or form contents. Review it
+          before sharing it with OneUptime Support.
+        </div>
+        <div
+          role="status"
+          data-testid="error-boundary-support-bundle-status"
+          style={{
+            minHeight: "1rem",
+            marginTop: "0.75rem",
+            fontSize: "0.75rem",
+            color: "var(--ou-text-secondary, #6b7280)",
+          }}
+        >
+          {supportBundleStatus}
         </div>
         {errorMessage ? (
           <div
@@ -249,9 +340,22 @@ export const Fallback: FunctionComponent<FallbackProps> = (
 const ErrorBoundary: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  type OnErrorFunction = (error: Error) => void;
+  const capturedErrorDetailsRef: React.MutableRefObject<CapturedErrorDetails | null> =
+    useRef<CapturedErrorDetails | null>(null);
+
+  type OnErrorFunction = (error: Error, errorInfo: ErrorInfo) => void;
+
+  const onError: OnErrorFunction = (
+    error: Error,
+    errorInfo: ErrorInfo,
+  ): void => {
+    capturedErrorDetailsRef.current = {
+      error: error,
+      componentStack: errorInfo.componentStack || null,
+      digest: errorInfo.digest || null,
+      capturedAt: new Date().toISOString(),
+    };
 
-  const onError: OnErrorFunction = (error: Error): void => {
     /*
      * Surface the error. Without this the only trace of a crash is the blank
      * screen itself, because the boundary swallows what React would otherwise
@@ -263,13 +367,36 @@ const ErrorBoundary: FunctionComponent<ComponentProps> = (
     // A stale bundle recovers by reloading, so do that instead of blaming the user.
     handleChunkLoadError(error);
 
-    props.onError?.(error);
+    props.onError?.(error, errorInfo);
+  };
+
+  const getCapturedErrorDetails: GetCapturedErrorDetailsFunction = (
+    error: unknown,
+  ): CapturedErrorDetails | null => {
+    if (
+      !capturedErrorDetailsRef.current ||
+      !Object.is(capturedErrorDetailsRef.current.error, error)
+    ) {
+      return null;
+    }
+
+    return capturedErrorDetailsRef.current;
   };
 
   return (
     <NativeErrorBoundary
-      FallbackComponent={Fallback}
+      fallbackRender={(fallbackProps: FallbackProps): ReactElement => {
+        return (
+          <Fallback
+            {...fallbackProps}
+            getCapturedErrorDetails={getCapturedErrorDetails}
+          />
+        );
+      }}
       onError={onError}
+      onReset={() => {
+        capturedErrorDetailsRef.current = null;
+      }}
       resetKeys={[props.resetKey]}
     >
       {props.children}