@gusto/embedded-react-sdk 0.33.0 → 0.35.0-rc.1

package/dist/types/observability.d.ts

@@ -0,0 +1,145 @@
+/**
+ * Observability hook types for error tracking and performance metrics
+ */
+export type ObservabilityErrorType = 'boundary_error' | 'validation_error' | 'internal_error' | 'api_error';
+export type ObservabilityMetricUnit = 'ms' | 'count' | 'bytes' | 'percent';
+export interface ObservabilityErrorContext {
+    /** Name of the component where error occurred */
+    componentName?: string;
+    /** Props passed to the component (sanitized, no sensitive data) */
+    componentProps?: Record<string, unknown>;
+    /** For validation errors, the schema that failed */
+    validationSchema?: string;
+    /** React component stack trace */
+    componentStack?: string;
+    /** Operation ID for API-related errors */
+    operationId?: string;
+    /** HTTP status code for API errors */
+    statusCode?: number;
+    /** Request details for API errors */
+    request?: {
+        url: string;
+        method: string;
+    };
+    /** Any additional context */
+    metadata?: Record<string, unknown>;
+}
+export interface ObservabilityError {
+    /** Type of error that occurred */
+    type: ObservabilityErrorType;
+    /** Human-readable error message */
+    message: string;
+    /** Error stack trace if available */
+    stack?: string;
+    /** Context about where/how the error occurred */
+    context: ObservabilityErrorContext;
+    /**
+     * The original error object (may be undefined when sanitization.includeOriginalError is false)
+     * Default sanitization removes this to prevent PII leakage
+     */
+    originalError?: unknown;
+    /** When the error occurred (Unix timestamp in milliseconds) */
+    timestamp: number;
+}
+export interface ObservabilityMetric {
+    /** Metric name (e.g., 'sdk.form.submit_duration', 'sdk.component.loading_duration') */
+    name: string;
+    /** Metric value */
+    value: number;
+    /** Metric unit */
+    unit?: ObservabilityMetricUnit;
+    /** Tags for filtering/grouping */
+    tags?: Record<string, string>;
+    /** When the metric was recorded (Unix timestamp in milliseconds) */
+    timestamp: number;
+}
+/**
+ * Configuration for data sanitization in observability hooks
+ */
+export interface SanitizationConfig {
+    /**
+     * Whether to sanitize error data. Default: true
+     */
+    enabled?: boolean;
+    /**
+     * Whether to include the original error object. Default: false
+     * WARNING: Original errors may contain sensitive data from form inputs or API responses
+     */
+    includeOriginalError?: boolean;
+    /**
+     * Custom sanitization function for errors
+     */
+    customErrorSanitizer?: (error: ObservabilityError) => ObservabilityError;
+    /**
+     * Custom sanitization function for metrics
+     */
+    customMetricSanitizer?: (metric: ObservabilityMetric) => ObservabilityMetric;
+    /**
+     * Additional field names to treat as sensitive (case-insensitive)
+     */
+    additionalSensitiveFields?: string[];
+}
+/**
+ * Observability hook interface for SDK consumers to implement
+ *
+ * This hook enables error tracking and performance monitoring for the SDK.
+ * Errors caught by error boundaries and validation failures will be reported through onError.
+ * Performance metrics for forms, components, and flows will be reported through onMetric.
+ *
+ * @example
+ * ```tsx
+ * import * as Sentry from '@sentry/react'
+ * import { GustoProvider } from '@gusto/embedded-react-sdk'
+ *
+ * <GustoProvider
+ *   config={{
+ *     baseUrl: '/api/',
+ *     observability: {
+ *       onError: (error) => {
+ *         // Create Error from sanitized data (originalError is undefined by default)
+ *         const sentryError = new Error(error.message)
+ *         sentryError.name = error.type
+ *         if (error.stack) {
+ *           sentryError.stack = error.stack
+ *         }
+ *
+ *         Sentry.captureException(sentryError, {
+ *           level: error.type === 'validation_error' ? 'warning' : 'error',
+ *           tags: {
+ *             error_type: error.type,
+ *             component: error.context.componentName,
+ *           },
+ *         })
+ *       },
+ *       onMetric: (metric) => {
+ *         // Send to your metrics service
+ *         console.log(`[Metric] ${metric.name}: ${metric.value}${metric.unit}`)
+ *       },
+ *       sanitization: {
+ *         enabled: true,
+ *         includeOriginalError: false, // Default: originalError will be undefined
+ *       }
+ *     }
+ *   }}
+ * >
+ *   <YourApp />
+ * </GustoProvider>
+ * ```
+ */
+export interface ObservabilityHook {
+    /**
+     * Called when an error is caught by error boundaries or validation fails
+     * These are errors that prevent a component from rendering or operating correctly
+     */
+    onError?: (error: ObservabilityError) => void;
+    /**
+     * Called to track performance metrics for component operations
+     * Optional - can be used for tracking render times, flow completions, etc.
+     */
+    onMetric?: (metric: ObservabilityMetric) => void;
+    /**
+     * Configuration for sanitizing data before sending to observability tools
+     * Default: { enabled: true, includeOriginalError: false }
+     */
+    sanitization?: SanitizationConfig;
+}

package/docs/reference/endpoint-inventory.json

@@ -776,6 +776,10 @@
         {
           "method": "POST",
           "path": "/v1/companies/:companyId/payrolls"
+        },
+        {
+          "method": "GET",
+          "path": "/v1/companies/:companyId/employees"
         }
       ],
       "variables": [
@@ -815,6 +819,10 @@
           "method": "PUT",
           "path": "/v1/companies/:companyId/payrolls/:payrollId"
         },
+        {
+          "method": "POST",
+          "path": "/v1/payrolls/:payrollUuid/gross_up"
+        },
         {
           "method": "GET",
           "path": "/v1/companies/:companyUuid/payrolls/blockers"
@@ -836,7 +844,8 @@
         "companyId",
         "companyUuid",
         "payScheduleId",
-        "payrollId"
+        "payrollId",
+        "payrollUuid"
       ]
     },
     "Payroll.PayrollEditEmployee": {
@@ -1647,6 +1656,10 @@
           "method": "PUT",
           "path": "/v1/companies/:companyId/payrolls/:payrollId"
         },
+        {
+          "method": "POST",
+          "path": "/v1/payrolls/:payrollUuid/gross_up"
+        },
         {
           "method": "GET",
           "path": "/v1/companies/:companyId/employees"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gusto/embedded-react-sdk",
-  "version": "0.33.0",
+  "version": "0.35.0-rc.1",
   "homepage": "https://github.com/Gusto/embedded-react-sdk",
   "bugs": {
     "url": "https://github.com/Gusto/embedded-react-sdk/issues"
@@ -77,14 +77,14 @@
     "build-storybook": "storybook build"
   },
   "devDependencies": {
-    "@commitlint/cli": "^20.4.3",
-    "@commitlint/config-conventional": "^20.4.3",
+    "@commitlint/cli": "^20.4.4",
+    "@commitlint/config-conventional": "^20.5.0",
     "@eslint/js": "^9.39.2",
     "@playwright/test": "^1.58.2",
-    "@storybook/addon-a11y": "^10.2.14",
-    "@storybook/addon-docs": "^10.2.14",
-    "@storybook/addon-onboarding": "^10.2.14",
-    "@storybook/react-vite": "^10.2.14",
+    "@storybook/addon-a11y": "^10.2.17",
+    "@storybook/addon-docs": "^10.2.17",
+    "@storybook/addon-onboarding": "^10.2.17",
+    "@storybook/react-vite": "^10.2.19",
     "@storybook/test-runner": "^0.24.2",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -94,36 +94,37 @@
     "@types/js-yaml": "^4.0.9",
     "@types/pngjs": "^6.0.5",
     "@types/react": "^19.2.14",
-    "@vitejs/plugin-react-swc": "^3.9.0",
-    "@vitest/coverage-v8": "^3.2.4",
+    "@vitejs/plugin-react-swc": "^4.3.0",
+    "@vitest/coverage-v8": "^4.1.0",
     "axe-core": "^4.11.1",
     "dotenv": "^17.3.1",
-    "eslint": "^9.39.3",
+    "eslint": "^9.39.4",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^6.1.1",
     "eslint-plugin-react-refresh": "^0.4.24",
-    "eslint-plugin-storybook": "^10.2.14",
+    "eslint-plugin-storybook": "^10.2.17",
     "globals": "^17.4.0",
     "husky": "^9.1.7",
     "jest-axe": "^9.0.0",
     "js-yaml": "^4.1.1",
     "jsdom": "^26.1.0",
     "jsdom-testing-mocks": "^1.16.0",
-    "lint-staged": "^16.3.2",
-    "msw": "^2.12.10",
+    "lint-staged": "^16.4.0",
+    "msw": "^2.12.11",
     "npm-run-all": "^4.1.5",
     "pixelmatch": "^7.1.0",
     "pngjs": "^7.0.0",
     "prettier": "^3.8.1",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "sass-embedded": "^1.97.3",
-    "storybook": "^10.2.12",
+    "sass-embedded": "^1.98.0",
+    "storybook": "^10.2.19",
+    "stylelint-config-standard": "^40.0.0",
     "ts-morph": "^27.0.2",
     "tsx": "^4.21.0",
-    "typescript-eslint": "^8.56.1",
+    "typescript-eslint": "^8.57.0",
     "vite": "^6.4.1",
     "vite-plugin-checker": "^0.12.0",
     "vite-plugin-circular-dependency": "^0.5.0",
@@ -131,7 +132,7 @@
     "vite-plugin-externalize-deps": "^0.10.0",
     "vite-plugin-stylelint": "^6.0.4",
     "vite-plugin-svgr": "^4.3.0",
-    "vitest": "^3.2.4"
+    "vitest": "^4.1.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5",
@@ -140,23 +141,23 @@
     "typescript": "^5.8.3"
   },
   "dependencies": {
-    "@gusto/embedded-api": "^0.12.0",
+    "@gusto/embedded-api": "^0.12.2",
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "^5.2.2",
-    "@internationalized/date": "^3.10.0",
+    "@internationalized/date": "^3.12.0",
     "@internationalized/number": "^3.6.5",
     "classnames": "^2.5.1",
     "deepmerge": "^4.3.1",
-    "dompurify": "^3.3.1",
-    "i18next": "^25.8.13",
-    "react-aria": "^3.44.0",
+    "dompurify": "^3.3.3",
+    "i18next": "^25.8.18",
+    "react-aria": "^3.45.0",
     "react-aria-components": "1.13.0",
     "react-error-boundary": "^6.1.1",
     "react-hook-form": "^7.71.2",
-    "react-i18next": "^16.5.4",
+    "react-i18next": "^16.5.8",
     "react-robot": "^1.2.0",
     "robot3": "^1.2.0",
-    "zod": "^3.25.17"
+    "zod": "^4.3.6"
   },
   "sideEffects": [
     "**/*.scss",

package/dist/components/Common/MultiSelectComboBox/MultiSelectComboBox.d.ts

@@ -1,2 +0,0 @@
-import { MultiSelectComboBoxProps } from './MultiSelectComboBoxTypes';
-export declare function MultiSelectComboBox({ className, description, errorMessage, id, isDisabled, isInvalid, isLoading, isRequired, label, name, onSelectionChange, options, placeholder, selectedValues, shouldVisuallyHideLabel, }: MultiSelectComboBoxProps): import("react/jsx-runtime").JSX.Element;