issue-sticker 0.3.1 → 0.5.0

package/dist/issue-sticker-headless.js

@@ -1,7 +1,34 @@
-import { u as uploadScreenshotDataUrls, a as uploadSignedMediaWithApi, d as directUploadToSignedUrl, n as normalizeExposedJiraFields, b as normalizeJiraFieldId, g as getElementPosition, c as captureWithModernScreenshot, e as buildJiraCreateFields, f as buildNotionCreateFields, h as buildGuestOwnerQuery, s as syncExternalIssueIntegrations, i as devLogger, C as ConsoleCollector, N as NetworkCollector, j as filterExcludeServiceRelatedLogs, k as filterExcludeServiceRelatedConsoleLogs, l as compactNetworkLogsForTransport, m as sanitizeString, o as buildExternalUserPayload, S as ScreenRecordingController, p as SessionReplayCaptureController, q as preloadModernScreenshot } from "./externalUserPayload-hJjuUx6q.js";
+import { u as uploadScreenshotDataUrls, a as uploadSignedMediaWithApi, d as directUploadToSignedUrl, p as pristineFetch, n as normalizeExposedJiraFields, b as normalizeJiraFieldId, g as getElementPosition, c as captureWithModernScreenshot, e as buildJiraCreateFields, f as buildNotionCreateFields, h as buildGuestOwnerQuery, i as buildIssueIntegrationsPayload, j as devLogger, C as ConsoleCollector, N as NetworkCollector, s as selectNetworkLogsForSubmit, k as filterExcludeServiceRelatedLogs, l as filterExcludeServiceRelatedConsoleLogs, m as compactNetworkLogsForTransport, o as CONSOLE_LOG_SUBMIT_LIMIT, q as buildExternalUserPayload, r as shrinkNetworkLogsToFit, t as measureJsonBytes, v as sanitizeString, w as getCurrentPageUrl, S as ScreenRecordingController, x as SessionReplayCaptureController, y as preloadModernScreenshot, I as ISSUE_STICKER_INTERNAL_LOG_PREFIX, z as isIssueStickerExtensionRuntimeActive } from "./externalUserPayload-zu5IXBjn.js";
 import "react/jsx-runtime";
 import "react";
-import "./createLucideIcon-CmSNiW63.js";
+import "./createLucideIcon-BzRMP02h.js";
+const WINDOW_MS = 6e4;
+const MAX_PER_WINDOW = 5;
+class AutoIssueRateLimit {
+  constructor(max = MAX_PER_WINDOW, windowMs = WINDOW_MS) {
+    this.max = max;
+    this.windowMs = windowMs;
+    this.accepted = [];
+  }
+  get label() {
+    return `${this.windowMs / 1e3}초에 ${this.max}건`;
+  }
+  /**
+   * 자리가 있으면 차지하고 true 를 돌려준다. 실패한 호출도 서버 왕복을 이미 썼으므로
+   * 자리를 돌려주지 않는다.
+   */
+  claim(now = Date.now()) {
+    this.accepted = this.accepted.filter((at) => now - at < this.windowMs);
+    if (this.accepted.length >= this.max) {
+      return false;
+    }
+    this.accepted.push(now);
+    return true;
+  }
+  reset() {
+    this.accepted = [];
+  }
+}
 class IssueStickerHeadlessError extends Error {
   constructor(code, message, cause) {
     super(message);
@@ -68,7 +95,7 @@ class HeadlessTransport {
       const authHeader = await this.options.resolveAuthorizationHeader();
       if (authHeader) headers.Authorization = authHeader;
     }
-    const execute = (nextHeaders) => fetch(`${getApiBaseUrl()}${endpoint}`, {
+    const execute = (nextHeaders) => pristineFetch(`${getApiBaseUrl()}${endpoint}`, {
       method: options.method ?? "GET",
       headers: nextHeaders,
       body: options.body === void 0 ? void 0 : JSON.stringify(options.body)
@@ -604,7 +631,7 @@ function composeIssueFilterGroups(integrations, customFields) {
 function buildHeadlessCaptureContext({
   target,
   event,
-  videoFile,
+  videoFile = null,
   createVideoPreviewUrl,
   sessionReplayEnabled
 }) {
@@ -614,7 +641,7 @@ function buildHeadlessCaptureContext({
     mediaMode,
     position,
     screenshotPreviewUrls: [],
-    videoPreviewUrl: mediaMode === "video" && videoFile ? createVideoPreviewUrl(videoFile) : null,
+    videoPreviewUrl: mediaMode === "video" && videoFile && createVideoPreviewUrl ? createVideoPreviewUrl(videoFile) : null,
     targetSelector: position.selector,
     sessionReplayEnabled,
     sessionReplayPreview: null
@@ -624,6 +651,7 @@ async function captureHeadlessScreenshots({
   target,
   excludeSelectors
 }) {
+  const targetIsDocumentRoot = target === document.body || target === document.documentElement;
   const screenshots = await Promise.all([
     captureWithModernScreenshot({
       element: document.documentElement,
@@ -631,10 +659,12 @@ async function captureHeadlessScreenshots({
       width: window.innerWidth,
       height: window.innerHeight
     }).catch(() => void 0),
-    captureWithModernScreenshot({
-      element: target,
-      excludeSelectors
-    }).catch(() => void 0)
+    ...targetIsDocumentRoot ? [] : [
+      captureWithModernScreenshot({
+        element: target,
+        excludeSelectors
+      }).catch(() => void 0)
+    ]
   ]);
   return screenshots.filter(
     (dataUrl) => typeof dataUrl === "string" && dataUrl.length > 0
@@ -827,9 +857,7 @@ class HeadlessIssueRepository {
       this.options.getAuthMode(),
       this.options.getDefaultExternalUserId()
     );
-    return this.request(
-      `/api/sdk/issues/${encodeURIComponent(issueId)}${ownerQuery}`
-    );
+    return this.request(`/api/sdk/issues/${encodeURIComponent(issueId)}${ownerQuery}`);
   }
   createIssue(issueData) {
     return this.request("/api/sdk/issues", {
@@ -865,73 +893,60 @@ class HeadlessIssueRepository {
     return Array.isArray(fields) ? fields : [];
   }
   /**
-   * 이슈 저장 이후의 외부 연동(Jira/Notion/커스텀 필드)을 이어서 실행한다.
+   * Jira/Notion 외부 이슈 생성 페이로드를 만든다. 서버가 이슈 생성과 같은 요청
+   * 안에서 외부 연동을 수행하므로, 생성 요청(createIssue)에 실어 보낸다.
+   *
+   * 판정 규칙은 기존과 동일 — getActiveIntegration() 이 돌려주는 활성 연동의
+   * service_type 기준(jira 는 `active?.service_type === 'JIRA'`, notion 은
+   * `active?.service_type === 'NOTION'`). 담을 게 없으면 undefined 를 돌려줘
+   * 호출자가 `integrations` 키 자체를 빼게 한다.
+   */
+  async buildIntegrationsPayload(draft, schema) {
+    if (this.options.getAuthMode() !== "member") {
+      return void 0;
+    }
+    const active = await this.getActiveIntegration().catch(() => null);
+    const fields = (schema == null ? void 0 : schema.fields) ?? [];
+    return buildIssueIntegrationsPayload({
+      jiraEnabled: (active == null ? void 0 : active.service_type) === "JIRA",
+      jiraFields: getFilledDynamicValues(draft, fields, "jira"),
+      notionEnabled: (active == null ? void 0 : active.service_type) === "NOTION",
+      notionProperties: getFilledDynamicValues(draft, fields, "notion")
+    });
+  }
+  /**
+   * 이슈 저장 이후 커스텀 필드 값을 반영한다. Jira/Notion 외부 이슈 생성은
+   * buildIntegrationsPayload 를 통해 생성 요청 안에서 서버가 수행하므로 여기서는
+   * 다루지 않는다.
    *
    * 실패는 이슈 저장을 되돌리지 않으므로 throw 하지 않고 결과로 돌려준다. headless 는
    * UI 가 없어 toast 를 띄울 수 없으니, 통합하는 쪽이 이 값을 보고 판단해야 한다.
    */
-  async syncDynamicFields(createdIssue, draft, schema, context) {
+  async syncDynamicFields(createdIssue, draft, schema) {
     if (this.options.getAuthMode() !== "member") {
       return { failedServices: [] };
     }
-    const active = await this.getActiveIntegration().catch(() => null);
     const fields = (schema == null ? void 0 : schema.fields) ?? [];
-    const jiraValues = getFilledDynamicValues(draft, fields, "jira");
-    const notionValues = getFilledDynamicValues(draft, fields, "notion");
     const customValues = getFilledDynamicValues(draft, fields, "custom");
-    return syncExternalIssueIntegrations({
-      issueId: createdIssue.id,
-      title: draft.title.trim(),
-      description: draft.description.trim(),
-      url: this.options.getCurrentUrl() ?? "",
-      screenshotUrl: context.screenshotUrl,
-      videoUrl: context.videoUrl,
-      jira: {
-        enabled: (active == null ? void 0 : active.service_type) === "JIRA",
-        fields: jiraValues,
-        createIssue: (input) => this.request("/api/jira/issues", {
-          method: "POST",
-          body: {
-            projectId: this.options.getProjectId(),
-            issueId: input.issueId,
-            issueData: {
-              title: input.title,
-              description: input.description,
-              url: input.url,
-              screenshotUrl: input.screenshotUrl,
-              videoUrl: input.videoUrl,
-              fields: input.fields
+    let hasCustomFieldFailure = false;
+    await Promise.all(
+      Object.entries(customValues).map(
+        ([fieldDefinitionId, value]) => this.request(
+          `/api/sdk/custom-field-values/issues/${encodeURIComponent(createdIssue.id)}/values`,
+          {
+            method: "PUT",
+            body: {
+              field_definition_id: fieldDefinitionId,
+              value
             }
           }
+        ).catch((error) => {
+          hasCustomFieldFailure = true;
+          devLogger.error("headless", `custom-field 연동 실패 (이슈 저장은 성공):`, error);
         })
-      },
-      notion: {
-        enabled: (active == null ? void 0 : active.service_type) === "NOTION",
-        properties: notionValues,
-        createPage: (input) => this.request("/api/notion/pages", {
-          method: "POST",
-          body: {
-            projectId: this.options.getProjectId(),
-            issueId: input.issueId,
-            properties: input.properties
-          }
-        })
-      },
-      customFieldValues: customValues,
-      upsertCustomFieldValue: (fieldDefinitionId, value) => this.request(
-        `/api/sdk/custom-field-values/issues/${encodeURIComponent(createdIssue.id)}/values`,
-        {
-          method: "PUT",
-          body: {
-            field_definition_id: fieldDefinitionId,
-            value
-          }
-        }
-      ),
-      onError: (service, error) => {
-        devLogger.error("headless", `${service} 연동 실패 (이슈 저장은 성공):`, error);
-      }
-    });
+      )
+    );
+    return { failedServices: hasCustomFieldFailure ? ["custom-field"] : [] };
   }
   async fetchAllIssueStickers(filters) {
     var _a, _b, _c;
@@ -1043,14 +1058,24 @@ class HeadlessLogCollectors {
     this.networkCollector = null;
     this.consoleCollector = null;
   }
+  /**
+   * 스크린샷 캡처처럼 **우리가 서드파티 요청을 일으키는** 구간을 감싼다.
+   *
+   * 감싸지 않으면 스크린샷 라이브러리가 인라인하려고 끌어오는 웹폰트·이미지가 최근 50건을
+   * 통째로 채워, 정작 필요한 앱 요청이 링버퍼 밖으로 밀려난다.
+   */
+  async pauseNetworkWhile(task) {
+    const collector = this.networkCollector;
+    return (collector == null ? void 0 : collector.pauseWhile) ? collector.pauseWhile(task) : task();
+  }
   collect() {
     var _a, _b;
-    const networkLogs = filterExcludeServiceRelatedLogs(
-      ((_a = this.networkCollector) == null ? void 0 : _a.getFilteredLogs()) ?? []
-    ).slice(-50);
+    const networkLogs = selectNetworkLogsForSubmit(
+      filterExcludeServiceRelatedLogs(((_a = this.networkCollector) == null ? void 0 : _a.getFilteredLogs()) ?? [])
+    );
     const consoleLogs = filterExcludeServiceRelatedConsoleLogs(
       ((_b = this.consoleCollector) == null ? void 0 : _b.getFilteredLogs()) ?? []
-    ).slice(-50);
+    ).slice(-CONSOLE_LOG_SUBMIT_LIMIT);
     return {
       networkLogs: compactNetworkLogsForTransport(networkLogs) ?? [],
       consoleLogs
@@ -1106,6 +1131,7 @@ function createSessionReplayMeta(snapshot) {
 }
 function createInitialHeadlessSnapshot() {
   return {
+    extensionActive: false,
     phase: "idle",
     auth: {
       mode: "public",
@@ -1242,10 +1268,15 @@ function buildIssueCreatePayload({
   currentUrl,
   userAgent
 }) {
-  return sanitizeString({
+  var _a, _b, _c;
+  const title = (_a = draft.title) == null ? void 0 : _a.trim();
+  const description = (_b = draft.description) == null ? void 0 : _b.trim();
+  const intent = (_c = draft.intent) == null ? void 0 : _c.trim();
+  const base = {
     url: currentUrl,
-    title: draft.title.trim(),
-    description: draft.description.trim(),
+    ...title ? { title } : {},
+    ...description ? { description } : {},
+    ...intent ? { intent } : {},
     position: draft.position,
     ...uploads.screenshotUploadIds.length > 0 ? { screenshot_upload_ids: uploads.screenshotUploadIds } : {},
     ...uploads.videoUpload ? { video_upload_id: uploads.videoUpload.id } : {},
@@ -1253,14 +1284,24 @@ function buildIssueCreatePayload({
       session_replay_upload_id: uploads.replayUpload.uploadId,
       session_replay_meta: uploads.replayUpload.meta
     } : {},
-    network_logs: logs.networkLogs.length > 0 ? logs.networkLogs : void 0,
     console_logs: logs.consoleLogs.length > 0 ? logs.consoleLogs : void 0,
     user_agent: userAgent,
     tenant_id: auth.tenantId,
     project_id: projectId,
     account_id: auth.accountId ?? void 0,
     ...buildExternalUserPayload(config.user)
-  });
+  };
+  const { networkLogs, stillOverBudget } = shrinkNetworkLogsToFit(
+    logs.networkLogs,
+    measureJsonBytes(base)
+  );
+  return {
+    payload: sanitizeString({
+      ...base,
+      network_logs: networkLogs.length > 0 ? networkLogs : void 0
+    }),
+    stillOverBudget
+  };
 }
 async function submitHeadlessIssueDraft({
   draft,
@@ -1276,12 +1317,11 @@ async function submitHeadlessIssueDraft({
   userAgent,
   uploadSessionReplaySnapshot
 }) {
-  var _a;
   const screenshotUploads = draft.mediaMode === "screenshot" ? await transport.uploadScreenshotPreviews(draft.screenshotPreviewUrls) : [];
   const screenshotUploadIds = screenshotUploads.map((upload) => upload.id);
   const videoUpload = draft.mediaMode === "video" && pendingVideoFile ? await transport.uploadSignedMedia(pendingVideoFile, "video") : null;
   const replayUpload = draft.sessionReplayEnabled ? await uploadSessionReplaySnapshot() : null;
-  const issueData = buildIssueCreatePayload({
+  const { payload: issueData, stillOverBudget } = buildIssueCreatePayload({
     draft,
     auth,
     config,
@@ -1291,11 +1331,15 @@ async function submitHeadlessIssueDraft({
     currentUrl,
     userAgent
   });
-  const createdIssue = await issueRepository.createIssue(issueData);
-  await issueRepository.syncDynamicFields(createdIssue, draft, formSchema, {
-    screenshotUrl: (_a = screenshotUploads[0]) == null ? void 0 : _a.url,
-    videoUrl: videoUpload == null ? void 0 : videoUpload.url
-  });
+  if (stillOverBudget) {
+    throw new IssueStickerHeadlessError(
+      "PAYLOAD_TOO_LARGE",
+      "이슈 데이터가 전송 한도를 넘어 저장할 수 없습니다. 설명을 줄이거나 첨부를 빼고 다시 시도해주세요."
+    );
+  }
+  const integrations = await issueRepository.buildIntegrationsPayload(draft, formSchema);
+  const createdIssue = await issueRepository.createIssue({ ...issueData, integrations });
+  await issueRepository.syncDynamicFields(createdIssue, draft, formSchema);
   return createdIssue;
 }
 const HEADLESS_CAPTURE_STYLE_ID = "issue-sticker-headless-capture-style";
@@ -1393,6 +1437,7 @@ class HeadlessClientImpl {
     var _a;
     this.config = config;
     this.state = new HeadlessClientState();
+    this.autoIssueRateLimit = new AutoIssueRateLimit();
     this.pendingMedia = new HeadlessPendingMedia();
     this.initializePromise = null;
     this.captureCleanup = null;
@@ -1419,7 +1464,7 @@ class HeadlessClientImpl {
         var _a2;
         return (_a2 = this.config.user) == null ? void 0 : _a2.id;
       },
-      getCurrentUrl: () => typeof window !== "undefined" ? window.location.href : void 0
+      getCurrentUrl: () => getCurrentPageUrl() || void 0
     });
     this.logCollectors = new HeadlessLogCollectors(this.config, getApiBaseUrl);
     this.screenRecordingController = new ScreenRecordingController({
@@ -1596,14 +1641,15 @@ class HeadlessClientImpl {
     this.state.setSnapshot({ phase: "idle", draft: null, formSchema: null, error: null });
   }
   async submitDraft(input) {
+    var _a, _b, _c;
     await this.ensureInitialized();
     this.state.assertPhase(["draftingIssue"], "submitDraft");
     this.state.requireDraft();
-    if (!input.title.trim()) {
-      throw new IssueStickerHeadlessError("VALIDATION_ERROR", "제목을 입력해주세요.");
-    }
-    if (!input.description.trim()) {
-      throw new IssueStickerHeadlessError("VALIDATION_ERROR", "설명을 입력해주세요.");
+    if (!((_a = input.title) == null ? void 0 : _a.trim()) && !((_b = input.description) == null ? void 0 : _b.trim()) && !((_c = input.intent) == null ? void 0 : _c.trim())) {
+      throw new IssueStickerHeadlessError(
+        "VALIDATION_ERROR",
+        "제목·설명 또는 기대한 동작(intent)을 입력해주세요."
+      );
     }
     this.state.setSnapshot({ phase: "submittingIssue", error: null });
     try {
@@ -1615,6 +1661,7 @@ class HeadlessClientImpl {
         screenshotPreviewUrls,
         title: input.title,
         description: input.description,
+        intent: input.intent,
         dynamicFields: input.dynamicFields ?? {}
       };
       const createdIssue = await submitHeadlessIssueDraft({
@@ -1627,7 +1674,7 @@ class HeadlessClientImpl {
         config: this.config,
         projectId: this.state.requireProjectId(),
         logs: this.logCollectors.collect(),
-        currentUrl: typeof window !== "undefined" ? window.location.href : "",
+        currentUrl: getCurrentPageUrl(),
         userAgent: typeof navigator !== "undefined" ? navigator.userAgent : void 0,
         uploadSessionReplaySnapshot: () => this.uploadSessionReplaySnapshot()
       });
@@ -1647,6 +1694,76 @@ class HeadlessClientImpl {
       throw nextError;
     }
   }
+  async createIssue(input) {
+    var _a, _b;
+    try {
+      if (!((_a = input.title) == null ? void 0 : _a.trim()) || !((_b = input.description) == null ? void 0 : _b.trim())) {
+        return this.skipCreateIssue("제목과 설명이 모두 필요합니다.");
+      }
+      if (typeof document === "undefined" || typeof window === "undefined") {
+        return this.skipCreateIssue("브라우저 DOM 에서만 이슈를 만들 수 있습니다.");
+      }
+      await this.ensureInitialized();
+      if (this.snapshot.extensionActive) {
+        return this.skipCreateIssue("이슈스티커 익스텐션이 이 페이지를 사용 중입니다.");
+      }
+      if (!this.autoIssueRateLimit.claim()) {
+        return this.skipCreateIssue(
+          `${this.autoIssueRateLimit.label}까지 호출할 수 있습니다. 호출 조건을 다시 확인해주세요.`
+        );
+      }
+      const target = input.target ?? document.body;
+      const sessionReplay = this.sessionReplayController.getSnapshot();
+      const draft = buildHeadlessCaptureContext({
+        target,
+        sessionReplayEnabled: Boolean(sessionReplay.enabled && sessionReplay.canAttach)
+      });
+      const logs = this.logCollectors.collect();
+      const screenshotPreviewUrls = input.media === "none" ? [] : await this.logCollectors.pauseNetworkWhile(
+        () => captureHeadlessScreenshots({ target, excludeSelectors: this.getExcludeSelectors() })
+      );
+      const formSchema = this.snapshot.auth.mode === "member" && Object.keys(input.dynamicFields ?? {}).length > 0 ? await this.loadFormSchema({}) : null;
+      const createdIssue = await submitHeadlessIssueDraft({
+        draft: {
+          ...draft,
+          screenshotPreviewUrls,
+          title: input.title,
+          description: input.description,
+          dynamicFields: input.dynamicFields ?? {}
+        },
+        pendingVideoFile: null,
+        transport: this.transport,
+        issueRepository: this.issueRepository,
+        formSchema,
+        auth: this.snapshot.auth,
+        config: this.config,
+        projectId: this.state.requireProjectId(),
+        logs,
+        currentUrl: getCurrentPageUrl(),
+        userAgent: typeof navigator !== "undefined" ? navigator.userAgent : void 0,
+        uploadSessionReplaySnapshot: () => this.uploadSessionReplaySnapshot()
+      });
+      this.state.setSnapshot({
+        issues: [createdIssue, ...this.snapshot.issues]
+      });
+      return createdIssue;
+    } catch (error) {
+      return this.skipCreateIssue("이슈를 생성하지 못했습니다.", error);
+    }
+  }
+  /**
+   * createIssue 가 이슈를 만들지 않고 끝난 이유를 남긴다.
+   *
+   * devLogger 는 프로덕션 빌드에서 침묵하는데, 이 실패는 예외로 드러나지 않으므로
+   * 통합한 쪽이 프로덕션에서도 알아야 한다. 접두어가 붙어 있어 우리 수집기가
+   * 자기 로그로 걸러내므로 고객 이슈의 콘솔 로그를 오염시키지 않는다.
+   */
+  skipCreateIssue(reason, cause) {
+    const args = [ISSUE_STICKER_INTERNAL_LOG_PREFIX, "[headless] createIssue:", reason];
+    if (cause !== void 0) args.push(cause);
+    console.warn(...args);
+    return null;
+  }
   async loginAsMember() {
     await this.ensureInitialized();
     if (!this.authBridge.canUseBridge) {
@@ -1685,10 +1802,15 @@ class HeadlessClientImpl {
     this.sessionReplayController.destroy();
     this.clearPendingMedia();
     this.logCollectors.stop();
+    this.autoIssueRateLimit.reset();
     this.authBridge.destroy();
     this.state.reset();
   }
   async initializeInternal() {
+    if (isIssueStickerExtensionRuntimeActive()) {
+      this.state.setSnapshot({ extensionActive: true, phase: "idle", error: null });
+      return;
+    }
     this.state.setSnapshot({ phase: "initializing", error: null });
     try {
       const result = await this.request("/api/sdk/auth/public-init", {
@@ -1817,7 +1939,13 @@ class HeadlessClientImpl {
     const token = {};
     this.captureSession = {
       token,
-      screenshots: draft.mediaMode === "screenshot" ? captureHeadlessScreenshots({ target, excludeSelectors: this.getExcludeSelectors() }) : null,
+      screenshots: draft.mediaMode === "screenshot" ? (
+        // 스크린샷은 웹폰트·이미지를 fetch 로 인라인한다. 그 사이 수집을 멈추지 않으면
+        // 최근 50건이 그 요청들로 채워져 진짜 앱 요청이 밀려난다.
+        this.logCollectors.pauseNetworkWhile(
+          () => captureHeadlessScreenshots({ target, excludeSelectors: this.getExcludeSelectors() })
+        )
+      ) : null,
       formSchema: this.loadFormSchema({})
     };
     const isCurrentSession = () => {