@tra-bilisim/report-issue 0.1.0 → 0.1.1

package/README.md

@@ -40,6 +40,7 @@ const adapter: ReportIssueAdapter = {
   getMetadata: () => ({ userId: currentUser.id, roles: currentUser.roles }),
   getCurrentUrl: () => window.location.href,
   pageOptions: [{ value: 'https://app/x', label: '/x' }],
+  pageInputMode: 'select',          // 'select' (default, uses pageOptions) | 'input' (free-text URL)
   environmentResolver: url => (url.includes('localhost') ? 'Locale' : 'Prod'),
   t: key => i18n.translate(key),   // English keys are the default fallback text
   locale: 'tr',
@@ -58,15 +59,82 @@ function App() {
 
 ## Network log capture (optional)
 
-Feed your axios instance into the shared log store with one call:
+`attachAxiosNetworkLogging(instance, options?)` installs request/response
+interceptors on your axios instance that feed the shared report-issue log store.
+The captured requests are attached to a report as `networkLogs` automatically.
+
+Call it **once**, at module scope where you create your axios instance — not inside
+a React component (that would re-attach on every render):
 
 ```ts
+// src/api/http.ts
+import axios from 'axios';
 import { attachAxiosNetworkLogging } from '@tra-bilisim/report-issue/adapters/axios';
-attachAxiosNetworkLogging(myAxiosInstance);
+
+export const http = axios.create({ baseURL: '/api' });
+
+// One call — done. Every request through `http` is now logged.
+attachAxiosNetworkLogging(http);
+```
+
+`attachAxiosNetworkLogging` returns a **detach** function that removes the
+interceptors (useful in tests or HMR):
+
+```ts
+const detach = attachAxiosNetworkLogging(http);
+// ...later
+detach();
+```
+
+### Options
+
+Both options are optional — the defaults cover common API shapes.
+
+```ts
+attachAxiosNetworkLogging(http, {
+  // Pull a human-readable message out of the response body for the log entry.
+  // Default looks for { message | Message | errorMessage | ErrorMessage }.
+  getMessage: data => (data as any)?.error?.detail,
+
+  // Decide whether a response counts as an error in the log.
+  // Default: any status < 200 or >= 300.
+  isErrorResponse: (status, data) =>
+    status >= 400 || (data as any)?.success === false,
+});
 ```
 
-Or wire your own transport by calling the primitives from `@tra-bilisim/report-issue/core`:
-`beginNetworkRequest`, `completeNetworkRequest`, `failNetworkRequest`.
+### Request correlation header
+
+Each logged request is tagged with an `X-Request-Tracking-Id` header. If your
+backend already sets/echoes this header, the adapter **reuses** it; otherwise it
+generates one (`rpi_<time>_<rand>`). This lets you cross-reference a captured
+request with your server logs.
+
+### Custom transport (no axios)
+
+Using `fetch` or another client? Skip the adapter and call the core primitives
+directly from `@tra-bilisim/report-issue/core`:
+
+```ts
+import {
+  beginNetworkRequest,
+  completeNetworkRequest,
+  failNetworkRequest,
+} from '@tra-bilisim/report-issue/core';
+
+async function loggedFetch(url: string, init?: RequestInit) {
+  const id = crypto.randomUUID();
+  beginNetworkRequest(id, init?.method ?? 'GET', url);
+  try {
+    const res = await fetch(url, init);
+    completeNetworkRequest(id, res.status, !res.ok);
+    return res;
+  } catch (err) {
+    failNetworkRequest(id, undefined, (err as Error).message);
+    throw err;
+  }
+}
+```
 
 ## Wire contract (`submit`)
 

package/dist/{consent-DmS4DxOf.d.ts → consent-CfFPLwnF.d.ts}

@@ -80,6 +80,12 @@ interface ReportIssueAdapter {
     getCurrentUrl?: () => string;
     /** Options for the "which page" dropdown. Function form is re-read on open. */
     pageOptions?: PageOption[] | (() => PageOption[]);
+    /**
+     * How the "which page" field is rendered when "current page" is unchecked:
+     * - `'select'` (default): searchable dropdown fed by `pageOptions`.
+     * - `'input'`: free-text field for an arbitrary URL/path (`pageOptions` ignored).
+     */
+    pageInputMode?: 'select' | 'input';
     /** Maps a page URL to an environment label (e.g. Locale/Test/Prod). */
     environmentResolver?: (url: string) => string;
     /** i18n. Defaults to identity (returns the key, which is English text). */

package/dist/core.d.ts

@@ -1,4 +1,4 @@
-export { C as CONSENT_VERSION, a as CaptureType, b as ConsoleEntry, N as NetworkEntry, P as PageOption, R as RecorderStartResult, c as RecordingConsent, d as ReportCategoryOption, e as ReportIssueAdapter, f as ReportIssueToast, g as ReportMetadata, h as ReportSubmitPayload, i as ReportSubmitResult, V as VideoRecorderCallbacks, j as VideoRecorderController, k as beginNetworkRequest, l as completeNetworkRequest, m as createConsent, n as createVideoRecorder, o as failNetworkRequest, p as getConsoleLogs, q as getNetworkLogs, r as patchConsole, s as pushConsoleLog } from './consent-DmS4DxOf.js';
+export { C as CONSENT_VERSION, a as CaptureType, b as ConsoleEntry, N as NetworkEntry, P as PageOption, R as RecorderStartResult, c as RecordingConsent, d as ReportCategoryOption, e as ReportIssueAdapter, f as ReportIssueToast, g as ReportMetadata, h as ReportSubmitPayload, i as ReportSubmitResult, V as VideoRecorderCallbacks, j as VideoRecorderController, k as beginNetworkRequest, l as completeNetworkRequest, m as createConsent, n as createVideoRecorder, o as failNetworkRequest, p as getConsoleLogs, q as getNetworkLogs, r as patchConsole, s as pushConsoleLog } from './consent-CfFPLwnF.js';
 
 declare function applyInputMask(targetDoc?: Document): void;
 declare function applyMask(): void;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { e as ReportIssueAdapter, f as ReportIssueToast, a as CaptureType, c as RecordingConsent, b as ConsoleEntry, N as NetworkEntry, R as RecorderStartResult } from './consent-DmS4DxOf.js';
-export { C as CONSENT_VERSION, P as PageOption, d as ReportCategoryOption, g as ReportMetadata, h as ReportSubmitPayload, i as ReportSubmitResult, p as getConsoleLogs, q as getNetworkLogs, r as patchConsole } from './consent-DmS4DxOf.js';
+import { e as ReportIssueAdapter, f as ReportIssueToast, a as CaptureType, c as RecordingConsent, b as ConsoleEntry, N as NetworkEntry, R as RecorderStartResult } from './consent-CfFPLwnF.js';
+export { C as CONSENT_VERSION, P as PageOption, d as ReportCategoryOption, g as ReportMetadata, h as ReportSubmitPayload, i as ReportSubmitResult, p as getConsoleLogs, q as getNetworkLogs, r as patchConsole } from './consent-CfFPLwnF.js';
 
 /** Adapter with every optional field filled in — what components actually read. */
 interface ResolvedConfig {

package/dist/index.js

@@ -567,7 +567,15 @@ var ReportIssueDialog = ({ open, onOpenChange }) => {
                   label: `${t("Current page")}: ${currentUrl}`
                 }
               ),
-              pageOptions.length > 0 && /* @__PURE__ */ jsx(
+              adapter.pageInputMode === "input" ? /* @__PURE__ */ jsx(
+                Input,
+                {
+                  placeholder: t("Enter the page where the issue occurred"),
+                  value: customPage,
+                  onChange: (e) => setCustomPage(e.target.value),
+                  disabled: useCurrentPage
+                }
+              ) : pageOptions.length > 0 && /* @__PURE__ */ jsx(
                 Select,
                 {
                   placeholder: t("Enter the page where the issue occurred"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tra-bilisim/report-issue",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Headless-core + React UI \"Report an Issue\" widget: masked screenshot/annotation, tab-only screen recording, console/network log capture and KVKK consent.",
   "license": "MIT",
   "author": "TRA Bilişim",