@solhun/feedback-kit-core 0.1.0 → 0.2.1

package/dist/index.cjs

@@ -724,6 +724,10 @@ var RingBuffer = class {
 var NETWORK_BUFFER_LIMIT = 30;
 var LOG_BUFFER_LIMIT = 50;
 var MAX_LOG_MESSAGE_CHARS = 2e3;
+function failureReason(error) {
+  const message = error instanceof Error ? error.message : String(error);
+  return message.slice(0, 200) || "\uB124\uD2B8\uC6CC\uD06C \uC2E4\uD328";
+}
 var DiagnosticsCollector = class {
   constructor(opts = {}) {
     this.installed = false;
@@ -733,7 +737,9 @@ var DiagnosticsCollector = class {
     this.originalXhrSend = null;
     this.originalWarn = null;
     this.originalError = null;
+    this.originalLog = null;
     this.excludeMatcher = null;
+    this.logScope = "problems";
     /**
      * 패치된 fetch 안에서 동기적으로 XHR 이 열리는 깊이.
      *
@@ -766,6 +772,7 @@ var DiagnosticsCollector = class {
     if (this.installed) return;
     this.installed = true;
     this.excludeMatcher = opts.excludeMatcher ?? null;
+    this.logScope = opts.logs ?? "problems";
     if (opts.now) this.now = opts.now;
     if (opts.iso) this.iso = opts.iso;
     this.patchFetch();
@@ -791,8 +798,10 @@ var DiagnosticsCollector = class {
     const c = g.console;
     if (c && this.originalWarn) c.warn = this.originalWarn;
     if (c && this.originalError) c.error = this.originalError;
+    if (c && this.originalLog) c.log = this.originalLog;
     this.originalWarn = null;
     this.originalError = null;
+    this.originalLog = null;
     this.excludeMatcher = null;
     this.fetchDepth = 0;
   }
@@ -809,11 +818,15 @@ var DiagnosticsCollector = class {
     this.logs.clear();
   }
   // ── 내부: 기록 ────────────────────────────────────────────
-  recordNetwork(method, url, status, startedAt) {
+  /** 실패 사유 한 줄. 예외 객체엔 요청 본문이 들어 있을 수 있어 메시지만, 길이도 자른다. */
+  recordNetwork(method, url, status, startedAt, errorMessage = null) {
     this.network.push({
       method,
       url,
       status,
+      // 제보를 훑는 사람이 실패한 요청만 눈으로 골라낼 수 있게 따로 싣는다.
+      ok: status !== null && status >= 200 && status < 300,
+      errorMessage,
       durationMs: Math.max(0, Math.round(this.now() - startedAt)),
       at: this.iso(startedAt)
     });
@@ -850,7 +863,7 @@ var DiagnosticsCollector = class {
         pending = Promise.resolve(originalFetch(input, init));
       } catch (err) {
         self.fetchDepth -= 1;
-        if (!excluded) self.recordNetwork(method, url, null, start);
+        if (!excluded) self.recordNetwork(method, url, null, start, failureReason(err));
         throw err;
       }
       self.fetchDepth -= 1;
@@ -868,7 +881,7 @@ var DiagnosticsCollector = class {
           return raw;
         },
         (err) => {
-          if (!excluded) self.recordNetwork(method, url, null, start);
+          if (!excluded) self.recordNetwork(method, url, null, start, failureReason(err));
           throw err;
         }
       );
@@ -916,6 +929,7 @@ var DiagnosticsCollector = class {
     };
   }
   patchConsole() {
+    if (this.logScope === "off") return;
     const c = globalThis.console;
     if (!c) return;
     const self = this;
@@ -935,6 +949,14 @@ var DiagnosticsCollector = class {
         orig(...args);
       };
     }
+    if (this.logScope === "all" && typeof c.log === "function") {
+      const orig = c.log.bind(c);
+      this.originalLog = orig;
+      c.log = function patchedLog(...args) {
+        self.recordLog("log", args);
+        orig(...args);
+      };
+    }
   }
 };
 var sharedDiagnostics = new DiagnosticsCollector();
@@ -1153,6 +1175,7 @@ function resolveConfig(config = {}) {
     visibility: normalizeVisibility(config.visibility, warn),
     captureScreenshot: config.captureScreenshot ?? true,
     captureDiagnostics: config.captureDiagnostics ?? true,
+    captureLogs: config.captureLogs ?? "problems",
     position: normalizePosition(config.position, warn),
     isInternal: typeof config.isInternal === "function" ? config.isInternal : null,
     internalRoles: config.internalRoles ?? DEFAULT_INTERNAL_ROLES,
@@ -1434,6 +1457,7 @@ var ReportModalController = class {
     this.captureGeneration = 0;
     this.state = {
       open: false,
+      element: null,
       comment: "",
       priority: "unset",
       screenshot: null,
@@ -1499,7 +1523,7 @@ var ReportModalController = class {
     this.queue.stop?.();
   }
   // ── 열기/닫기 ─────────────────────────────────────────────────────────────
-  async open() {
+  async open(opts = {}) {
     if (this.state.open) return;
     const wasPending = this.state.submitStatus === "pending" && this.lastReport !== null;
     const pendingReport = wasPending ? this.lastReport : null;
@@ -1508,6 +1532,8 @@ var ReportModalController = class {
     this.patch({
       open: true,
       comment: pendingReport?.comment ?? "",
+      // 요소를 지목해서 연 경우엔 그 요소를 물고 간다. 대기 항목 복원이 우선이다.
+      element: pendingReport?.element ?? opts.element ?? null,
       priority: pendingReport?.priority ?? "unset",
       screenshot: pendingReport?.screenshot ?? null,
       screenshotStatus: "none",
@@ -1667,12 +1693,13 @@ var ReportModalController = class {
     }
     this.patch({ submitStatus: "sending", submitMessage: null });
     const parts = {
-      kind: "report",
+      // 요소를 지목했으면 지목 제보다. 수집 쪽이 이 값으로 갈린다.
+      kind: this.state.element ? "annotation" : "report",
       comment: this.state.comment,
       priority: this.state.priority,
       screenshot: this.state.screenshot,
       pin: this.state.pin,
-      element: null
+      element: this.state.element
     };
     let outcome;
     try {
@@ -1824,9 +1851,14 @@ var WidgetController = class {
     this.listeners.clear();
   }
   // ── 플로팅 버튼 ↔ 모달 ────────────────────────────────────────────────────
-  async openReport() {
+  /**
+   * @param opts.element 요소를 지목해서 열 때 그 요소. 지목 모드에서도 화면을
+   *   `modal` 로 바꾼다 — `modal.open()` 을 직접 부르면 상태만 열리고 화면은
+   *   `picking` 에 머물러 **모달이 렌더되지 않는다**.
+   */
+  async openReport(opts = {}) {
     this.screen = "modal";
-    await this.modal.open();
+    await this.modal.open(opts);
     this.emit();
   }
   /** 모달 닫기 요청. 쓰던 내용이 있으면 확인부터 받는다(화면은 그대로 모달). */
@@ -2150,6 +2182,19 @@ function parseRetryAfterMs(res) {
   const seconds = Number(raw.trim());
   return Number.isFinite(seconds) && seconds >= 0 ? Math.round(seconds * 1e3) : null;
 }
+function reasonFrom(text) {
+  try {
+    const body = JSON.parse(text);
+    const code = typeof body.code === "string" ? body.code : null;
+    const message = typeof body.message === "string" ? body.message : null;
+    const joined = [code, message].filter(Boolean).join(": ");
+    if (joined) return ` \u2014 ${joined.slice(0, 200)}`;
+  } catch {
+    const head = text.trim().slice(0, 120);
+    if (head) return ` \u2014 ${head}`;
+  }
+  return "";
+}
 function fail(retryable, extra) {
   return { ok: false, id: null, retryable, retryAfterMs: null, ...extra };
 }
@@ -2171,27 +2216,6 @@ function buildLassoEnvelope(report) {
   const parsed = Date.parse(report.createdAt);
   const timestamp = Number.isFinite(parsed) ? parsed : 0;
   const el = report.element;
-  if (report.kind === "annotation") {
-    return {
-      clientSubmissionId: report.clientSubmissionId,
-      clientType,
-      event: "annotation.add",
-      timestamp,
-      url: c.url ?? "",
-      priority: report.priority,
-      annotation: {
-        id: report.clientSubmissionId,
-        comment: renderReportBody(report),
-        x: report.pin?.x ?? null,
-        y: report.pin?.y ?? null,
-        element: el ? el.tag : null,
-        elementPath: el?.attributes["data-feedback-source"] ?? null,
-        selectedText: el?.text ?? null,
-        boundingBox: el?.boundingBox ?? null,
-        timestamp
-      }
-    };
-  }
   return {
     clientSubmissionId: report.clientSubmissionId,
     clientType,
@@ -2204,6 +2228,22 @@ function buildLassoEnvelope(report) {
       comment: renderReportBody(report),
       pin: report.pin ? { x: report.pin.x, y: report.pin.y } : null,
       sourceFile: el?.attributes["data-feedback-source"] ?? null,
+      element: el ? {
+        tag: el.tag,
+        // 요소를 다시 찾는 선택자. 없으면 사람이 화면에서 찾아야 하지만
+        // 제보 자체는 성립한다.
+        path: el.selector ?? null,
+        text: el.text,
+        cssClasses: el.className,
+        reactComponents: el.attributes["react-components"] ?? null,
+        boundingBox: el.boundingBox
+      } : null,
+      web: clientType === "web" ? {
+        url: c.url,
+        route: c.screen,
+        viewport: c.web?.viewport ?? null,
+        userAgent: c.web?.userAgent ?? null
+      } : null,
       screenshotBase64: report.screenshot?.base64 ?? null,
       screenshotContentType: report.screenshot?.contentType ?? null,
       // 서버가 없으면 빈 배열로 취급하지만, 미연동과 "없었음"을 구분해 보낸다.
@@ -2259,29 +2299,38 @@ function createLassoAdapter(opts = {}) {
         return fail(true);
       }
       const status = res.status;
+      let text = "";
+      try {
+        text = await res.text();
+      } catch {
+      }
       if (status < 200 || status >= 300) {
+        const reason = reasonFrom(text);
         if (status === 429) {
-          emit("feedback-kit: \uC218\uC9D1 \uD55C\uB3C4\uC5D0 \uAC78\uB838\uB2E4(429). \uC7A0\uC2DC \uB4A4 \uB2E4\uC2DC \uC2DC\uB3C4\uD55C\uB2E4.");
+          emit(`feedback-kit: \uC218\uC9D1 \uD55C\uB3C4\uC5D0 \uAC78\uB838\uB2E4(429). \uC7A0\uC2DC \uB4A4 \uB2E4\uC2DC \uC2DC\uB3C4\uD55C\uB2E4.${reason}`);
           return fail(true, { retryAfterMs: parseRetryAfterMs(res), rateLimited: true });
         }
         const retryable = RETRYABLE_STATUS.has(status);
         emit(
-          `feedback-kit: \uC218\uC9D1 \uC751\uB2F5 ${status}${retryable ? " (\uB2E4\uC2DC \uC2DC\uB3C4\uD55C\uB2E4)" : " (\uC7AC\uC2DC\uB3C4\uD558\uC9C0 \uC54A\uB294\uB2E4)"}`
+          `feedback-kit: \uC218\uC9D1 \uC751\uB2F5 ${status}${retryable ? " (\uB2E4\uC2DC \uC2DC\uB3C4\uD55C\uB2E4)" : " (\uC7AC\uC2DC\uB3C4\uD558\uC9C0 \uC54A\uB294\uB2E4)"}${reason}`
         );
         return fail(retryable, { retryAfterMs: retryable ? parseRetryAfterMs(res) : null });
       }
       let parsed;
       try {
-        const text = await res.text();
         const value = JSON.parse(text);
         if (value === null || typeof value !== "object") throw new Error("\uAC1D\uCCB4\uAC00 \uC544\uB2D8");
         parsed = value;
       } catch {
-        emit(`feedback-kit: \uC218\uC9D1 \uC751\uB2F5 ${status} \uC758 \uBCF8\uBB38\uC744 \uC77D\uC9C0 \uBABB\uD588\uB2E4. \uB2E4\uC2DC \uC2DC\uB3C4\uD55C\uB2E4.`);
+        emit(
+          `feedback-kit: \uC218\uC9D1 \uC751\uB2F5 ${status} \uC758 \uBCF8\uBB38\uC774 JSON \uC774 \uC544\uB2C8\uB2E4. \uB2E4\uC2DC \uC2DC\uB3C4\uD55C\uB2E4.${reasonFrom(text)}`
+        );
         return fail(true);
       }
       if (parsed.ok !== true) {
-        emit(`feedback-kit: \uC218\uC9D1 \uC11C\uBC84\uAC00 \uC81C\uBCF4\uB97C \uAC70\uC808\uD588\uB2E4(${status}). \uC7AC\uC2DC\uB3C4\uD558\uC9C0 \uC54A\uB294\uB2E4.`);
+        emit(
+          `feedback-kit: \uC218\uC9D1 \uC11C\uBC84\uAC00 \uC81C\uBCF4\uB97C \uAC70\uC808\uD588\uB2E4(${status}). \uC7AC\uC2DC\uB3C4\uD558\uC9C0 \uC54A\uB294\uB2E4.${reasonFrom(text)}`
+        );
         return fail(false);
       }
       return { ok: true, id: idFrom(parsed), retryable: false, retryAfterMs: null };