@solhun/feedback-kit-web 0.2.2 → 0.2.3

package/dist/index.d.cts

@@ -188,10 +188,15 @@ declare const captureWebScreenshot: ScreenshotCapture;
 declare const reencodeWebScreenshot: ScreenshotReencode;
 
 /**
- * 바깥 → 안쪽 순서의 컴포넌트 이름 목록.
+ * 바깥 → 안쪽 순서의 **앱** 컴포넌트 이름 목록.
  * 예: `["App", "LoginPage", "LoginForm", "SubmitButton"]`
  *
- * @param limit 너무 깊은 트리는 자른다. 앱 루트까지 20 겹이면 이미 충분한 단서다.
+ * 프레임워크가 만든 이름은 뺀다. 다 빼고 나면 빈 배열이고, 그게 정직한 답이다 —
+ * 서버 컴포넌트만 있는 화면에는 클라이언트 fiber 에 앱 이름이 애초에 없다.
+ *
+ * @param limit 안쪽에서부터 이만큼만 남긴다. 요소에 **가까운 쪽이 단서**라, 넘치면
+ *   바깥(앱 루트 쪽)을 버린다. 예전엔 20 이었는데 그 길이가 그대로 제보에 실려서
+ *   한 줄이 300자를 넘었다.
  */
 declare function reactComponentPath(node: Element, limit?: number): string[];
 /** 제보 본문에 실을 한 줄. 컴포넌트를 못 찾으면 null(빈 줄을 만들지 않는다). */

package/dist/index.d.ts

@@ -188,10 +188,15 @@ declare const captureWebScreenshot: ScreenshotCapture;
 declare const reencodeWebScreenshot: ScreenshotReencode;
 
 /**
- * 바깥 → 안쪽 순서의 컴포넌트 이름 목록.
+ * 바깥 → 안쪽 순서의 **앱** 컴포넌트 이름 목록.
  * 예: `["App", "LoginPage", "LoginForm", "SubmitButton"]`
  *
- * @param limit 너무 깊은 트리는 자른다. 앱 루트까지 20 겹이면 이미 충분한 단서다.
+ * 프레임워크가 만든 이름은 뺀다. 다 빼고 나면 빈 배열이고, 그게 정직한 답이다 —
+ * 서버 컴포넌트만 있는 화면에는 클라이언트 fiber 에 앱 이름이 애초에 없다.
+ *
+ * @param limit 안쪽에서부터 이만큼만 남긴다. 요소에 **가까운 쪽이 단서**라, 넘치면
+ *   바깥(앱 루트 쪽)을 버린다. 예전엔 20 이었는데 그 길이가 그대로 제보에 실려서
+ *   한 줄이 300자를 넘었다.
  */
 declare function reactComponentPath(node: Element, limit?: number): string[];
 /** 제보 본문에 실을 한 줄. 컴포넌트를 못 찾으면 null(빈 줄을 만들지 않는다). */

package/dist/index.js

@@ -17,6 +17,44 @@ import {
 } from "@solhun/feedback-kit-core";
 
 // src/react-tree.ts
+var FRAMEWORK_INTERNALS = /* @__PURE__ */ new Set([
+  // Next.js App Router
+  "AppRouter",
+  "InnerLayoutRouter",
+  "OuterLayoutRouter",
+  "LayoutRouterContext",
+  "RenderFromTemplateContext",
+  "TemplateContext",
+  "SegmentStateProvider",
+  "SegmentViewNode",
+  "ScrollAndMaybeFocusHandler",
+  "InnerScrollAndFocusHandler",
+  "InnerScrollAndFocusHandlerOld",
+  "RedirectBoundary",
+  "RedirectErrorBoundary",
+  "NotFoundBoundary",
+  "NotFoundErrorBoundary",
+  "HTTPAccessFallbackBoundary",
+  "HTTPAccessFallbackErrorBoundary",
+  "DevRootHTTPAccessFallbackBoundary",
+  "LoadingBoundary",
+  "ErrorBoundaryHandler",
+  "MetadataBoundary",
+  "ViewportBoundary",
+  "OutletBoundary",
+  // 개발 전용 오버레이 — 프로덕션엔 없지만 dev 제보에는 항상 낀다
+  "HotReload",
+  "AppDevOverlay",
+  "AppDevOverlayErrorBoundary",
+  "ReactDevOverlay",
+  "DevOverlay",
+  "Router",
+  "ServerRoot",
+  "RSCComponent"
+]);
+function isFrameworkName(name) {
+  return FRAMEWORK_INTERNALS.has(name) || name.startsWith("__next");
+}
 function componentName(type) {
   if (typeof type === "function") {
     const fn = type;
@@ -39,13 +77,15 @@ function fiberOf(node) {
   }
   return null;
 }
-function reactComponentPath(node, limit = 20) {
+function reactComponentPath(node, limit = 5) {
   try {
     let fiber = fiberOf(node);
     const names = [];
-    while (fiber && names.length < limit) {
+    let depth = 0;
+    while (fiber && names.length < limit && depth < 200) {
+      depth += 1;
       const name = componentName(fiber.elementType ?? fiber.type);
-      if (name && names[0] !== name) names.unshift(name);
+      if (name && !isFrameworkName(name) && names[0] !== name) names.unshift(name);
       fiber = fiber.return ?? null;
     }
     return names;