Function showErrorNotification

Source

export function showErrorNotification(
  error: AppError,
  options?: ErrorNotificationOptions,
): void {
  console.error("[ErrorHandling] Error notification:", error.message, error);

  // Import toast at runtime to avoid circular dependencies
  import("sonner")
    .then(({ toast }) => {
      // Build React element description with recovery message and interactive help link
      let description: React.ReactNode | undefined;

      const helpLink = getHelpLinkForErrorType(error.type);
      if (error.recoveryMessage || helpLink) {
        description = React.createElement(
          "div",
          { style: { display: "flex", flexDirection: "column", gap: "8px" } },
          error.recoveryMessage &&
            React.createElement(
              "p",
              { style: { margin: 0 } },
              error.recoveryMessage,
            ),
          helpLink &&
            React.createElement(
              "a",
              {
                href: helpLink,
                target: "_blank",
                rel: "noopener noreferrer",
                style: {
                  color: "inherit",
                  textDecoration: "underline",
                  cursor: "pointer",
                  fontSize: "0.9em",
                  margin: 0,
                },
              },
              "📖 View troubleshooting guide",
            ),
        );
      }

      // Get recovery action button if available
      const actionButton = error.recoveryAction
        ? getRecoveryActionButton(error.recoveryAction, options?.onRetry)
        : null;

      // Determine toast duration based on error type
      const defaultDuration =
        error.type === ErrorType.VALIDATION ? 5000 : 10000;
      const duration = options?.duration ?? defaultDuration;

      // Show the error toast
      toast.error(error.message, {
        description,
        action: actionButton || undefined,
        duration,
        id: options?.toastId,
        onDismiss: options?.onDismiss,
      });
    })
    .catch((toastError) => {
      // Fallback if toast import fails
      console.error(
        "[ErrorHandling] Failed to show toast notification:",
        toastError,
      );
      if (globalThis.window !== undefined) {
        const message = error.recoveryMessage
          ? `${error.message}\n\n${error.recoveryMessage}`
          : error.message;
        alert(`Error: ${message}`);
      }
    });
}
Copy