@useinsider/guido 1.0.3-beta.ce4cdcb → 1.0.3-beta.cedc8cb

package/dist/composables/useHttp.js

@@ -1,86 +1,123 @@
-import { getCsrfToken as H } from "../utils/genericUtil.js";
-import { ref as p, computed as T } from "vue";
-const k = (b = {}) => {
-  const h = p(!1), a = p(null), u = p(null), g = T(() => h.value), y = T(() => a.value !== null), v = {
+import { getCsrfToken as S } from "../utils/genericUtil.js";
+import { ref as h, computed as w } from "vue";
+let b;
+const g = async () => {
+  if (!b)
+    try {
+      const { useApiErrorTracking: E } = await import("./useApiErrorTracking.js");
+      b = E();
+    } catch {
+    }
+  return b;
+}, M = (E = {}) => {
+  const d = h(!1), i = h(null), l = h(null), P = w(() => d.value), k = w(() => i.value !== null), v = {
     baseURL: "",
     timeout: 1e4,
     retry: 0,
     retryDelay: 1e3,
     headers: {
       "Content-Type": "application/json",
-      "X-CSRF-TOKEN": H()
+      "X-CSRF-TOKEN": S()
     },
-    ...b
-  }, w = (e, s) => {
-    if (e.startsWith("http://") || e.startsWith("https://"))
-      return e;
-    const t = s || v.baseURL || "";
-    return t.endsWith("/") && e.startsWith("/") ? `${t}${e.slice(1)}` : t.endsWith("/") || e.startsWith("/") ? `${t}${e}` : `${t}/${e}`;
-  }, P = (e) => new Promise((s, t) => {
+    ...E
+  }, C = (t, s) => {
+    if (t.startsWith("http://") || t.startsWith("https://"))
+      return t;
+    const e = s || v.baseURL || "";
+    return e.endsWith("/") && t.startsWith("/") ? `${e}${t.slice(1)}` : e.endsWith("/") || t.startsWith("/") ? `${e}${t}` : `${e}/${t}`;
+  }, A = (t) => new Promise((s, e) => {
     setTimeout(() => {
-      t(new Error("Request timeout"));
-    }, e);
-  }), x = (e) => new Promise((s) => {
-    setTimeout(s, e);
-  }), i = async (e, s, t, D = {}) => {
-    a.value = null, h.value = !0, u.value = new AbortController();
-    const n = { ...v, ...D }, L = w(s, n.baseURL), c = {
-      method: e,
+      e(new Error("Request timeout"));
+    }, t);
+  }), $ = (t) => new Promise((s) => {
+    setTimeout(() => {
+      s();
+    }, t);
+  }), c = async (t, s, e, L = {}) => {
+    i.value = null, d.value = !0, l.value = new AbortController();
+    const n = { ...v, ...L }, T = C(s, n.baseURL), m = {
+      method: t,
       headers: { ...n.headers },
-      signal: u.value.signal,
+      signal: l.value.signal,
       ...n
     };
-    t && ["POST", "PUT", "PATCH"].includes(e) && (t instanceof FormData ? (delete c.headers["Content-Type"], c.body = t) : c.body = JSON.stringify(t));
-    const E = async (m = 0) => {
+    e && ["POST", "PUT", "PATCH"].includes(t) && (e instanceof FormData ? (delete m.headers["Content-Type"], m.body = e) : m.body = JSON.stringify(e));
+    const y = async (f = 0) => {
       try {
-        const o = [fetch(L, c)];
-        n.timeout && o.push(P(n.timeout));
+        const o = [fetch(T, m)];
+        n.timeout && o.push(A(n.timeout));
         const r = await Promise.race(o);
         if (!r.ok) {
-          const O = `HTTP Error: ${r.status} ${r.statusText}`, d = new Error(O);
-          throw d.status = r.status, d.statusText = r.statusText, d.response = r, d;
+          const O = `HTTP Error: ${r.status} ${r.statusText}`, p = new Error(O);
+          p.status = r.status, p.statusText = r.statusText, p.response = r;
+          const x = await g();
+          throw x && x.captureHttpError(p, T, {
+            method: t,
+            statusCode: r.status,
+            statusText: r.statusText
+          }), p;
         }
-        let f;
-        const l = r.headers.get("content-type");
-        return l != null && l.includes("application/json") ? f = await r.json() : l != null && l.includes("text/") ? f = await r.text() : f = await r.blob(), {
-          data: f,
+        let a;
+        const u = r.headers.get("content-type");
+        return u != null && u.includes("application/json") ? a = await r.json() : u != null && u.includes("text/") ? a = await r.text() : a = await r.blob(), {
+          data: a,
           status: r.status,
           statusText: r.statusText,
           headers: r.headers
         };
       } catch (o) {
         const r = o instanceof Error && o.name === "AbortError";
-        if (m < (n.retry || 0) && !r)
-          return await x(n.retryDelay || 1e3), E(m + 1);
-        throw o instanceof Error ? o.name === "AbortError" ? a.value = { message: "Request was cancelled" } : a.value = { message: o.message } : a.value = o, o;
+        if (f < (n.retry || 0) && !r)
+          return await $(n.retryDelay || 1e3), y(f + 1);
+        if (o instanceof Error)
+          if (o.name === "AbortError")
+            i.value = { message: "Request was cancelled" };
+          else {
+            i.value = { message: o.message };
+            const a = await g();
+            a && a.captureNetworkError(o, T, {
+              method: t,
+              attemptNumber: f + 1,
+              timeoutMs: n.timeout
+            });
+          }
+        else {
+          i.value = o;
+          const a = await g();
+          a && o instanceof Error && a.captureNetworkError(o, T, {
+            method: t,
+            attemptNumber: f + 1
+          });
+        }
+        throw o;
       }
     };
     try {
-      return await E();
+      return await y();
     } finally {
-      h.value = !1, u.value = null;
+      d.value = !1, l.value = null;
     }
-  }, C = (e, s) => i("GET", e, void 0, s), $ = (e, s, t) => i("POST", e, s, t), R = (e, s, t) => i("PUT", e, s, t), U = (e, s, t) => i("PATCH", e, s, t), A = (e, s) => i("DELETE", e, void 0, s), W = (e) => {
-    u.value && u.value.abort(e);
-  }, q = () => {
-    a.value = null;
+  }, R = (t, s) => c("GET", t, void 0, s), U = (t, s, e) => c("POST", t, s, e), N = (t, s, e) => c("PUT", t, s, e), W = (t, s, e) => c("PATCH", t, s, e), q = (t, s) => c("DELETE", t, void 0, s), D = (t) => {
+    l.value && l.value.abort(t);
+  }, H = () => {
+    i.value = null;
   };
   return {
     // State
-    loading: g,
-    error: T(() => a.value),
-    hasError: y,
+    loading: P,
+    error: w(() => i.value),
+    hasError: k,
     // Methods
-    request: i,
-    get: C,
-    post: $,
-    put: R,
-    patch: U,
-    delete: A,
-    cancel: W,
-    clearError: q
+    request: c,
+    get: R,
+    post: U,
+    put: N,
+    patch: W,
+    delete: q,
+    cancel: D,
+    clearError: H
   };
 };
 export {
-  k as useHttp
+  M as useHttp
 };

package/dist/composables/useStripo.js

@@ -1,26 +1,41 @@
-import { useActionsApi as f } from "./useActionsApi.js";
-import { useCustomInterfaceAppearance as S } from "./useCustomInterfaceAppearance.js";
-import { useStripoEventHandler as E } from "./useStripoEventHandler.js";
-import { useToaster as C } from "./useToaster.js";
-import { displayConditions as y } from "../enums/displayConditions.js";
-import h from "../extensions/Blocks/Checkbox/extension.js";
-import w from "../extensions/Blocks/CouponBlock/extension.js";
-import b from "../extensions/Blocks/RadioButton/extension.js";
-import k from "../extensions/DynamicContent/extension.js";
-import { useStripoApi as B } from "../services/stripoApi.js";
-import V from "../static/styles/customEditorStyle.css.js";
-import { useEditorStore as _ } from "../stores/editor.js";
-import { dynamicContentToMergeTags as F } from "../utils/genericUtil.js";
-const j = (s) => {
-  const { handleError: d } = C(), { getToken: c, getCustomFonts: u } = B(), { handleEvent: l } = E(), m = (r, i = []) => {
-    const t = _(), { html: e, css: a, forceRecreate: g } = r;
+import { useActionsApi as C } from "./useActionsApi.js";
+import { useCustomInterfaceAppearance as _ } from "./useCustomInterfaceAppearance.js";
+import { useErrorTracking as w } from "./useErrorTracking.js";
+import { useStripoErrorCategory as b } from "./useStripoErrorCategory.js";
+import { useStripoEventHandler as k } from "./useStripoEventHandler.js";
+import { useStripoSlackNotifier as v } from "./useStripoSlackNotifier.js";
+import { useToaster as B } from "./useToaster.js";
+import { displayConditions as V } from "../enums/displayConditions.js";
+import x from "../extensions/Blocks/Checkbox/extension.js";
+import F from "../extensions/Blocks/CouponBlock/extension.js";
+import A from "../extensions/Blocks/RadioButton/extension.js";
+import M from "../extensions/Blocks/Recommendation/extension.js";
+import U from "../extensions/Blocks/Unsubscribe/extension.js";
+import D from "../extensions/DynamicContent/extension.js";
+import { useStripoApi as P } from "../services/stripoApi.js";
+import R from "../static/styles/customEditorStyle.css.js";
+import { useEditorStore as z } from "../stores/editor.js";
+import { dynamicContentToMergeTags as H } from "../utils/genericUtil.js";
+const no = (o) => {
+  const { handleError: g } = B(), { getToken: S, getCustomFonts: y } = P(), { handleEvent: E } = k(), { captureStripoError: c, withTimeout: f } = w(), { shouldCaptureSentry: u } = b(), { notifySlack: p } = v(), h = (m, n = []) => {
+    const r = z(), { html: i, css: a, forceRecreate: d } = m, l = (e) => {
+      const t = e instanceof Error ? e : new Error(String(e)), s = "stripo_runtime_error", I = u(s);
+      c(t, s, {
+        emailId: o.emailId,
+        userId: o.userId
+      }, I), p(
+        t.message,
+        s,
+        { emailId: o.emailId, userId: o.userId }
+      );
+    };
     window.UIEditor.initEditor(
       document.querySelector("#guido-editor"),
       {
-        metadata: s,
-        html: e,
+        metadata: o,
+        html: i,
         css: a,
-        forceRecreate: g,
+        forceRecreate: d,
         locale: "en",
         undoButtonSelector: "#guido__undo-button",
         redoButtonSelector: "#guido__redo-button",
@@ -30,83 +45,167 @@ const j = (s) => {
         customAppearanceMergetags: !0,
         customAppearanceMergetagsBorderColor: "#f1f3fe",
         customAppearanceMergetagsBackgroundColor: "#f1f3fe",
-        customViewStyles: V,
+        customViewStyles: R,
         conditionsEnabled: !0,
         customConditionsEnabled: !0,
-        conditionCategories: y,
+        conditionCategories: V,
         enableXSSSecurity: !0,
         messageSettingsEnabled: !1,
         selectBlockAfterDropFromSettingsPanel: !0,
         editorFonts: {
           showDefaultStandardFonts: !0,
           showDefaultNotStandardFonts: !0,
-          customFonts: i
+          customFonts: n
         },
         mergeTags: [
           {
-            entries: F(s.preselectedDynamicContentList)
+            entries: H(o.preselectedDynamicContentList)
           }
         ],
-        async onTokenRefreshRequest(o) {
+        async onTokenRefreshRequest(e) {
           try {
-            const n = await c();
-            o(n);
-          } catch (n) {
-            d(n, "Failed to refresh token");
+            const t = await f(
+              S(),
+              1e4,
+              // 10 second timeout
+              "token_refresh",
+              { emailId: o.emailId, userId: o.userId }
+            );
+            e(t);
+          } catch (t) {
+            const s = "token_refresh", I = u(s);
+            c(t, s, {
+              templateId: o.emailId,
+              userId: o.userId
+            }, I), p(
+              "Token refresh operation failed",
+              s,
+              { emailId: o.emailId, userId: o.userId }
+            ), g(t, "Failed to refresh token");
           }
         },
         onTemplateLoaded() {
           try {
-            const { importCss: o } = S(), { activateCustomViewStyles: n } = f();
-            o(), n(), s.onReady(), t.isStripoInitialized = !0, t.loadingStatus = !1, setTimeout(() => {
-              t.hasChanges = !1;
+            const { importCss: e } = _(), { activateCustomViewStyles: t } = C();
+            e(), t(), o.onReady(), r.isStripoInitialized = !0, r.loadingStatus = !1, setTimeout(() => {
+              r.hasChanges = !1;
             }, 1e3);
-          } catch (o) {
-            d(o, "Failed to load custom interface appearance");
+          } catch (e) {
+            const t = "template_loaded", s = u(t);
+            c(e, t, {
+              templateId: o.emailId,
+              userId: o.userId
+            }, s), p(
+              "Template loading operation failed",
+              t,
+              { emailId: o.emailId, userId: o.userId }
+            ), g(e, "Failed to load custom interface appearance");
           }
         },
-        onCodeEditorVisibilityChanged(o) {
-          t.isCodeEditorOpen = o;
+        onCodeEditorVisibilityChanged(e) {
+          r.isCodeEditorOpen = e;
         },
-        onEditorVisualModeChanged(o) {
-          t.editorVisualMode = o.toLowerCase();
+        onEditorVisualModeChanged(e) {
+          r.editorVisualMode = e.toLowerCase();
         },
-        onVersionHistoryVisibilityChanged(o) {
-          t.isVersionHistoryOpen = o;
+        onVersionHistoryVisibilityChanged(e) {
+          r.isVersionHistoryOpen = e;
         },
         onDataChanged() {
-          t.hasChanges = !0;
+          r.hasChanges = !0;
         },
-        onEvent: l,
-        ignoreClickOutsideSelectors: ["#guido-dynamic-content-modal", ".in-on-board-wrapper"],
+        onEvent: E,
+        // Error handler for Stripo runtime errors (CORS, plugin issues, etc.)
+        onError: l,
+        ignoreClickOutsideSelectors: [
+          "#guido-dynamic-content-modal",
+          ".in-on-board-wrapper",
+          ".in-drawer__container"
+        ],
         extensions: [
-          k,
-          h,
-          b,
-          w
+          D,
+          x,
+          A,
+          M,
+          U,
+          F
         ]
       }
     );
-  }, p = (r) => new Promise((i, t) => {
+  }, T = (m) => new Promise((n, r) => {
     if (document.getElementById("UiEditorScript")) {
-      r(), i();
+      m(), n();
       return;
     }
-    const e = document.createElement("script");
-    e.id = "UiEditorScript", e.type = "module", e.src = "https://plugins.stripo.email/resources/uieditor/latest/UIEditor.js", e.onload = () => {
-      r(), i();
-    }, e.onerror = () => {
-      const a = new Error("Failed to load Stripo UIEditor script");
-      t(a);
-    }, document.body.appendChild(e);
+    const i = document.createElement("script");
+    i.id = "UiEditorScript", i.type = "module", i.src = "https://plugins.stripo.email/resources/uieditor/latest/UIEditor.js";
+    const a = setTimeout(() => {
+      const d = new Error("Timeout loading Stripo UIEditor script (30s)"), l = "plugin_load_timeout", e = u(l);
+      c(d, l, {
+        scriptSrc: i.src,
+        emailId: o.emailId,
+        userId: o.userId
+      }, e), p(
+        `Stripo plugin failed to load (timeout): ${i.src}`,
+        l,
+        { emailId: o.emailId, userId: o.userId, reason: "timeout" }
+      ), r(d);
+    }, 3e4);
+    i.onload = () => {
+      clearTimeout(a), m(), n();
+    }, i.onerror = (d) => {
+      clearTimeout(a);
+      const l = new Error("Failed to load Stripo UIEditor script"), e = d instanceof Event ? d.type : String(d), t = "plugin_load_error", s = u(t);
+      c(l, t, {
+        scriptSrc: i.src,
+        event: e,
+        emailId: o.emailId,
+        userId: o.userId
+      }, s), p(
+        `Stripo plugin failed to load: ${e}`,
+        t,
+        { emailId: o.emailId, userId: o.userId, scriptSrc: i.src }
+      ), r(l);
+    }, document.body.appendChild(i);
   });
-  return { initPlugin: async (r) => {
-    await p(async () => {
-      const i = await u();
-      m(r, i);
-    });
+  return { initPlugin: async (m) => {
+    try {
+      await T(async () => {
+        try {
+          const n = await f(
+            y(),
+            5e3,
+            // 5 second timeout for fonts
+            "load_custom_fonts",
+            { emailId: o.emailId }
+          );
+          h(m, n);
+        } catch (n) {
+          const r = "init_editor", i = u(r);
+          throw c(n, r, {
+            templateId: o.emailId,
+            userId: o.userId,
+            hasTemplate: !!m.html
+          }, i), p(
+            "Editor initialization failed",
+            r,
+            { emailId: o.emailId, userId: o.userId }
+          ), n;
+        }
+      });
+    } catch (n) {
+      const r = "init_plugin", i = u(r);
+      throw c(n, r, {
+        templateId: o.emailId,
+        userId: o.userId
+      }, i), p(
+        "Plugin initialization failed",
+        r,
+        { emailId: o.emailId, userId: o.userId }
+      ), n;
+    }
   } };
 };
 export {
-  j as useStripo
+  no as useStripo
 };

package/dist/composables/useStripoErrorCategory.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Error categorization system for Stripo integration
+ * Determines whether errors should be logged to Sentry/FullStory, Slack, or both
+ *
+ * Note: Error type names use snake_case (e.g., plugin_load_error) to match
+ * error type strings used throughout the codebase. This is intentional and
+ * required for the categorization system to work correctly.
+ */
+export type ErrorSeverity = 'critical' | 'warning' | 'info';
+export type ErrorCaptureLevel = 'sentry_and_slack' | 'slack_only' | 'sentry_only';
+export interface ErrorCategory {
+    type: string;
+    severity: ErrorSeverity;
+    captureLevel: ErrorCaptureLevel;
+    description: string;
+}
+/**
+ * Categorize an error based on its type
+ * Returns the error category with capture level and severity
+ */
+export declare const useStripoErrorCategory: () => {
+    getErrorCategory: (errorType: string) => ErrorCategory;
+    shouldCaptureSentry: (errorType: string) => boolean;
+    shouldNotifySlack: (errorType: string) => boolean;
+    addErrorCategory: (category: ErrorCategory) => void;
+};

package/dist/composables/useStripoErrorCategory.js

@@ -0,0 +1,86 @@
+const i = {
+  // Critical errors: Log to Sentry + Alert Slack
+  plugin_load_error: {
+    type: "plugin_load_error",
+    severity: "critical",
+    captureLevel: "sentry_and_slack",
+    description: "Stripo UIEditor.js script failed to load"
+  },
+  plugin_load_timeout: {
+    type: "plugin_load_timeout",
+    severity: "critical",
+    captureLevel: "sentry_and_slack",
+    description: "Stripo script loading exceeded timeout threshold"
+  },
+  authentication_error: {
+    type: "authentication_error",
+    severity: "critical",
+    captureLevel: "sentry_and_slack",
+    description: "Token or authentication failure"
+  },
+  // Handled errors: Alert Slack but DON'T log to Sentry/FullStory
+  cors_error: {
+    type: "cors_error",
+    severity: "warning",
+    captureLevel: "slack_only",
+    description: "CORS policy blocked resource (can be caught before Sentry)"
+  },
+  // Runtime errors: Log to Sentry but DON'T alert Slack
+  stripo_runtime_error: {
+    type: "stripo_runtime_error",
+    severity: "warning",
+    captureLevel: "sentry_only",
+    description: "Runtime error from Stripo editor"
+  },
+  init_editor: {
+    type: "init_editor",
+    severity: "warning",
+    captureLevel: "sentry_only",
+    description: "Editor initialization failure"
+  },
+  init_plugin: {
+    type: "init_plugin",
+    severity: "warning",
+    captureLevel: "sentry_only",
+    description: "Plugin initialization failure"
+  },
+  token_refresh: {
+    type: "token_refresh",
+    severity: "warning",
+    captureLevel: "sentry_only",
+    description: "Token refresh operation failed"
+  },
+  template_loaded: {
+    type: "template_loaded",
+    severity: "warning",
+    captureLevel: "sentry_only",
+    description: "Template loading operation failed"
+  }
+}, l = () => {
+  const t = (e) => {
+    const r = i[e];
+    return r || {
+      type: e,
+      severity: "warning",
+      captureLevel: "sentry_only",
+      description: "Unknown error type"
+    };
+  };
+  return {
+    getErrorCategory: t,
+    shouldCaptureSentry: (e) => {
+      const r = t(e);
+      return ["sentry_and_slack", "sentry_only"].includes(r.captureLevel);
+    },
+    shouldNotifySlack: (e) => {
+      const r = t(e);
+      return ["sentry_and_slack", "slack_only"].includes(r.captureLevel);
+    },
+    addErrorCategory: (e) => {
+      i[e.type] = e;
+    }
+  };
+};
+export {
+  l as useStripoErrorCategory
+};

package/dist/composables/useStripoSlackNotifier.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Slack notifications for Stripo errors
+ * Uses error categorization to determine which errors should trigger Slack alerts
+ * Prevents duplicate alerts within the same session
+ */
+export declare const useStripoSlackNotifier: () => {
+    notifySlack: (errorMessage: string, errorType: string, additionalContext?: Record<string, unknown>) => Promise<boolean>;
+};

package/dist/composables/useStripoSlackNotifier.js

@@ -0,0 +1,47 @@
+import { useStripoErrorCategory as g } from "./useStripoErrorCategory.js";
+import { getSlackNotificationService as f } from "../services/slackNotificationService.js";
+import { getStripoErrorDeduplicationService as u } from "../services/stripoErrorDeduplicationService.js";
+const w = () => {
+  const c = f(), s = u(), { shouldNotifySlack: a, getErrorCategory: l } = g();
+  return {
+    notifySlack: async (o, t, r) => {
+      const e = l(t), i = a(t) || e.captureLevel === "sentry_only", S = {
+        critical: "critical",
+        warning: "high",
+        info: "low"
+      };
+      let n = o;
+      i && (n += `
+
+_Also logged to Sentry/FullStory for analysis_`);
+      const p = {
+        title: `Stripo ${t.replace(/_/g, " ").toUpperCase()}`,
+        message: n,
+        errorType: t,
+        severity: S[e.severity] || "high",
+        context: {
+          ...r,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          environment: "production",
+          captureLevel: e.captureLevel,
+          description: e.description,
+          loggedToSentry: i
+        }
+      };
+      return s.trackError({
+        errorType: t,
+        errorMessage: o,
+        errorCategory: e.severity,
+        context: {
+          ...r,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          environment: "production"
+        },
+        reportedAt: (/* @__PURE__ */ new Date()).toISOString()
+      }) ? c.sendErrorNotification(p) : !1;
+    }
+  };
+};
+export {
+  w as useStripoSlackNotifier
+};