issue-sticker 0.12.0 → 0.13.0

package/dist/issue-sticker-headless.js

@@ -1,5 +1,6 @@
-import { u as uploadScreenshotDataUrls, a as uploadSignedMediaWithApi, d as directUploadToSignedUrl, p as pristineFetch, g as getElementPosition, c as captureViewportWithElementCrop, b as captureWithModernScreenshot, e as buildJiraCreateFields, f as buildNotionCreateFields, h as buildGuestOwnerQuery, i as composeIssueFilterGroups, j as buildIssueIntegrationsPayload, k as devLogger, W as WebSocketCollector, C as ConsoleCollector, N as NetworkCollector, s as selectNetworkLogsForSubmit, l as filterExcludeServiceRelatedLogs, m as filterExcludeServiceRelatedConsoleLogs, n as compactNetworkLogsForTransport, o as CONSOLE_LOG_SUBMIT_LIMIT, q as buildExternalUserPayload, r as shrinkNetworkLogsToFit, t as measureJsonBytes, v as sanitizeString, w as collectAttachmentUploads, x as hasReplayUpload, y as getCurrentPageUrl, z as createIssueUploadQueues, S as ScreenRecordingController, A as SessionReplayCaptureController, B as preloadModernScreenshot, D as enqueueIssueUploads, E as normalizeUploadMimeType, I as ISSUE_STICKER_INTERNAL_LOG_PREFIX, F as toSessionReplayMeta, G as loadTusClient, H as createIndexedDbPendingUploadStore, J as ATTACHMENT_UPLOAD_DB_NAME, V as VIDEO_UPLOAD_DB_NAME, K as createMediaUploadApi } from "./externalUserPayload-DWcXyz2U.js";
-import { r } from "./three-B228j4M6.js";
+import { u as uploadScreenshotDataUrls, a as uploadSignedMediaWithApi, d as directUploadToSignedUrl, p as pristineFetch, g as getElementPosition, c as captureViewportAndElementShots, b as captureScreenshotWithMasks, i as isCapturedScreenshot, M as MaskingCaptureError, e as buildJiraCreateFields, f as buildNotionCreateFields, h as buildGuestOwnerQuery, j as composeIssueFilterGroups, k as buildIssueIntegrationsPayload, l as devLogger, W as WebSocketCollector, C as ConsoleCollector, N as NetworkCollector, s as selectNetworkLogsForSubmit, m as filterExcludeServiceRelatedLogs, n as filterExcludeServiceRelatedConsoleLogs, o as compactNetworkLogsForTransport, q as CONSOLE_LOG_SUBMIT_LIMIT, r as buildExternalUserPayload, t as shrinkNetworkLogsToFit, v as measureJsonBytes, w as sanitizeString, x as runMaskedSubmit, y as applySubmitMasking, z as collectAttachmentUploads, A as maskPositionForSubmit, B as hasReplayUpload, D as appendMaskingNotice, E as screenshotExclusionNotice, F as collectSnapshotSelectors, G as MaskingScreenRulesChangedError, H as screenRulesChangedMessage, I as MaskingPolicyUnavailableError, J as MaskingSelectorUnsupportedError, K as assertScreenRulesCovered, L as isMaskingFailure, O as maskScreenshotsForSubmit, P as getCurrentPageUrl, Q as createIssueUploadQueues, S as ScreenRecordingController, R as SessionReplayCaptureController, T as preloadModernScreenshot, U as enqueueIssueUploads, V as normalizeUploadMimeType, X as ISSUE_STICKER_INTERNAL_LOG_PREFIX, Y as MASKING_POLICY_PREFETCH_TIMEOUT_MS, Z as toSessionReplayMeta, _ as loadCaptureSelectors, $ as loadMaskingPolicyForSubmit, a0 as resolveEffectivePolicy, a1 as createMaskingPolicySource, a2 as loadTusClient, a3 as createIndexedDbPendingUploadStore, a4 as ATTACHMENT_UPLOAD_DB_NAME, a5 as VIDEO_UPLOAD_DB_NAME, a6 as createMediaUploadApi, a7 as createMemoryMaskingPolicyCache } from "./externalUserPayload-CdzgCq4t.js";
+import { M as MASKING_COPY, R as ReplayMaskingError } from "./three-FamoZZKK.js";
+import { r } from "./three-FamoZZKK.js";
 import "react/jsx-runtime";
 import "react";
 const WINDOW_MS = 6e4;
@@ -99,7 +100,8 @@ class HeadlessTransport {
     const execute = (nextHeaders) => pristineFetch(`${getApiBaseUrl()}${endpoint}`, {
       method: options.method ?? "GET",
       headers: nextHeaders,
-      body: options.body === void 0 ? void 0 : JSON.stringify(options.body)
+      body: options.body === void 0 ? void 0 : JSON.stringify(options.body),
+      ...options.cache ? { cache: options.cache } : {}
     });
     let response = await execute(headers);
     if (!options.skipAuth && response.status === 401 && this.options.getAuthMode() === "member") {
@@ -115,8 +117,9 @@ class HeadlessTransport {
     }
     const json = await response.json().catch(() => null);
     if (!response.ok || !(json == null ? void 0 : json.success)) {
+      const unauthorizedCode = this.options.getAuthMode() === "member" ? "MEMBER_AUTH_REQUIRED" : "AUTH_FAILED";
       throw new IssueStickerHeadlessError(
-        response.status === 401 ? "MEMBER_AUTH_REQUIRED" : "NETWORK_ERROR",
+        response.status === 401 ? unauthorizedCode : "NETWORK_ERROR",
         extractErrorMessage(json == null ? void 0 : json.error, (json == null ? void 0 : json.message) || `요청 실패: ${response.status}`),
         json,
         response.status
@@ -473,21 +476,34 @@ function buildHeadlessCaptureContext({
     sessionReplayPreview: null
   };
 }
+const NO_HEADLESS_SCREENSHOTS = {
+  screenshots: [],
+  maskingDropped: false
+};
 async function captureHeadlessScreenshots({
   target,
-  excludeSelectors
+  excludeSelectors,
+  maskSelectors
 }) {
   const targetIsDocumentRoot = target === document.body || target === document.documentElement;
-  const { fullDataUrl, elementDataUrl } = await captureViewportWithElementCrop({
+  const viewport = await captureViewportAndElementShots({
     element: target,
-    excludeSelectors
+    excludeSelectors,
+    maskSelectors
   });
-  const elementShot = targetIsDocumentRoot || elementDataUrl ? elementDataUrl : await captureWithModernScreenshot({ element: target, excludeSelectors }).catch(
-    () => void 0
-  );
-  return [fullDataUrl, elementShot].filter(
-    (dataUrl) => typeof dataUrl === "string" && dataUrl.length > 0
-  );
+  let maskingDropped = Boolean(viewport.maskingDropped);
+  const elementShot = targetIsDocumentRoot || viewport.element ? viewport.element : await captureScreenshotWithMasks({
+    element: target,
+    excludeSelectors,
+    maskSelectors
+  }).catch((error) => {
+    maskingDropped || (maskingDropped = error instanceof MaskingCaptureError);
+    return void 0;
+  });
+  return {
+    screenshots: [viewport.full, elementShot].filter(isCapturedScreenshot),
+    maskingDropped
+  };
 }
 function normalizeCustomInputType(fieldType) {
   if (fieldType === "number") return "number";
@@ -1087,7 +1103,8 @@ function buildIssueCreatePayload({
   uploads,
   logs,
   currentUrl,
-  userAgent
+  userAgent,
+  maskingPolicyVersion
 }) {
   var _a, _b, _c;
   const title = (_a = draft.title) == null ? void 0 : _a.trim();
@@ -1107,6 +1124,7 @@ function buildIssueCreatePayload({
     tenant_id: auth.tenantId,
     project_id: projectId,
     account_id: auth.accountId ?? void 0,
+    masking_policy_version: maskingPolicyVersion,
     ...buildExternalUserPayload(config.user)
   };
   const { networkLogs, stillOverBudget } = shrinkNetworkLogsToFit(
@@ -1121,8 +1139,67 @@ function buildIssueCreatePayload({
     stillOverBudget
   };
 }
+async function prepareHeadlessScreenAttachments(input) {
+  var _a, _b;
+  const { context } = input;
+  const includeScreenshots = input.draft.mediaMode === "screenshot" || Boolean((_a = context.rules) == null ? void 0 : _a.screen.exclude_video);
+  const screenshots = includeScreenshots ? input.screenshots : [];
+  const sessionReplay = input.draft.sessionReplayEnabled ? input.sessionReplay : null;
+  await (sessionReplay == null ? void 0 : sessionReplay.whenRestarted());
+  const memoSelectors = (sessionReplay == null ? void 0 : sessionReplay.getMaskMemoSelectors()) ?? null;
+  assertScreenRulesCovered(context.rules, [
+    ...screenshots.map((shot) => shot.masks.selectors),
+    ...memoSelectors ? [memoSelectors] : []
+  ]);
+  const replay = sessionReplay ? await sessionReplay.takeSnapshot(((_b = context.rules) == null ? void 0 : _b.screen.mask_selectors) ?? []).catch((error) => {
+    if (isMaskingFailure(error)) throw error;
+    return null;
+  }) : null;
+  const uploads = includeScreenshots ? await input.transport.uploadScreenshotPreviews(
+    await maskScreenshotsForSubmit(screenshots, context.rules)
+  ) : [];
+  return {
+    screenshotUploadIds: uploads.map((upload) => upload.id),
+    replay,
+    screenshotExcluded: includeScreenshots && input.screenshotsDroppedByMasking ? uploads.length > 0 ? "partial" : "all" : null
+  };
+}
+function toHeadlessMaskingError(error, options) {
+  var _a;
+  if (error instanceof MaskingScreenRulesChangedError) {
+    (_a = options.onScreenRulesChanged) == null ? void 0 : _a.call(options);
+    return new IssueStickerHeadlessError(
+      "MASKING_POLICY_CHANGED",
+      screenRulesChangedMessage({
+        screenshots: options.recapturesScreenshots,
+        replay: options.replayRecording
+      }),
+      error
+    );
+  }
+  if (error instanceof MaskingPolicyUnavailableError) {
+    return new IssueStickerHeadlessError(
+      "MASKING_POLICY_UNAVAILABLE",
+      MASKING_COPY.policyUnavailable,
+      error
+    );
+  }
+  if (error instanceof MaskingSelectorUnsupportedError) {
+    return new IssueStickerHeadlessError(
+      "MASKING_SELECTOR_UNSUPPORTED",
+      MASKING_COPY.selectorUnsupported,
+      error
+    );
+  }
+  if (error instanceof ReplayMaskingError) {
+    options.restartReplay();
+    return new IssueStickerHeadlessError("CAPTURE_FAILED", MASKING_COPY.replayMaskFailed, error);
+  }
+  return error;
+}
 async function submitHeadlessIssueDraft({
   draft,
+  target,
   pendingVideoFile,
   transport,
   issueRepository,
@@ -1133,39 +1210,104 @@ async function submitHeadlessIssueDraft({
   logs,
   currentUrl,
   userAgent,
-  takeSessionReplaySnapshot,
-  getSocketConnections
+  screenshots,
+  screenshotsDroppedByMasking,
+  sessionReplay,
+  getSocketConnections,
+  maskingPolicy,
+  onScreenRulesChanged,
+  recapturesScreenshots
 }) {
-  const screenshotUploads = draft.mediaMode === "screenshot" ? await transport.uploadScreenshotPreviews(draft.screenshotPreviewUrls) : [];
-  const screenshotUploadIds = screenshotUploads.map((upload) => upload.id);
-  const attachments = await collectAttachmentUploads({
-    takeReplay: draft.sessionReplayEnabled ? takeSessionReplaySnapshot : void 0,
-    getConnections: getSocketConnections
-  });
-  const { payload: issueData, stillOverBudget } = buildIssueCreatePayload({
-    draft,
-    auth,
-    config,
-    projectId,
-    uploads: {
-      screenshotUploadIds,
-      videoPending: draft.mediaMode === "video" && Boolean(pendingVideoFile),
-      replayPending: hasReplayUpload(attachments)
-    },
-    logs,
-    currentUrl,
-    userAgent
-  });
-  if (stillOverBudget) {
-    throw new IssueStickerHeadlessError(
-      "PAYLOAD_TOO_LARGE",
-      "이슈 데이터가 전송 한도를 넘어 저장할 수 없습니다. 설명을 줄이거나 첨부를 빼고 다시 시도해주세요."
-    );
-  }
+  const hasVideo = draft.mediaMode === "video" && Boolean(pendingVideoFile);
+  const socketConnections = getSocketConnections();
   const integrations = await issueRepository.buildIntegrationsPayload(draft, formSchema);
-  const issue = await issueRepository.createIssue({ ...issueData, integrations });
-  await issueRepository.syncDynamicFields(issue, draft, formSchema);
-  return { issue, attachments };
+  let result;
+  try {
+    result = await runMaskedSubmit({
+      source: maskingPolicy,
+      projectId,
+      prepareScreen: (context) => prepareHeadlessScreenAttachments({
+        context,
+        draft,
+        transport,
+        screenshots,
+        screenshotsDroppedByMasking,
+        sessionReplay
+      }),
+      submit: async (context, screen) => {
+        var _a, _b, _c;
+        const masked = applySubmitMasking({
+          snapshot: context.snapshot,
+          projectId,
+          networkLogs: logs.networkLogs,
+          consoleLogs: logs.consoleLogs,
+          socketConnections,
+          pageUrl: currentUrl
+        });
+        const videoExcluded = hasVideo && Boolean((_a = masked.rules) == null ? void 0 : _a.screen.exclude_video);
+        const replay = screen.replay;
+        const attachments = await collectAttachmentUploads({
+          takeReplay: replay ? async () => replay : void 0,
+          getConnections: () => masked.socketConnections
+        });
+        const maskSelectors = ((_b = context.rules) == null ? void 0 : _b.screen.mask_selectors) ?? [];
+        const position = {
+          ...draft.position,
+          ...maskPositionForSubmit(draft.position, target, maskSelectors)
+        };
+        const { payload: issueData, stillOverBudget } = buildIssueCreatePayload({
+          draft: {
+            ...draft,
+            position,
+            // 마스킹 정책 때문에 버린 스크린샷은 이슈에도 남긴다. 말없이 빼지 않는다.
+            ...screen.screenshotExcluded ? {
+              description: appendMaskingNotice(
+                draft.description,
+                screenshotExclusionNotice(screen.screenshotExcluded)
+              )
+            } : {}
+          },
+          auth,
+          config,
+          projectId,
+          uploads: {
+            screenshotUploadIds: screen.screenshotUploadIds,
+            videoPending: hasVideo && !videoExcluded,
+            replayPending: hasReplayUpload(attachments)
+          },
+          logs: { networkLogs: masked.networkLogs, consoleLogs: masked.consoleLogs },
+          currentUrl: masked.pageUrl,
+          userAgent,
+          maskingPolicyVersion: masked.version
+        });
+        if (stillOverBudget) {
+          throw new IssueStickerHeadlessError(
+            "PAYLOAD_TOO_LARGE",
+            "이슈 데이터가 전송 한도를 넘어 저장할 수 없습니다. 설명을 줄이거나 첨부를 빼고 다시 시도해주세요."
+          );
+        }
+        const issue = await issueRepository.createIssue({ ...issueData, integrations });
+        if (draft.sessionReplayEnabled && ((_c = sessionReplay.getMaskMemoSelectors()) == null ? void 0 : _c.length) === 0 && collectSnapshotSelectors(context.snapshot).length > 0) {
+          sessionReplay.restartRecording();
+        }
+        return {
+          issue,
+          attachments,
+          videoExcluded,
+          screenshotExcluded: screen.screenshotExcluded !== null
+        };
+      }
+    });
+  } catch (error) {
+    throw toHeadlessMaskingError(error, {
+      onScreenRulesChanged,
+      replayRecording: sessionReplay.isRecording(),
+      recapturesScreenshots,
+      restartReplay: () => sessionReplay.restartRecording()
+    });
+  }
+  await issueRepository.syncDynamicFields(result.issue, draft, formSchema);
+  return result;
 }
 const HEADLESS_CAPTURE_STYLE_ID = "issue-sticker-headless-capture-style";
 const HEADLESS_CAPTURE_STYLE = `
@@ -1272,6 +1414,13 @@ function toHeadlessAttachmentUpload(state) {
     progress: state.bytesTotal > 0 ? state.bytesSent / state.bytesTotal : 0
   };
 }
+function withExclusions(issue, flags) {
+  return {
+    ...issue,
+    ...flags.videoExcluded ? { videoExcluded: true } : {},
+    ...flags.screenshotExcluded ? { screenshotExcluded: true } : {}
+  };
+}
 class HeadlessClientImpl {
   constructor(config) {
     var _a;
@@ -1282,6 +1431,12 @@ class HeadlessClientImpl {
     this.initializePromise = null;
     this.captureCleanup = null;
     this.captureSession = null;
+    this.livePolicySource = {
+      getMaskingPolicySnapshot: () => this.maskingPolicy.getMaskingPolicySnapshot(),
+      refreshMaskingPolicySnapshot: (options) => this.maskingPolicy.refreshMaskingPolicySnapshot(options)
+    };
+    this.maskingPolicyPrefetch = null;
+    this.maskingPolicyFetchedAt = null;
     this.suppressNextVideoStopSelection = false;
     this.destroyed = false;
     if (!((_a = config.apiKey) == null ? void 0 : _a.trim())) {
@@ -1291,12 +1446,13 @@ class HeadlessClientImpl {
       apiKey: config.apiKey,
       getTenantId: () => this.snapshot.auth.tenantId,
       getProjectId: () => this.snapshot.auth.projectId,
-      onToken: (result) => this.state.applyBridgeToken(result)
+      onToken: (result) => this.applyBridgeToken(result)
     });
     this.transport = new HeadlessTransport({
       getAuthMode: () => this.snapshot.auth.mode,
       resolveAuthorizationHeader: (forceRefreshMemberToken) => this.resolveAuthorizationHeader(forceRefreshMemberToken)
     });
+    this.maskingPolicy = this.createMaskingPolicy();
     this.issueRepository = new HeadlessIssueRepository({
       transport: this.transport,
       getProjectId: () => this.state.requireProjectId(),
@@ -1339,7 +1495,14 @@ class HeadlessClientImpl {
       });
     });
     this.sessionReplayController = new SessionReplayCaptureController({
-      loadCapabilities: () => this.request("/api/session-replays/capabilities")
+      loadCapabilities: () => this.request("/api/session-replays/capabilities"),
+      // 녹화는 초기화(initializeInternal)가 정책 요청을 띄운 뒤에 시작한다. 같은 요청을 기다린다.
+      maskingPolicy: {
+        source: this.livePolicySource,
+        pendingRefresh: () => this.maskingPolicyPrefetch,
+        refreshedWithin: (maxAgeMs) => this.maskingPolicyFetchedAt !== null && Date.now() - this.maskingPolicyFetchedAt <= maxAgeMs
+      },
+      reportInProgress: () => this.snapshot.draft !== null
     });
     this.sessionReplayController.subscribe((sessionReplay) => {
       this.applySessionReplaySnapshot(sessionReplay);
@@ -1511,19 +1674,24 @@ class HeadlessClientImpl {
     this.state.setSnapshot({ phase: "submittingIssue", error: null });
     try {
       const session = this.captureSession;
-      const screenshotPreviewUrls = (session == null ? void 0 : session.screenshots) ? await session.screenshots : this.state.requireDraft().screenshotPreviewUrls;
+      const captured = (session == null ? void 0 : session.screenshots) ? await session.screenshots : NO_HEADLESS_SCREENSHOTS;
       const formSchema = this.snapshot.formSchema ?? ((session == null ? void 0 : session.formSchema) ? await session.formSchema : null);
       const submission = {
         ...this.state.requireDraft(),
-        screenshotPreviewUrls,
         title: input.title,
         description: input.description,
         intent: input.intent,
         dynamicFields: input.dynamicFields ?? {}
       };
       const videoFile = submission.mediaMode === "video" ? this.pendingMedia.videoFile : null;
-      const { issue: createdIssue, attachments } = await submitHeadlessIssueDraft({
+      const {
+        issue: createdIssue,
+        attachments,
+        videoExcluded,
+        screenshotExcluded
+      } = await submitHeadlessIssueDraft({
         draft: submission,
+        target: (session == null ? void 0 : session.target) ?? null,
         pendingVideoFile: this.pendingMedia.videoFile,
         transport: this.transport,
         issueRepository: this.issueRepository,
@@ -1534,15 +1702,26 @@ class HeadlessClientImpl {
         logs: this.logCollectors.collect(),
         currentUrl: getCurrentPageUrl(),
         userAgent: typeof navigator !== "undefined" ? navigator.userAgent : void 0,
-        takeSessionReplaySnapshot: () => this.takeSessionReplaySnapshot(),
-        getSocketConnections: () => this.logCollectors.getSocketConnections()
+        screenshots: captured.screenshots,
+        screenshotsDroppedByMasking: captured.maskingDropped,
+        sessionReplay: this.submitReplay(),
+        getSocketConnections: () => this.logCollectors.getSocketConnections(),
+        maskingPolicy: this.livePolicySource,
+        // 화면 규칙이 바뀌어 제출이 실패하면 불린다. 같은 대상을 다시 찍어 미리보기를 바꾸고
+        // 리플레이 녹화를 새로 시작한다. 재시작은 거절하지 않는다.
+        onScreenRulesChanged: () => {
+          this.recaptureScreenshots();
+          void this.sessionReplayController.restartRecording();
+        },
+        // 스크린샷 모드로 시작한 캡처만 다시 찍는다(recaptureScreenshots).
+        recapturesScreenshots: Boolean(session == null ? void 0 : session.screenshots)
       });
       await enqueueIssueUploads({
         videoQueue: this.uploadQueues.video,
         attachmentQueue: this.uploadQueues.attachments,
         issueId: createdIssue.id,
         projectKey: this.state.requireProjectId(),
-        video: videoFile ? { blob: videoFile, mimeType: normalizeUploadMimeType(videoFile.type, "video") } : null,
+        video: videoFile && !videoExcluded ? { blob: videoFile, mimeType: normalizeUploadMimeType(videoFile.type, "video") } : null,
         attachments
       });
       this.clearCaptureListeners();
@@ -1554,7 +1733,7 @@ class HeadlessClientImpl {
         formSchema: null,
         issues: [createdIssue, ...this.snapshot.issues]
       });
-      return createdIssue;
+      return withExclusions(createdIssue, { videoExcluded, screenshotExcluded });
     } catch (error) {
       const nextError = this.toHeadlessError(error);
       this.state.setSnapshot({ phase: "draftingIssue", error: nextError });
@@ -1566,17 +1745,32 @@ class HeadlessClientImpl {
   }
   async createIssue(input) {
     var _a, _b;
+    const onError = input == null ? void 0 : input.onError;
+    let created = null;
     try {
-      if (!((_a = input.title) == null ? void 0 : _a.trim()) || !((_b = input.description) == null ? void 0 : _b.trim())) {
-        return this.skipCreateIssue("제목과 설명이 모두 필요합니다.");
+      if (!((_a = input == null ? void 0 : input.title) == null ? void 0 : _a.trim()) || !((_b = input.description) == null ? void 0 : _b.trim())) {
+        return this.skipCreateIssue(
+          new IssueStickerHeadlessError("VALIDATION_ERROR", "제목과 설명이 모두 필요합니다."),
+          onError
+        );
       }
       if (typeof document === "undefined" || typeof window === "undefined") {
-        return this.skipCreateIssue("브라우저 DOM 에서만 이슈를 만들 수 있습니다.");
+        return this.skipCreateIssue(
+          new IssueStickerHeadlessError(
+            "VALIDATION_ERROR",
+            "브라우저 DOM 에서만 이슈를 만들 수 있습니다."
+          ),
+          onError
+        );
       }
       await this.ensureInitialized();
       if (!this.autoIssueRateLimit.claim()) {
         return this.skipCreateIssue(
-          `${this.autoIssueRateLimit.label}까지 호출할 수 있습니다. 호출 조건을 다시 확인해주세요.`
+          new IssueStickerHeadlessError(
+            "RATE_LIMITED",
+            `${this.autoIssueRateLimit.label}까지 호출할 수 있습니다. 호출 조건을 다시 확인해주세요.`
+          ),
+          onError
         );
       }
       const target = input.target ?? document.body;
@@ -1586,18 +1780,21 @@ class HeadlessClientImpl {
         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 captured = input.media === "none" ? NO_HEADLESS_SCREENSHOTS : await this.captureScreenshots(target, await this.freshCaptureSelectors());
       const formSchema = this.snapshot.auth.mode === "member" && Object.keys(input.dynamicFields ?? {}).length > 0 ? await this.loadFormSchema({}) : null;
-      const { issue: createdIssue, attachments } = await submitHeadlessIssueDraft({
+      const {
+        issue: createdIssue,
+        attachments,
+        screenshotExcluded
+      } = await submitHeadlessIssueDraft({
         draft: {
           ...draft,
-          screenshotPreviewUrls,
+          screenshotPreviewUrls: [],
           title: input.title,
           description: input.description,
           dynamicFields: input.dynamicFields ?? {}
         },
+        target,
         pendingVideoFile: null,
         transport: this.transport,
         issueRepository: this.issueRepository,
@@ -1608,9 +1805,16 @@ class HeadlessClientImpl {
         logs,
         currentUrl: getCurrentPageUrl(),
         userAgent: typeof navigator !== "undefined" ? navigator.userAgent : void 0,
-        takeSessionReplaySnapshot: () => this.takeSessionReplaySnapshot(),
-        getSocketConnections: () => this.logCollectors.getSocketConnections()
+        screenshots: captured.screenshots,
+        screenshotsDroppedByMasking: captured.maskingDropped,
+        sessionReplay: this.submitReplay(),
+        getSocketConnections: () => this.logCollectors.getSocketConnections(),
+        maskingPolicy: this.livePolicySource,
+        // 미리보기가 없어 다시 찍지 않는다. 다음 호출이 새 규칙을 덮도록 리플레이 녹화만 새로 시작한다.
+        onScreenRulesChanged: () => void this.sessionReplayController.restartRecording(),
+        recapturesScreenshots: false
       });
+      created = withExclusions(createdIssue, { screenshotExcluded });
       await enqueueIssueUploads({
         videoQueue: this.uploadQueues.video,
         attachmentQueue: this.uploadQueues.attachments,
@@ -1622,22 +1826,51 @@ class HeadlessClientImpl {
       this.state.setSnapshot({
         issues: [createdIssue, ...this.snapshot.issues]
       });
-      return createdIssue;
+      return created;
     } catch (error) {
-      return this.skipCreateIssue("이슈를 생성하지 못했습니다.", error);
+      if (created) {
+        console.warn(
+          ISSUE_STICKER_INTERNAL_LOG_PREFIX,
+          "[headless] createIssue: 이슈를 생성한 뒤 후속 처리에 실패했습니다.",
+          error
+        );
+        return created;
+      }
+      const replay = this.submitReplay();
+      const mapped = toHeadlessMaskingError(error, {
+        onScreenRulesChanged: () => replay.restartRecording(),
+        replayRecording: replay.isRecording(),
+        recapturesScreenshots: false,
+        restartReplay: () => replay.restartRecording()
+      });
+      return this.skipCreateIssue(this.toHeadlessError(mapped), onError);
     }
   }
   /**
-   * createIssue 가 이슈를 만들지 않고 끝난 이유를 남긴다.
+   * createIssue 가 이슈를 만들지 않고 끝난 이유를 남기고 onError 로 넘긴다.
    *
    * devLogger 는 프로덕션 빌드에서 침묵하는데, 이 실패는 예외로 드러나지 않으므로
    * 통합한 쪽이 프로덕션에서도 알아야 한다. 접두어가 붙어 있어 우리 수집기가
    * 자기 로그로 걸러내므로 고객 이슈의 콘솔 로그를 오염시키지 않는다.
+   * onError 가 던져도 createIssue 는 던지지 않는다 — 전역 핸들러 안에서 부른 경우 루프가 된다.
    */
-  skipCreateIssue(reason, cause) {
-    const args = [ISSUE_STICKER_INTERNAL_LOG_PREFIX, "[headless] createIssue:", reason];
-    if (cause !== void 0) args.push(cause);
+  skipCreateIssue(error, onError) {
+    const args = [
+      ISSUE_STICKER_INTERNAL_LOG_PREFIX,
+      "[headless] createIssue:",
+      error.message
+    ];
+    if (error.cause !== void 0) args.push(error.cause);
     console.warn(...args);
+    try {
+      onError == null ? void 0 : onError(error);
+    } catch (callbackError) {
+      console.warn(
+        ISSUE_STICKER_INTERNAL_LOG_PREFIX,
+        "[headless] createIssue onError:",
+        callbackError
+      );
+    }
     return null;
   }
   async loginAsMember() {
@@ -1682,8 +1915,35 @@ class HeadlessClientImpl {
     this.logCollectors.stop();
     this.autoIssueRateLimit.reset();
     this.authBridge.destroy();
+    this.maskingPolicy = this.createMaskingPolicy();
+    this.maskingPolicyPrefetch = null;
+    this.maskingPolicyFetchedAt = null;
     this.state.reset();
   }
+  createMaskingPolicy() {
+    const inner = createMaskingPolicySource({
+      // 제출 직전 재확인이 브라우저 캐시의 옛 버전을 받으면 409 를 부른다.
+      fetchSnapshot: () => this.transport.request("/api/sdk/masking-policy", { cache: "no-store" }),
+      cache: createMemoryMaskingPolicyCache()
+    });
+    const source = {
+      getMaskingPolicySnapshot: () => inner.getMaskingPolicySnapshot(),
+      refreshMaskingPolicySnapshot: async (options) => {
+        const snapshot = await inner.refreshMaskingPolicySnapshot(options);
+        if (this.maskingPolicy === source) this.maskingPolicyFetchedAt = Date.now();
+        return snapshot;
+      }
+    };
+    return source;
+  }
+  /** 정책을 미리 받는다. 녹화 시작은 캐시가 없으면 이 요청을 기다린다. */
+  prefetchMaskingPolicy() {
+    const prefetch = this.maskingPolicy.refreshMaskingPolicySnapshot({
+      timeoutMs: MASKING_POLICY_PREFETCH_TIMEOUT_MS
+    });
+    prefetch.catch(() => void 0);
+    this.maskingPolicyPrefetch = prefetch;
+  }
   async initializeInternal() {
     this.state.setSnapshot({ phase: "initializing", error: null });
     try {
@@ -1706,6 +1966,7 @@ class HeadlessClientImpl {
         filterSchema: { groups: [], unavailableReason: "public-mode" }
       });
       this.logCollectors.start();
+      this.prefetchMaskingPolicy();
       const { video, attachments } = this.uploadQueues;
       void this.uploadQueues.resume([result.projectId]).then(() => {
         void video.pruneExpired();
@@ -1723,25 +1984,62 @@ class HeadlessClientImpl {
     const sessionReplay = this.sessionReplayController.getSnapshot();
     if (!sessionReplay.enabled || !sessionReplay.canAttach) return null;
     try {
-      const snapshot = await this.sessionReplayController.takeSnapshot();
+      const snapshot = await this.sessionReplayController.takeSnapshot([]);
       return snapshot ? toSessionReplayMeta(snapshot) : null;
     } catch {
       return null;
     }
   }
-  async takeSessionReplaySnapshot() {
-    const sessionReplay = this.sessionReplayController.getSnapshot();
-    if (!sessionReplay.enabled || !sessionReplay.canAttach) return null;
-    return this.sessionReplayController.takeSnapshot().catch(() => null);
+  /**
+   * 제출이 사용하는 리플레이 녹화. 꺼졌거나 한도를 넘으면 메모와 스냅샷이 null 이다. 스냅샷의
+   * 마스킹 실패는 삼키지 않는다 — submitDraft 가 이슈 생성을 멈추고 CAPTURE_FAILED 로 바꾼다.
+   */
+  submitReplay() {
+    const controller = this.sessionReplayController;
+    const attached = () => {
+      const sessionReplay = controller.getSnapshot();
+      return sessionReplay.enabled && sessionReplay.canAttach;
+    };
+    return {
+      whenRestarted: () => controller.whenRestarted(),
+      getMaskMemoSelectors: () => attached() ? controller.getMaskMemoSelectors() : null,
+      takeSnapshot: async (maskSelectors) => attached() ? controller.takeSnapshot(maskSelectors) : null,
+      isRecording: () => controller.isRecording(),
+      restartRecording: () => void controller.restartRecording()
+    };
+  }
+  /**
+   * 다른 워크스페이스·프로젝트 컨텍스트로 바뀌면 정책을 새로 받고, 그 정책 선택자로 리플레이 녹화를
+   * 새로 시작한다.
+   */
+  applyBridgeToken(result) {
+    const { tenantId, projectId } = this.snapshot.auth;
+    this.state.applyBridgeToken(result);
+    const next = this.snapshot.auth;
+    if (tenantId !== null && (next.tenantId !== tenantId || next.projectId !== projectId)) {
+      this.maskingPolicy = this.createMaskingPolicy();
+      this.maskingPolicyFetchedAt = null;
+      this.prefetchMaskingPolicy();
+      void this.sessionReplayController.restartRecording();
+    }
   }
-  /** 스티커 목록에는 영상 URL 이 없다. 업로드 완료 때 받아 둔 URL 을 같은 이슈에 남긴다. */
+  /**
+   * 스티커 목록에는 영상 URL 도 업로드를 포기한 까닭도 없다. 업로드가 끝날 때 받아 둔 값을 같은
+   * 이슈에 남긴다. 까닭은 여전히 실패 상태일 때만 남긴다.
+   */
   keepKnownVideos(issues) {
-    const known = new Map(
-      this.snapshot.issues.flatMap((issue) => issue.video ? [[issue.id, issue.video]] : [])
-    );
-    return issues.map(
-      (issue) => !issue.video && known.has(issue.id) ? { ...issue, video: known.get(issue.id) } : issue
-    );
+    const known = new Map(this.snapshot.issues.map((issue) => [issue.id, issue]));
+    return issues.map((issue) => {
+      const previous = known.get(issue.id);
+      const video = !issue.video ? previous == null ? void 0 : previous.video : void 0;
+      const reason = issue.video_status === "failed" ? previous == null ? void 0 : previous.video_failure_reason : void 0;
+      if (!video && !reason) return issue;
+      return {
+        ...issue,
+        ...video ? { video } : {},
+        ...reason ? { video_failure_reason: reason } : {}
+      };
+    });
   }
   /**
    * 업로드가 끝나면 목록·상세의 같은 이슈에 영상 상태를 반영한다. 완료는 재조회해 영상 URL 까지
@@ -1752,12 +2050,18 @@ class HeadlessClientImpl {
     const refreshed = event.type === "completed" ? await this.issueRepository.openIssue(event.issueId).catch(() => null) : null;
     if (this.destroyed) return;
     const videoStatus = event.type === "completed" ? "ready" : "failed";
+    const failure = event.reason ? { video_failure_reason: event.reason } : {};
     const { issues, activeIssue } = this.snapshot;
     this.state.setSnapshot({
       issues: issues.map(
-        (issue) => issue.id === event.issueId ? { ...issue, video: (refreshed == null ? void 0 : refreshed.video) ?? issue.video, video_status: videoStatus } : issue
+        (issue) => issue.id === event.issueId ? {
+          ...issue,
+          video: (refreshed == null ? void 0 : refreshed.video) ?? issue.video,
+          video_status: videoStatus,
+          ...failure
+        } : issue
       ),
-      activeIssue: (activeIssue == null ? void 0 : activeIssue.id) === event.issueId ? refreshed ?? { ...activeIssue, video_status: videoStatus } : activeIssue
+      activeIssue: (activeIssue == null ? void 0 : activeIssue.id) === event.issueId ? refreshed ?? { ...activeIssue, video_status: videoStatus, ...failure } : activeIssue
     });
   }
   /** 리플레이가 연결되거나 포기되면 목록·상세의 같은 이슈에 상태를 반영한다. 소켓 전사는 상태가 없다. */
@@ -1840,15 +2144,16 @@ class HeadlessClientImpl {
     this.beginBackgroundCapturePreparation(draft, target);
   }
   beginBackgroundCapturePreparation(draft, target) {
-    var _a, _b;
+    var _a;
     const token = {};
     this.captureSession = {
       token,
+      target,
       screenshots: draft.mediaMode === "screenshot" ? (
-        // 스크린샷은 웹폰트·이미지를 fetch 로 인라인한다. 그 사이 수집을 멈추지 않으면
-        // 최근 50건이 그 요청들로 채워져 진짜 앱 요청이 밀려난다.
-        this.logCollectors.pauseNetworkWhile(
-          () => captureHeadlessScreenshots({ target, excludeSelectors: this.getExcludeSelectors() })
+        // 영역은 초기화 때 받아 둔 정책 캐시의 선택자로 계산한다. 캐시가 없으면 빈 목록이고,
+        // 미리보기를 칠할 때 덮개 검사에 걸려 한 번 다시 찍는다.
+        loadCaptureSelectors(() => this.livePolicySource.getMaskingPolicySnapshot()).then(
+          (selectors) => this.captureScreenshots(target, selectors ?? [])
         )
       ) : null,
       formSchema: this.loadFormSchema({})
@@ -1857,11 +2162,10 @@ class HeadlessClientImpl {
       var _a2;
       return ((_a2 = this.captureSession) == null ? void 0 : _a2.token) === token;
     };
-    void ((_a = this.captureSession.screenshots) == null ? void 0 : _a.then((screenshotPreviewUrls) => {
-      if (!isCurrentSession()) return;
-      this.mergeDraft({ screenshotPreviewUrls });
-    }));
-    void ((_b = this.captureSession.formSchema) == null ? void 0 : _b.then((formSchema) => {
+    if (this.captureSession.screenshots) {
+      this.publishPreview(this.captureSession.screenshots, true);
+    }
+    void ((_a = this.captureSession.formSchema) == null ? void 0 : _a.then((formSchema) => {
       if (!isCurrentSession()) return;
       this.state.setSnapshot({ formSchema });
     }));
@@ -1874,6 +2178,64 @@ class HeadlessClientImpl {
       });
     }
   }
+  /**
+   * 화면 규칙이 바뀌어 지금 원본을 쓸 수 없다. 같은 대상을 다시 찍어 미리보기를 바꾼다.
+   *
+   * 선택자는 캐시가 아니라 제출과 같은 방식으로 다시 받아 읽는다. 받은 스냅샷의 캐시 쓰기는
+   * 기다리지 않고 떠나므로 캐시만 읽으면 바뀌기 전 선택자로 찍을 수 있다. 정책을 받지 못하면
+   * 스크린샷 없이 두고, 마스킹 정책 때문에 버렸다고 표시해 제출 때 알린다.
+   */
+  recaptureScreenshots(autoRecapture = true) {
+    const session = this.captureSession;
+    if (!(session == null ? void 0 : session.screenshots)) return;
+    const screenshots = this.freshCaptureSelectors().then(
+      (selectors) => this.captureScreenshots(session.target, selectors),
+      () => ({ screenshots: [], maskingDropped: true })
+    );
+    this.captureSession = { ...session, screenshots };
+    this.mergeDraft({ screenshotPreviewUrls: [] });
+    this.publishPreview(screenshots, autoRecapture);
+  }
+  /**
+   * 원본이 준비되면 칠한 미리보기를 draft 에 싣는다. 칠하지 못하면 원본을 내보내지 않고 비워 둔다.
+   *
+   * 덮개 검사에 걸리면(캐시 없이 빈 선택자로 찍었거나 그 사이 정책이 바뀌었다) 그대로 두면 첫 제출이
+   * 반드시 실패하므로 같은 대상을 한 번 다시 찍는다. 다시 찍은 캡처는 또 다시 찍지 않는다.
+   */
+  publishPreview(screenshots, autoRecapture) {
+    const isCurrent = () => {
+      var _a;
+      return ((_a = this.captureSession) == null ? void 0 : _a.screenshots) === screenshots;
+    };
+    void screenshots.then((captured) => this.previewScreenshots(captured.screenshots)).then(
+      (screenshotPreviewUrls) => {
+        if (isCurrent()) this.mergeDraft({ screenshotPreviewUrls });
+      },
+      (error) => {
+        if (isCurrent() && autoRecapture && error instanceof MaskingScreenRulesChangedError) {
+          this.recaptureScreenshots(false);
+        }
+      }
+    );
+  }
+  /** 제출과 같은 방식(짧게 다시 받고 실패하면 캐시)으로 읽은 정책 선택자. 둘 다 없으면 실패한다. */
+  async freshCaptureSelectors() {
+    return collectSnapshotSelectors(await loadMaskingPolicyForSubmit(this.livePolicySource));
+  }
+  captureScreenshots(target, maskSelectors) {
+    return this.logCollectors.pauseNetworkWhile(
+      () => captureHeadlessScreenshots({
+        target,
+        excludeSelectors: this.getExcludeSelectors(),
+        maskSelectors
+      })
+    );
+  }
+  async previewScreenshots(shots) {
+    const snapshot = await loadMaskingPolicyForSubmit(this.livePolicySource);
+    const rules = resolveEffectivePolicy(snapshot, this.state.requireProjectId());
+    return maskScreenshotsForSubmit(shots, rules);
+  }
   mergeDraft(patch) {
     const draft = this.snapshot.draft;
     if (!draft) return;