@oneuptime/common 12.0.4 → 12.0.5

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}

package/UI/Components/Feed/FeedItem.tsx

@@ -24,6 +24,7 @@ export interface FeedItemProps {
   itemDateTime: Date;
   icon: IconProp;
   color: Color;
+  safeMode?: boolean | undefined;
 }
 
 export interface ComponentProps extends FeedItemProps {
@@ -43,7 +44,10 @@ const FeedItem: FunctionComponent<ComponentProps> = (
           title={`More Information`}
           description={
             <div>
-              <MarkdownViewer text={props.moreTextInMarkdown || ""} />
+              <MarkdownViewer
+                text={props.moreTextInMarkdown || ""}
+                safeMode={props.safeMode === true}
+              />
             </div>
           }
           isLoading={false}
@@ -123,7 +127,10 @@ const FeedItem: FunctionComponent<ComponentProps> = (
               <div className="mt-2 text-sm text-gray-700">
                 {props.textInMarkdown && (
                   <div>
-                    <MarkdownViewer text={props.textInMarkdown} />
+                    <MarkdownViewer
+                      text={props.textInMarkdown}
+                      safeMode={props.safeMode === true}
+                    />
                   </div>
                 )}
                 {props.element && <div>{props.element}</div>}

package/UI/Components/ModelDetail/CardModelDetail.tsx

@@ -12,8 +12,6 @@ import Fields from "../Forms/Types/Fields";
 import { FormStep } from "../Forms/Types/FormStep";
 import { ModalWidth } from "../Modal/Modal";
 import ModelFormModal from "../ModelFormModal/ModelFormModal";
-import { ToastType } from "../Toast/Toast";
-import { ShowToastNotification } from "../Toast/ToastInit";
 import ModelDetail, { ComponentProps as ModeDetailProps } from "./ModelDetail";
 import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
 import IconProp from "../../../Types/Icon/IconProp";
@@ -167,16 +165,6 @@ const CardModelDetail: <TBaseModel extends BaseModel>(
           onSuccess={(item: TBaseModel) => {
             setShowModal(false);
             setRefresher(!refresher);
-            /*
-             * The modal just disappears otherwise, which reads as "nothing
-             * happened" - especially on cards that do not display every field
-             * the edit form exposes.
-             */
-            ShowToastNotification({
-              title: "Changes saved",
-              description: `${model.singularName || "Item"} updated successfully.`,
-              type: ToastType.SUCCESS,
-            });
             if (props.onSaveSuccess) {
               props.onSaveSuccess(item);
             }

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -3707,7 +3707,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
                 b.onClick?.();
               }
             }}
-            className={b.disabled ? "opacity-40 pointer-events-none" : ""}
+            isDisabled={b.disabled}
           />
         );
       },

package/UI/Components/MonitorTemplateVariables/TemplateVariablesCatalog.ts

@@ -463,11 +463,21 @@ export default class TemplateVariablesCatalog {
         return {
           title: "Domain",
           variables: [
-            { key: "isOnline", description: "True if WHOIS lookup succeeded." },
+            {
+              key: "isOnline",
+              description: "True if the registration lookup succeeded.",
+            },
             { key: "domainName", description: "Domain queried." },
+            {
+              key: "lookupMethod",
+              description: "Protocol that answered - RDAP or WHOIS.",
+            },
             { key: "registrar", description: "Registrar name." },
             { key: "createdDate", description: "Domain registration date." },
-            { key: "updatedDate", description: "Last WHOIS update." },
+            {
+              key: "updatedDate",
+              description: "Last change to the registration.",
+            },
             { key: "expiresDate", description: "Expiration date." },
             { key: "nameServers", description: "Array of nameservers." },
             { key: "domainStatus", description: "EPP status codes." },