@vtex/faststore-plugin-buyer-portal 1.3.12 → 1.3.14

package/CHANGELOG.md

@@ -7,6 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.14] - 2025-11-03
+
+### Fixed
+
+- Click outside on Dropdown are now properly closing the dropdown on Budget allocation selection
+
+## [1.3.13] - 2025-11-03
+
+- Setup OTLP to send log events on error boundary
+
 ## [1.3.12] - 2025-10-30
 
 ### Added
@@ -171,7 +181,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add CHANGELOG file
 - Add README file
 
-[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.12...HEAD
+[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.14...HEAD
 [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.2.2...1.2.3
 [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.3
 [1.2.4]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.4
@@ -183,5 +193,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [1.3.9]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.8...v1.3.9
 [1.3.8]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.7...v1.3.8
 [1.3.7]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.7
+
+# <<<<<<< HEAD
+
+[1.3.14]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.13...v1.3.14
+[1.3.13]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.12...v1.3.13
 [1.3.12]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.11...v1.3.12
-[1.3.11]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.11
+
+> > > > > > > main
+> > > > > > > [1.3.11]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "1.3.12",
+  "version": "1.3.14",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
   "scripts": {

package/src/features/budgets/components/BudgetAllocationsSelection/BudgetAllocationsSelection.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import {
   Checkbox,
@@ -16,6 +16,7 @@ import { getTableColumns } from "../../../shared/components/Table/utils/tableCol
 import { useBuyerPortal } from "../../../shared/hooks";
 import { IPagination } from "../../../shared/types";
 import { Dictionary } from "../../../shared/utils";
+import { useClickOutside } from "../../hooks";
 
 import type { BudgetAllocationsSelectionDataType } from "../../types";
 
@@ -48,12 +49,19 @@ export const BudgetAllocationsSelection = ({
   onSortChange,
   setFilter,
 }: BudgetAllocationsSelectionProps) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
   const { currentContract: contract } = useBuyerPortal();
+
   const options = Object.keys(sortingOptions);
 
   const svgProps = { width: 10, height: 10 };
   const selectAllRef = useRef<HTMLInputElement>(null);
 
+  const dropdownRef = useClickOutside<HTMLDivElement>(() => {
+    setIsDropdownOpen(false);
+  });
+
   const updateCurrentSort = (newSort: string) => {
     onSortChange(newSort);
   };
@@ -155,8 +163,11 @@ export const BudgetAllocationsSelection = ({
   return (
     <div data-fs-bp-budget-allocation-table>
       <div data-fs-bp-budget-allocation-wrapper>
-        <Dropdown>
-          <DropdownButton data-fs-bp-budget-allocation-select-current>
+        <Dropdown isOpen={isDropdownOpen}>
+          <DropdownButton
+            data-fs-bp-budget-allocation-select-current
+            onClick={() => setIsDropdownOpen((prev) => !prev)}
+          >
             {currentSort}
             <Icon
               name="CaretRight"
@@ -166,21 +177,27 @@ export const BudgetAllocationsSelection = ({
             />
           </DropdownButton>
           <DropdownMenu align="left">
-            {options.map((option) => (
-              <DropdownItem
-                key={option}
-                onClick={() => updateCurrentSort(option)}
-                data-fs-bp-budget-allocation-select-item
-                data-fs-bp-budget-allocation-selected={currentSort === option}
-              >
-                <div data-fs-bp-budget-allocation-selected-wrapper>
-                  <span>{option}</span>
-                  {currentSort === option && (
-                    <Icon name="Check" width={16} height={16} />
-                  )}
-                </div>
-              </DropdownItem>
-            ))}
+            <div ref={dropdownRef}>
+              {options.map((option) => (
+                <DropdownItem
+                  key={option}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    updateCurrentSort(option);
+                    setIsDropdownOpen(false);
+                  }}
+                  data-fs-bp-budget-allocation-select-item
+                  data-fs-bp-budget-allocation-selected={currentSort === option}
+                >
+                  <div data-fs-bp-budget-allocation-selected-wrapper>
+                    <span>{option}</span>
+                    {currentSort === option && (
+                      <Icon name="Check" width={16} height={16} />
+                    )}
+                  </div>
+                </DropdownItem>
+              ))}
+            </div>
           </DropdownMenu>
         </Dropdown>
 

package/src/features/budgets/components/BudgetAllocationsSelection/budget-allocations-selection.scss

@@ -137,5 +137,6 @@
 		align-items: center;
 		justify-content: space-between;
 		width: 100%;
+		gap: var(--fs-spacing-2);
 	}
 }

package/src/features/budgets/hooks/index.ts

@@ -8,3 +8,4 @@ export { useListBudgets } from "./useListBudgets";
 export { useUpdateBudget } from "./useUpdateBudget";
 export { useListUsers } from "./useListUsers";
 export { useListAddresses } from "./useListAddressess";
+export { useClickOutside } from "./useClickOutside";

package/src/features/budgets/hooks/useClickOutside.ts

@@ -0,0 +1,26 @@
+import { RefObject, useEffect, useRef } from "react";
+
+export function useClickOutside<T extends HTMLElement>(
+  callback: () => void
+): RefObject<T> {
+  const ref = useRef<T>(null);
+  const callbackRef = useRef(callback);
+
+  // Update callbackRef to always hold the latest callback
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    const handleClick = (event: Event) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        callbackRef.current();
+      }
+    };
+
+    document.addEventListener("click", handleClick, true);
+    return () => document.removeEventListener("click", handleClick, true);
+  }, []);
+
+  return ref;
+}

package/src/features/custom-fields/layouts/CustomFieldsLayout/CustomFieldsLayout.tsx

@@ -62,7 +62,7 @@ export const CustomFieldsLayout = ({
   const lastSearchValue = useRef(filter.search);
   const contractId = contract?.id ?? "";
   const unitId = orgUnit?.id ?? "";
-  const cookie = clientContext.cookie;
+  const cookie = clientContext?.cookie ?? "";
   const debouncedSearchValue = useDebounce(filter.search, 500);
 
   useEffect(() => {

package/src/features/shared/components/ErrorBoundary/ErrorBoundary.tsx

@@ -3,6 +3,7 @@
 import React, { Component, type ReactNode } from "react";
 
 import { ErrorTabsLayout } from "../../layouts/ErrorTabsLayout/ErrorTabsLayout";
+import { logError } from "../../services/logger";
 import { isPluginError } from "../../utils/isPluginError";
 
 interface Props {
@@ -35,8 +36,26 @@ export class ErrorBoundary extends Component<Props, State> {
   }
 
   componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-    if (isPluginError(error) && this.props.onError) {
-      this.props.onError(error, errorInfo);
+    if (isPluginError(error)) {
+      // Automatically send error logs to OTLP endpoint
+      const metadata = {
+        "error.message": error.message,
+        "error.name": error.name,
+        "error.stack": error.stack || "No stack trace available",
+        "error.component": this.props.tags?.component || "Unknown",
+        "error.type": this.props.tags?.errorType || "Unknown",
+        "error.info":
+          errorInfo.componentStack || "No component stack available",
+      };
+
+      Promise.resolve().then(() =>
+        logError(`ErrorBoundary caught error: ${error.message}`, metadata)
+      );
+
+      // Call custom onError handler if provided
+      if (this.props.onError) {
+        this.props.onError(error, errorInfo);
+      }
     }
   }
 

package/src/features/shared/hooks/index.ts

@@ -12,4 +12,5 @@ export { useAddToScope } from "./useAddToScope";
 export { useRemoveFromScope } from "./useRemoveFromScope";
 export { usePageItems, type UsePageItemsProps } from "./usePageItems";
 export { useRouterLoading } from "./useRouterLoading";
+export { useLogger } from "./useLogger";
 export { useGetDependenciesVersion } from "./useGetDependenciesVersion";

package/src/features/shared/hooks/useLogger.ts

@@ -0,0 +1,72 @@
+import { useContext } from "react";
+
+import { BuyerPortalContext } from "../components/BuyerPortalProvider/BuyerPortalProvider";
+import { logError, logInfo, logWarn } from "../services/logger";
+
+import type { LogContext, LogMetadata } from "../services/logger";
+
+/**
+ * Hook to access logger functionality with automatic context enrichment
+ * from BuyerPortalContext
+ */
+export function useLogger() {
+  const buyerPortalContext = useContext(BuyerPortalContext);
+
+  /**
+   * Get additional context from BuyerPortalContext if available
+   */
+  const getAdditionalContext = (): Partial<LogContext> => {
+    if (!buyerPortalContext) {
+      return {};
+    }
+
+    const context: Partial<LogContext> = {};
+
+    if (buyerPortalContext.currentOrgUnit?.id) {
+      context.orgUnitId = buyerPortalContext.currentOrgUnit.id;
+    }
+
+    if (buyerPortalContext.currentUser?.id) {
+      context.userId = buyerPortalContext.currentUser.id;
+    }
+
+    if (buyerPortalContext.clientContext?.customerId) {
+      context.customerId = buyerPortalContext.clientContext.customerId;
+    }
+
+    return context;
+  };
+
+  /**
+   * Log an error message with optional metadata
+   */
+  const error = (message: string, metadata?: LogMetadata): Promise<void> => {
+    const context = getAdditionalContext();
+
+    return logError(message, metadata, context);
+  };
+
+  /**
+   * Log a warning message with optional metadata
+   */
+  const warn = (message: string, metadata?: LogMetadata): Promise<void> => {
+    const context = getAdditionalContext();
+
+    return logWarn(message, metadata, context);
+  };
+
+  /**
+   * Log an info message with optional metadata
+   */
+  const info = (message: string, metadata?: LogMetadata): Promise<void> => {
+    const context = getAdditionalContext();
+
+    return logInfo(message, metadata, context);
+  };
+
+  return {
+    error,
+    warn,
+    info,
+  };
+}

package/src/features/shared/hooks/usePageItems.ts

@@ -26,13 +26,13 @@ export type UsePageItemsProps<T> = {
 };
 
 export const usePageItems = <T>({
-  initialItems,
+  initialItems = [],
   search,
   page = 1,
   searchParam = SEARCH_PARAMS.DEFAULT,
   pageParam = PAGE_PARAMS.DEFAULT,
 }: UsePageItemsProps<T>) => {
-  const [items, setItems] = useState<T[]>(initialItems ?? []);
+  const [items, setItems] = useState<T[]>(initialItems);
   const [total, setTotal] = useState<number>(initialItems.length);
   const [searchTerm, setSearchTerm] = useState(search ?? "");
   const [isLoading, setIsLoading] = useState(false);

package/src/features/shared/services/index.ts

@@ -10,6 +10,7 @@ export {
   validateAccessService,
   type ValidateAccessServiceProps,
 } from "./validate-access.service";
+export * from "./logger";
 export {
   getDependenciesVersionService,
   type GetDependenciesVersionProps,

package/src/features/shared/services/logger/constants.ts

@@ -0,0 +1,49 @@
+import { CURRENT_VERSION } from "../../utils/constants";
+
+import { LogLevel, SeverityNumber } from "./types";
+
+/**
+ * OTLP Endpoints for VTEX Observability
+ */
+export const OTLP_ENDPOINTS = {
+  PRODUCTION: "https://stable.vtexobservability.com/v1/logs",
+  DEVELOPMENT: "https://beta.vtexobservability.com/v1/logs",
+} as const;
+
+/**
+ * Service resource attributes
+ */
+export const SERVICE_NAME = "faststore-plugin-buyer-portal";
+export const SERVICE_VERSION = CURRENT_VERSION;
+export const SERVICE_INDEX = "b2b_organization_account";
+
+/**
+ * Scope name for logs
+ */
+export const SCOPE_NAME = "buyer-portal-web";
+
+/**
+ * Map log levels to OTLP severity numbers
+ */
+export const SEVERITY_MAP: Record<LogLevel, SeverityNumber> = {
+  INFO: SeverityNumber.INFO,
+  WARN: SeverityNumber.WARN,
+  ERROR: SeverityNumber.ERROR,
+};
+
+/**
+ * Attribute keys for structured logging
+ */
+export const LOG_ATTRIBUTES = {
+  ERROR_MESSAGE: "error.message",
+  ERROR_STACK: "error.stack",
+  ERROR_COMPONENT: "error.component",
+  ERROR_TYPE: "error.type",
+  ACCOUNT: "account",
+  ENVIRONMENT: "environment",
+  URL: "url",
+  USER_AGENT: "user_agent",
+  ORG_UNIT_ID: "org_unit_id",
+  USER_ID: "user_id",
+  CUSTOMER_ID: "customer_id",
+} as const;

package/src/features/shared/services/logger/context.ts

@@ -0,0 +1,46 @@
+import storeConfig from "discovery.config";
+
+import { isDevelopment } from "../../utils/environment";
+
+import type { LogContext } from "./types";
+
+/**
+ * Collect log context from the application environment
+ * Gathers account, environment, URL, user agent, and other metadata
+ */
+export function collectLogContext(
+  additionalContext?: Partial<LogContext>
+): LogContext {
+  const context: LogContext = {
+    environment: isDevelopment() ? "development" : "production",
+  };
+
+  // Collect browser context only if in browser environment
+  if (typeof window !== "undefined") {
+    context.url = window.location.href;
+    context.userAgent = navigator.userAgent;
+  }
+
+  // Get VTEX account from store config
+  if (storeConfig?.api?.storeId) {
+    context.account = storeConfig.api.storeId;
+  }
+
+  // Merge with additional context provided
+  if (additionalContext) {
+    Object.assign(context, additionalContext);
+  }
+
+  return context;
+}
+
+/**
+ * Get current timestamp in Unix nanoseconds (OTLP format)
+ * JavaScript Date.now() returns milliseconds, so we multiply by 1,000,000
+ */
+export function getTimestampNano(): string {
+  const milliseconds = Date.now();
+  const nanoseconds = milliseconds * 1_000_000;
+
+  return nanoseconds.toString();
+}

package/src/features/shared/services/logger/index.ts

@@ -0,0 +1,4 @@
+export * from "./types";
+export * from "./constants";
+export * from "./context";
+export * from "./otlp-logger.service";

package/src/features/shared/services/logger/otlp-logger.service.ts

@@ -0,0 +1,241 @@
+import { isDevelopment } from "../../utils/environment";
+
+import {
+  LOG_ATTRIBUTES,
+  OTLP_ENDPOINTS,
+  SCOPE_NAME,
+  SERVICE_INDEX,
+  SERVICE_NAME,
+  SERVICE_VERSION,
+  SEVERITY_MAP,
+} from "./constants";
+import { collectLogContext, getTimestampNano } from "./context";
+
+import type {
+  LogContext,
+  LogMetadata,
+  LogParams,
+  OTLPKeyValue,
+  OTLPLogsPayload,
+} from "./types";
+
+/**
+ * Convert metadata object to OTLP key-value attributes
+ */
+function metadataToAttributes(metadata?: LogMetadata): OTLPKeyValue[] {
+  if (!metadata) {
+    return [];
+  }
+
+  return Object.entries(metadata).map(([key, value]) => {
+    // Handle different value types
+    if (typeof value === "string") {
+      return { key, value: { stringValue: value } };
+    } else if (typeof value === "number") {
+      if (Number.isInteger(value)) {
+        return { key, value: { intValue: value } };
+      } else {
+        return { key, value: { doubleValue: value } };
+      }
+    } else if (typeof value === "boolean") {
+      return { key, value: { boolValue: value } };
+    } else {
+      // Convert complex objects to JSON string
+      return { key, value: { stringValue: JSON.stringify(value) } };
+    }
+  });
+}
+
+/**
+ * Convert log context to OTLP attributes
+ */
+function contextToAttributes(context: LogContext): OTLPKeyValue[] {
+  const attributes: OTLPKeyValue[] = [];
+
+  if (context.account) {
+    attributes.push({
+      key: LOG_ATTRIBUTES.ACCOUNT,
+      value: { stringValue: context.account },
+    });
+  }
+
+  if (context.environment) {
+    attributes.push({
+      key: LOG_ATTRIBUTES.ENVIRONMENT,
+      value: { stringValue: context.environment },
+    });
+  }
+
+  if (context.url) {
+    attributes.push({
+      key: LOG_ATTRIBUTES.URL,
+      value: { stringValue: context.url },
+    });
+  }
+
+  if (context.userAgent) {
+    attributes.push({
+      key: LOG_ATTRIBUTES.USER_AGENT,
+      value: { stringValue: context.userAgent },
+    });
+  }
+
+  if (context.orgUnitId) {
+    attributes.push({
+      key: LOG_ATTRIBUTES.ORG_UNIT_ID,
+      value: { stringValue: context.orgUnitId },
+    });
+  }
+
+  if (context.userId) {
+    attributes.push({
+      key: LOG_ATTRIBUTES.USER_ID,
+      value: { stringValue: context.userId },
+    });
+  }
+
+  if (context.customerId) {
+    attributes.push({
+      key: LOG_ATTRIBUTES.CUSTOMER_ID,
+      value: { stringValue: context.customerId },
+    });
+  }
+
+  return attributes;
+}
+
+/**
+ * Build OTLP logs payload
+ */
+function buildOTLPPayload(params: LogParams): OTLPLogsPayload {
+  const { message, level, metadata, context } = params;
+
+  // Collect full context
+  const fullContext = collectLogContext(context);
+
+  // Build attributes from context and metadata
+  const contextAttributes = contextToAttributes(fullContext);
+  const metadataAttributes = metadataToAttributes(metadata);
+  const allAttributes = [...contextAttributes, ...metadataAttributes];
+
+  // Build OTLP payload structure
+  const payload: OTLPLogsPayload = {
+    resourceLogs: [
+      {
+        resource: {
+          attributes: [
+            {
+              key: "service.name",
+              value: { stringValue: SERVICE_NAME },
+            },
+            {
+              key: "service.version",
+              value: { stringValue: SERVICE_VERSION },
+            },
+            {
+              key: "vtex.search_index",
+              value: { stringValue: SERVICE_INDEX },
+            },
+          ],
+        },
+        scopeLogs: [
+          {
+            scope: {
+              name: SCOPE_NAME,
+              version: SERVICE_VERSION,
+            },
+            logRecords: [
+              {
+                timeUnixNano: getTimestampNano(),
+                severityNumber: SEVERITY_MAP[level],
+                severityText: level,
+                body: {
+                  stringValue: message,
+                },
+                attributes: allAttributes,
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  };
+
+  return payload;
+}
+
+/**
+ * Get the appropriate OTLP endpoint based on environment
+ */
+function getEndpoint(): string {
+  return isDevelopment()
+    ? OTLP_ENDPOINTS.DEVELOPMENT
+    : OTLP_ENDPOINTS.PRODUCTION;
+}
+
+/**
+ * Send log to OTLP endpoint
+ * This function handles errors silently to prevent logging from breaking the app
+ */
+export async function sendOTLPLog(params: LogParams): Promise<void> {
+  try {
+    const payload = buildOTLPPayload(params);
+    const endpoint = getEndpoint();
+
+    const response = await fetch(endpoint, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(payload),
+    });
+
+    if (!response.ok) {
+      // Only log to console in development
+      if (isDevelopment()) {
+        console.warn(
+          `Failed to send log to OTLP endpoint: ${response.status} ${response.statusText}`
+        );
+      }
+    }
+  } catch (error) {
+    // Silently catch errors to prevent logging from breaking the app
+    // Only log to console in development
+    if (isDevelopment()) {
+      console.warn("Error sending log to OTLP endpoint:", error);
+    }
+  }
+}
+
+/**
+ * Convenience function to log an error
+ */
+export function logError(
+  message: string,
+  metadata?: LogMetadata,
+  context?: Partial<LogContext>
+): Promise<void> {
+  return sendOTLPLog({ message, level: "ERROR", metadata, context });
+}
+
+/**
+ * Convenience function to log a warning
+ */
+export function logWarn(
+  message: string,
+  metadata?: LogMetadata,
+  context?: Partial<LogContext>
+): Promise<void> {
+  return sendOTLPLog({ message, level: "WARN", metadata, context });
+}
+
+/**
+ * Convenience function to log info
+ */
+export function logInfo(
+  message: string,
+  metadata?: LogMetadata,
+  context?: Partial<LogContext>
+): Promise<void> {
+  return sendOTLPLog({ message, level: "INFO", metadata, context });
+}

package/src/features/shared/services/logger/types.ts

@@ -0,0 +1,114 @@
+/**
+ * OTLP Log Types
+ * Based on OpenTelemetry Protocol Specification for Logs
+ */
+
+export type LogLevel = "ERROR" | "WARN" | "INFO";
+
+/**
+ * OTLP Severity Number mapping
+ * https://opentelemetry.io/docs/specs/otel/logs/data-model/#field-severitynumber
+ */
+export enum SeverityNumber {
+  UNSPECIFIED = 0,
+  INFO = 9,
+  WARN = 13,
+  ERROR = 17,
+}
+
+/**
+ * OTLP Attribute value types
+ */
+export type OTLPAttributeValue = {
+  stringValue?: string;
+  intValue?: number;
+  doubleValue?: number;
+  boolValue?: boolean;
+};
+
+/**
+ * OTLP Key-Value pair for attributes
+ */
+export type OTLPKeyValue = {
+  key: string;
+  value: OTLPAttributeValue;
+};
+
+/**
+ * OTLP Log Record structure
+ */
+export type OTLPLogRecord = {
+  timeUnixNano: string;
+  severityNumber: SeverityNumber;
+  severityText: LogLevel;
+  body: {
+    stringValue: string;
+  };
+  attributes: OTLPKeyValue[];
+};
+
+/**
+ * OTLP Resource structure
+ */
+export type OTLPResource = {
+  attributes: OTLPKeyValue[];
+};
+
+/**
+ * OTLP Scope structure
+ */
+export type OTLPScope = {
+  name: string;
+  version?: string;
+};
+
+/**
+ * OTLP Scope Logs structure
+ */
+export type OTLPScopeLogs = {
+  scope: OTLPScope;
+  logRecords: OTLPLogRecord[];
+};
+
+/**
+ * OTLP Resource Logs structure
+ */
+export type OTLPResourceLogs = {
+  resource: OTLPResource;
+  scopeLogs: OTLPScopeLogs[];
+};
+
+/**
+ * OTLP Logs Payload (top-level structure)
+ */
+export type OTLPLogsPayload = {
+  resourceLogs: OTLPResourceLogs[];
+};
+
+/**
+ * Log metadata that can be passed to logger functions
+ */
+export type LogMetadata = Record<string, unknown>;
+
+/**
+ * Log context collected from the application
+ */
+export type LogContext = {
+  account?: string;
+  environment: "production" | "development";
+  url?: string;
+  userAgent?: string;
+  orgUnitId?: string;
+  userId?: string;
+  customerId?: string;
+};
+
+/**
+ * Parameters for creating a log entry
+ */
+export type LogParams = {
+  message: string;
+  level: LogLevel;
+  metadata?: LogMetadata;
+  context?: Partial<LogContext>;
+};

package/src/features/shared/utils/constants.ts

@@ -13,4 +13,4 @@ export const LOCAL_STORAGE_LOCATION_EDIT_KEY = "bp_hide_edit_location_confirm";
 export const LOCAL_STORAGE_RECIPIENT_EDIT_KEY =
   "bp_hide_edit_recipient_confirm";
 
-export const CURRENT_VERSION = "1.3.12";
+export const CURRENT_VERSION = "1.3.14";

package/src/features/shared/utils/withClientErrorBoundary.ts

@@ -1,3 +1,5 @@
+import { logError } from "../services/logger";
+
 import { goHome } from "./getHome";
 
 import type { ClientError } from "../clients/Client";
@@ -32,21 +34,40 @@ export function withClientErrorBoundary<TArgs extends unknown[], TReturn>(
     try {
       return await clientFunction(...args);
     } catch (error) {
-      if (onError && error instanceof Error) {
-        const clientError = error as Partial<ClientError>;
-        const requestInfo = {
-          url:
-            typeof clientError.url === "string" ? clientError.url : "unknown",
-          method:
-            typeof clientError.method === "string"
-              ? clientError.method
-              : "unknown",
-          data:
-            clientError.responseData !== undefined
-              ? clientError.responseData
+      const errorObj = error as Error;
+      const clientError = error as Partial<ClientError>;
+
+      // Extract request information
+      const requestInfo = {
+        url: typeof clientError.url === "string" ? clientError.url : "unknown",
+        method:
+          typeof clientError.method === "string"
+            ? clientError.method
+            : "unknown",
+        data:
+          clientError.responseData !== undefined
+            ? clientError.responseData
+            : undefined,
+      };
+
+      Promise.resolve().then(() =>
+        logError(`Client error: ${errorObj.message}`, {
+          "error.message": errorObj.message,
+          "error.name": errorObj.name,
+          "error.stack": errorObj.stack || "No stack trace available",
+          "error.component": componentName || "Unknown",
+          "error.type": "client_error",
+          "client.url": requestInfo.url,
+          "client.method": requestInfo.method,
+          "client.status": clientError.status?.toString() || "unknown",
+          "client.response_data":
+            requestInfo.data !== undefined
+              ? JSON.stringify(requestInfo.data)
               : undefined,
-        };
+        })
+      );
 
+      if (onError && error instanceof Error) {
         onError(error as ClientError, requestInfo);
       }
 

package/src/features/shared/utils/withLoaderErrorBoundary.ts

@@ -1,3 +1,5 @@
+import { logError } from "../services/logger";
+
 import { getClientContext } from "./getClientContext";
 import { serializeLoaderData } from "./serializeLoaderData";
 
@@ -25,6 +27,20 @@ export function withLoaderErrorBoundary<TQuery, TReturn>(
         query: data.query,
       });
 
+      // Log error to OTLP endpoint
+      const errorObj = error as Error;
+
+      Promise.resolve().then(() =>
+        logError(`Loader error: ${errorObj.message}`, {
+          "error.message": errorObj.message,
+          "error.name": errorObj.name,
+          "error.stack": errorObj.stack || "No stack trace available",
+          "error.component": componentName || "Unknown",
+          "error.type": "loader_error",
+          "loader.query": JSON.stringify(data.query),
+        })
+      );
+
       if (onError) {
         onError(error as Error, data.query);
       }
@@ -38,6 +54,21 @@ export function withLoaderErrorBoundary<TQuery, TReturn>(
             `[${componentName || "Loader"}] Failed to get client context:`,
             contextError
           );
+
+          // Log context retrieval error
+          const contextErrorObj = contextError as Error;
+
+          Promise.resolve().then(() =>
+            logError(`Failed to get client context in loader`, {
+              "error.message": contextErrorObj.message,
+              "error.name": contextErrorObj.name,
+              "error.stack":
+                contextErrorObj.stack || "No stack trace available",
+              "error.component": componentName || "Unknown",
+              "error.type": "loader_context_error",
+            })
+          );
+
           clientContext = {
             cookie: "",
             customerId: "",