@tra-bilisim/report-issue 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 TRA Bilişim
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,109 @@
+# @tra-bilisim/report-issue
+
+Self-contained **"Report an Issue"** widget for React apps. Zero Tailwind, zero
+design-system coupling — bring your own `submit`, everything else has a default.
+
+- 📸 Masked screenshot with an annotation editor (arrows, boxes, text, highlighter)
+- 🎥 Tab-only screen recording (KVKK-safe, current tab only, hard max duration)
+- 🕵️ Console + network log capture (ring buffer)
+- 🔒 KVKK explicit-consent gate before any capture, with versioned consent records
+- 🎨 Standalone Radix + scoped CSS (`.rpi-*`, `--rpi-*`), light/dark aware
+
+## Install
+
+```bash
+npm install @tra-bilisim/report-issue
+```
+
+Peer deps: `react` and `react-dom` (>=18). `axios` is only needed if you use the
+axios network-logging adapter.
+
+## Usage
+
+```tsx
+import {
+  ReportIssueProvider,
+  FloatingReportButton,
+  type ReportIssueAdapter,
+} from '@tra-bilisim/report-issue';
+import '@tra-bilisim/report-issue/styles.css';
+
+const adapter: ReportIssueAdapter = {
+  // The ONLY required field. Persist the report however you like.
+  submit: async (payload, formData) => {
+    const res = await fetch('/api/report-issue', { method: 'POST', body: formData });
+    return { ok: res.ok };
+  },
+
+  // Everything below is optional.
+  getCategories: async () => [{ label: 'UI', value: 1 }, { label: 'Data', value: 2 }],
+  getMetadata: () => ({ userId: currentUser.id, roles: currentUser.roles }),
+  getCurrentUrl: () => window.location.href,
+  pageOptions: [{ value: 'https://app/x', label: '/x' }],
+  environmentResolver: url => (url.includes('localhost') ? 'Locale' : 'Prod'),
+  t: key => i18n.translate(key),   // English keys are the default fallback text
+  locale: 'tr',
+  toast: { success: msg => toast.success(msg), error: msg => toast.error(msg) },
+};
+
+function App() {
+  return (
+    <ReportIssueProvider config={adapter}>
+      <YourApp />
+      <FloatingReportButton />
+    </ReportIssueProvider>
+  );
+}
+```
+
+## Network log capture (optional)
+
+Feed your axios instance into the shared log store with one call:
+
+```ts
+import { attachAxiosNetworkLogging } from '@tra-bilisim/report-issue/adapters/axios';
+attachAxiosNetworkLogging(myAxiosInstance);
+```
+
+Or wire your own transport by calling the primitives from `@tra-bilisim/report-issue/core`:
+`beginNetworkRequest`, `completeNetworkRequest`, `failNetworkRequest`.
+
+## Wire contract (`submit`)
+
+`submit(payload, formData)` receives both a structured `payload` and a ready-to-POST
+`FormData`. The `FormData` fields are the canonical contract your backend consumes:
+
+| Field | Type | Notes |
+|---|---|---|
+| `files` | File[] (repeated) | screenshots / recordings / uploads |
+| `page` | string | absolute URL |
+| `environment` | string | from `environmentResolver` |
+| `categoryId` | string | omitted when no category |
+| `description` | string | omitted when empty |
+| `consoleLogs` | JSON string | `ConsoleEntry[]` |
+| `networkLogs` | JSON string | `NetworkEntry[]` |
+| `recordingConsent` | JSON string | only when a recording is attached |
+| `screenshotConsent` | JSON string | only when a screenshot is attached |
+| `metadata` | JSON string | `ReportMetadata` (user, roles, UA, resolution, ts) |
+
+`submit` must resolve to `{ ok: boolean; message?: string | null }`.
+
+## Masking controls (data attributes)
+
+- `data-report-mask-ignore` — never mask this subtree (also excluded from the video mask)
+- `data-report-mask-text-ignore` — keep text visible (still masks inputs)
+- `data-report-ignore-capture` — exclude from screenshots entirely
+- `data-report-mask-control` / `data-report-mask-value` — force text masking
+
+## Entry points
+
+- `@tra-bilisim/report-issue` — React provider, button, dialog, hooks, types
+- `@tra-bilisim/report-issue/core` — headless, framework-agnostic engine
+- `@tra-bilisim/report-issue/adapters/axios` — axios network-logging adapter
+- `@tra-bilisim/report-issue/styles.css` — required stylesheet
+
+## Build
+
+```bash
+npm run build   # tsup → dist/ (esm + d.ts + index.css)
+```

package/dist/AnnotationEditor-ILMYBTOG.js

@@ -0,0 +1,379 @@
+import { useReportIssueConfig, Button } from './chunk-JMQUG5Q7.js';
+import './chunk-EXDFVVYA.js';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { Canvas, PencilBrush, FabricImage, Rect, Ellipse, Line, IText, Triangle, Group } from 'fabric';
+import { MousePointer2, Pencil, Minus, MoveRight, Square, Circle, Type, Highlighter, Undo2, Redo2 } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var COLORS = ["#ef4444", "#f97316", "#eab308", "#22c55e", "#3b82f6", "#000000", "#ffffff"];
+var dataUrlToBlob = (dataUrl) => {
+  const [header, data] = dataUrl.split(",");
+  const mime = header.match(/data:(.*?);base64/)?.[1] ?? "application/octet-stream";
+  const binary = atob(data);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i += 1) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return new Blob([bytes], { type: mime });
+};
+var AnnotationEditor = ({ imageDataUrl, onConfirm, onCancel }) => {
+  const { t } = useReportIssueConfig();
+  const canvasElRef = useRef(null);
+  const containerRef = useRef(null);
+  const fabricRef = useRef(null);
+  const [tool, setTool] = useState("select");
+  const [color, setColor] = useState("#ef4444");
+  const [strokeWidth, setStrokeWidth] = useState(4);
+  const historyRef = useRef([]);
+  const historyIndexRef = useRef(-1);
+  const isRestoringRef = useRef(false);
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
+  const initializedRef = useRef(false);
+  const imgRefCache = useRef(null);
+  const drawingRef = useRef({ obj: null, startX: 0, startY: 0 });
+  const toolRef = useRef(tool);
+  const colorRef = useRef(color);
+  const strokeRef = useRef(strokeWidth);
+  useEffect(() => {
+    toolRef.current = tool;
+  }, [tool]);
+  useEffect(() => {
+    colorRef.current = color;
+  }, [color]);
+  useEffect(() => {
+    strokeRef.current = strokeWidth;
+  }, [strokeWidth]);
+  const saveHistory = useCallback(() => {
+    const canvas = fabricRef.current;
+    if (!canvas || isRestoringRef.current) return;
+    const json = JSON.stringify(canvas.toJSON());
+    historyRef.current = historyRef.current.slice(0, historyIndexRef.current + 1);
+    historyRef.current.push(json);
+    historyIndexRef.current = historyRef.current.length - 1;
+    setCanUndo(historyIndexRef.current > 0);
+    setCanRedo(false);
+  }, []);
+  const restore = useCallback((index) => {
+    const canvas = fabricRef.current;
+    if (!canvas || index < 0 || index >= historyRef.current.length) return;
+    isRestoringRef.current = true;
+    canvas.loadFromJSON(historyRef.current[index]).then(() => {
+      canvas.renderAll();
+      isRestoringRef.current = false;
+      historyIndexRef.current = index;
+      setCanUndo(index > 0);
+      setCanRedo(index < historyRef.current.length - 1);
+    });
+  }, []);
+  const undo = useCallback(() => restore(historyIndexRef.current - 1), [restore]);
+  const redo = useCallback(() => restore(historyIndexRef.current + 1), [restore]);
+  const applySize = useCallback(() => {
+    const canvas = fabricRef.current;
+    const img = imgRefCache.current;
+    const container = containerRef.current;
+    if (!canvas || !img || !container) return;
+    const { width: containerW, height: containerH } = container.getBoundingClientRect();
+    if (!containerW || !containerH) return;
+    const el = img.getElement();
+    const imgW = el?.naturalWidth || img.width || containerW;
+    const imgH = el?.naturalHeight || img.height || containerH;
+    const scale = Math.min(containerW / imgW, containerH / imgH);
+    const w = Math.round(imgW * scale);
+    const h = Math.round(imgH * scale);
+    canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
+    canvas.setDimensions({ width: w, height: h });
+    img.set({
+      scaleX: scale,
+      scaleY: scale,
+      left: 0,
+      top: 0,
+      originX: "left",
+      originY: "top"
+    });
+    img.setCoords();
+    canvas.backgroundImage = img;
+    canvas.renderAll();
+  }, []);
+  useEffect(() => {
+    const canvasEl = canvasElRef.current;
+    const container = containerRef.current;
+    if (!canvasEl || !container) return void 0;
+    initializedRef.current = false;
+    imgRefCache.current = null;
+    const canvas = new Canvas(canvasEl, { selection: true });
+    fabricRef.current = canvas;
+    let resizeTimeout;
+    const initCanvas = () => {
+      if (initializedRef.current) return;
+      FabricImage.fromURL(imageDataUrl).then((img) => {
+        if (!fabricRef.current) return;
+        imgRefCache.current = img;
+        img.selectable = false;
+        img.evented = false;
+        applySize();
+        historyRef.current = [JSON.stringify(fabricRef.current.toJSON())];
+        historyIndexRef.current = 0;
+        initializedRef.current = true;
+      });
+    };
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      const { width, height } = entry.contentRect;
+      if (!width || !height) return;
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        if (!initializedRef.current) initCanvas();
+        else applySize();
+      }, 300);
+    });
+    observer.observe(container);
+    canvas.on("object:added", saveHistory);
+    canvas.on("object:modified", saveHistory);
+    return () => {
+      clearTimeout(resizeTimeout);
+      observer.disconnect();
+      canvas.dispose();
+      fabricRef.current = null;
+      imgRefCache.current = null;
+      initializedRef.current = false;
+    };
+  }, [imageDataUrl, saveHistory, applySize]);
+  useEffect(() => {
+    const canvas = fabricRef.current;
+    if (!canvas) return;
+    if (tool === "pencil") {
+      const brush = new PencilBrush(canvas);
+      brush.color = color;
+      brush.width = strokeWidth;
+      canvas.freeDrawingBrush = brush;
+      canvas.isDrawingMode = true;
+      canvas.selection = false;
+    } else {
+      canvas.isDrawingMode = false;
+      canvas.selection = tool === "select";
+    }
+    canvas.forEachObject((obj) => {
+      obj.selectable = tool === "select";
+      obj.evented = tool === "select";
+    });
+    canvas.renderAll();
+  }, [tool, color, strokeWidth]);
+  useEffect(() => {
+    const canvas = fabricRef.current;
+    if (!canvas) return void 0;
+    const handleMouseDown = (opt) => {
+      const activeTool = toolRef.current;
+      if (activeTool === "select" || activeTool === "pencil") return;
+      const p = canvas.getScenePoint(opt.e);
+      drawingRef.current.startX = p.x;
+      drawingRef.current.startY = p.y;
+      const c = colorRef.current;
+      const sw = strokeRef.current;
+      let obj = null;
+      if (activeTool === "rect") {
+        obj = new Rect({ left: p.x, top: p.y, width: 1, height: 1, originX: "left", originY: "top", fill: "transparent", stroke: c, strokeWidth: sw, strokeUniform: true });
+      } else if (activeTool === "ellipse") {
+        obj = new Ellipse({ left: p.x, top: p.y, rx: 0, ry: 0, originX: "center", originY: "center", fill: "transparent", stroke: c, strokeWidth: sw, strokeUniform: true });
+      } else if (activeTool === "highlighter") {
+        obj = new Rect({ left: p.x, top: p.y, width: 1, height: 1, originX: "left", originY: "top", fill: c, opacity: 0.35, stroke: "transparent", strokeUniform: true });
+      } else if (activeTool === "line" || activeTool === "arrow") {
+        obj = new Line([p.x, p.y, p.x, p.y], { stroke: c, strokeWidth: sw });
+      } else if (activeTool === "text") {
+        const text = new IText("", {
+          left: p.x,
+          top: p.y,
+          fill: c,
+          fontSize: Math.max(16, sw * 5),
+          hiddenTextareaContainer: containerRef.current
+        });
+        canvas.add(text);
+        canvas.setActiveObject(text);
+        canvas.renderAll();
+        requestAnimationFrame(() => {
+          text.enterEditing();
+          text.selectAll();
+          text.hiddenTextarea?.focus();
+          canvas.renderAll();
+        });
+        setTool("select");
+        return;
+      }
+      if (obj) {
+        obj.selectable = false;
+        obj.evented = false;
+        canvas.add(obj);
+        drawingRef.current.obj = obj;
+      }
+    };
+    const handleMouseMove = (opt) => {
+      const { obj, startX, startY } = drawingRef.current;
+      if (!obj) return;
+      const p = canvas.getScenePoint(opt.e);
+      const activeTool = toolRef.current;
+      if (activeTool === "rect" || activeTool === "highlighter") {
+        obj.set({
+          left: Math.min(startX, p.x),
+          top: Math.min(startY, p.y),
+          scaleX: Math.max(Math.abs(p.x - startX), 1),
+          scaleY: Math.max(Math.abs(p.y - startY), 1)
+        });
+        obj.setCoords();
+      } else if (activeTool === "ellipse") {
+        obj.set({
+          left: (startX + p.x) / 2,
+          top: (startY + p.y) / 2,
+          rx: Math.abs(p.x - startX) / 2,
+          ry: Math.abs(p.y - startY) / 2
+        });
+        obj.setCoords();
+      } else if (activeTool === "line" || activeTool === "arrow") {
+        obj.set({ x2: p.x, y2: p.y });
+      }
+      canvas.renderAll();
+    };
+    const handleMouseUp = () => {
+      const { obj } = drawingRef.current;
+      const activeTool = toolRef.current;
+      if (!obj) return;
+      if (activeTool === "arrow") {
+        const line = obj;
+        const angle = Math.atan2((line.y2 ?? 0) - (line.y1 ?? 0), (line.x2 ?? 0) - (line.x1 ?? 0)) * (180 / Math.PI);
+        const head = new Triangle({
+          left: line.x2,
+          top: line.y2,
+          originX: "center",
+          originY: "center",
+          angle: angle + 90,
+          width: strokeRef.current * 4,
+          height: strokeRef.current * 4,
+          fill: colorRef.current
+        });
+        canvas.remove(obj);
+        const group = new Group([line, head]);
+        group.selectable = false;
+        group.evented = false;
+        canvas.add(group);
+      }
+      drawingRef.current.obj = null;
+      if (activeTool !== "arrow") {
+        const isLine = activeTool === "line";
+        if (!isLine) {
+          const w = obj.getScaledWidth();
+          const h = obj.getScaledHeight();
+          if (w < 2 && h < 2) {
+            canvas.remove(obj);
+            return;
+          }
+        }
+      }
+      saveHistory();
+    };
+    canvas.on("mouse:down", handleMouseDown);
+    canvas.on("mouse:move", handleMouseMove);
+    canvas.on("mouse:up", handleMouseUp);
+    return () => {
+      canvas.off("mouse:down", handleMouseDown);
+      canvas.off("mouse:move", handleMouseMove);
+      canvas.off("mouse:up", handleMouseUp);
+    };
+  }, [saveHistory]);
+  useEffect(() => {
+    const handler = (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "z") {
+        e.preventDefault();
+        if (e.shiftKey) redo();
+        else undo();
+      } else if (e.key === "Delete" || e.key === "Backspace") {
+        const canvas = fabricRef.current;
+        const active = canvas?.getActiveObject();
+        if (canvas && active && !active.isEditing) {
+          canvas.remove(active);
+          canvas.discardActiveObject();
+          canvas.renderAll();
+          saveHistory();
+        }
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [undo, redo, saveHistory]);
+  const handleConfirm = useCallback(() => {
+    const canvas = fabricRef.current;
+    if (!canvas) return;
+    canvas.discardActiveObject();
+    canvas.renderAll();
+    const dataUrl = canvas.toDataURL({ format: "png", multiplier: 1 });
+    const blob = dataUrlToBlob(dataUrl);
+    const file = new File([blob], `screenshot-${Date.now()}.png`, { type: "image/png" });
+    onConfirm(file);
+  }, [onConfirm]);
+  const tools = [
+    { id: "select", icon: /* @__PURE__ */ jsx(MousePointer2, { size: 16 }), label: t("Select") },
+    { id: "pencil", icon: /* @__PURE__ */ jsx(Pencil, { size: 16 }), label: t("Draw") },
+    { id: "line", icon: /* @__PURE__ */ jsx(Minus, { size: 16 }), label: t("Line") },
+    { id: "arrow", icon: /* @__PURE__ */ jsx(MoveRight, { size: 16 }), label: t("Arrow") },
+    { id: "rect", icon: /* @__PURE__ */ jsx(Square, { size: 16 }), label: t("Rectangle") },
+    { id: "ellipse", icon: /* @__PURE__ */ jsx(Circle, { size: 16 }), label: t("Circle") },
+    { id: "text", icon: /* @__PURE__ */ jsx(Type, { size: 16 }), label: t("Text") },
+    { id: "highlighter", icon: /* @__PURE__ */ jsx(Highlighter, { size: 16 }), label: t("Highlight") }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "rpi-editor", children: [
+    /* @__PURE__ */ jsxs("div", { className: "rpi-editor__stage", children: [
+      /* @__PURE__ */ jsx("div", { className: "rpi-editor__tools", children: tools.map((toolItem) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          title: toolItem.label,
+          onClick: () => setTool(toolItem.id),
+          "data-active": tool === toolItem.id,
+          className: "rpi-editor__tool",
+          children: toolItem.icon
+        },
+        toolItem.id
+      )) }),
+      /* @__PURE__ */ jsx("div", { ref: containerRef, className: "rpi-editor__canvas-wrap", children: /* @__PURE__ */ jsx("canvas", { ref: canvasElRef }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "rpi-editor__footer", children: [
+      /* @__PURE__ */ jsxs("div", { className: "rpi-editor__controls", children: [
+        /* @__PURE__ */ jsx("div", { className: "rpi-editor__swatches", children: COLORS.map((c) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setColor(c),
+            "data-active": color === c,
+            style: { backgroundColor: c },
+            className: "rpi-editor__swatch"
+          },
+          c
+        )) }),
+        /* @__PURE__ */ jsxs("div", { className: "rpi-editor__controls", children: [
+          /* @__PURE__ */ jsx("span", { className: "rpi-muted", style: { fontSize: 12 }, children: t("Thickness") }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              min: 1,
+              max: 20,
+              value: strokeWidth,
+              onChange: (e) => setStrokeWidth(Number(e.target.value)),
+              style: { width: 96 }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "rpi-editor__controls", style: { gap: 4 }, children: [
+          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon", disabled: !canUndo, onClick: undo, title: t("Undo"), children: /* @__PURE__ */ jsx(Undo2, { size: 16 }) }),
+          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon", disabled: !canRedo, onClick: redo, title: t("Redo"), children: /* @__PURE__ */ jsx(Redo2, { size: 16 }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "rpi-editor__controls", style: { gap: 8 }, children: [
+        /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onCancel, children: t("Cancel") }),
+        /* @__PURE__ */ jsx(Button, { onClick: handleConfirm, children: t("Confirm") })
+      ] })
+    ] })
+  ] });
+};
+var AnnotationEditor_default = AnnotationEditor;
+
+export { AnnotationEditor_default as default };

package/dist/adapters-axios.d.ts

@@ -0,0 +1,19 @@
+import { AxiosInstance } from 'axios';
+
+interface AttachAxiosOptions {
+    /**
+     * Extracts a human-readable message from a response body for the log entry.
+     * Defaults to common `{ message } | { Message }` shapes.
+     */
+    getMessage?: (data: unknown) => string | undefined;
+    /** Treat this response as an error for logging. Default: status < 200 || >= 300. */
+    isErrorResponse?: (status: number, data: unknown) => boolean;
+}
+/**
+ * Wires an axios instance to feed the report-issue network-log store. Returns a
+ * detach function that ejects the interceptors. If the host already sets an
+ * `X-Request-Tracking-Id` header, it is reused; otherwise one is generated.
+ */
+declare function attachAxiosNetworkLogging(instance: AxiosInstance, options?: AttachAxiosOptions): () => void;
+
+export { type AttachAxiosOptions, attachAxiosNetworkLogging };

package/dist/adapters-axios.js

@@ -0,0 +1,52 @@
+import { beginNetworkRequest, completeNetworkRequest, failNetworkRequest } from './chunk-EXDFVVYA.js';
+
+// src/adapters/axios.ts
+var HEADER = "X-Request-Tracking-Id";
+function generateId() {
+  return `rpi_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
+}
+function readId(headers) {
+  const h = headers;
+  const raw = h?.[HEADER];
+  return typeof raw === "string" ? raw : "";
+}
+var defaultGetMessage = (data) => {
+  if (!data || typeof data !== "object") return typeof data === "string" ? data : void 0;
+  const d = data;
+  return d.message ?? d.Message ?? d.errorMessage ?? d.ErrorMessage;
+};
+function attachAxiosNetworkLogging(instance, options = {}) {
+  const getMessage = options.getMessage ?? defaultGetMessage;
+  const isErrorResponse = options.isErrorResponse ?? ((status) => status < 200 || status >= 300);
+  const reqId = instance.interceptors.request.use((config) => {
+    let id = readId(config.headers);
+    if (!id) {
+      id = generateId();
+      config.headers?.set?.(HEADER, id);
+    }
+    beginNetworkRequest(id, config.method?.toUpperCase(), config.url);
+    return config;
+  });
+  const resId = instance.interceptors.response.use(
+    (response) => {
+      const id = readId(response.config.headers);
+      const data = response.data;
+      const message = getMessage(data);
+      const errored = isErrorResponse(response.status, data);
+      completeNetworkRequest(id, response.status, errored, message, errored ? message : void 0);
+      return response;
+    },
+    (error) => {
+      const id = readId(error?.config?.headers);
+      const message = getMessage(error?.response?.data) ?? error?.message;
+      failNetworkRequest(id, error?.response?.status, message);
+      return Promise.reject(error);
+    }
+  );
+  return () => {
+    instance.interceptors.request.eject(reqId);
+    instance.interceptors.response.eject(resId);
+  };
+}
+
+export { attachAxiosNetworkLogging };