glitchgrab 1.58.2 → 1.59.0

package/README.md

@@ -371,6 +371,42 @@ function MyReports() {
 }
 ```
 
+### Show the conversation on a report
+
+Let your user see what the team said on their report and reply — no GitHub account needed. Replies land on the GitHub issue as the Glitchgrab app, with "Commented by: <name>" underneath.
+
+```tsx
+import { useGlitchgrabReportThread } from "glitchgrab";
+
+function ReportThread({ reportId }: { reportId: string }) {
+  const { report, comments, addComment, isPosting, error } = useGlitchgrabReportThread({
+    token: process.env.NEXT_PUBLIC_GLITCHGRAB_TOKEN!,
+    reportId,                          // from useGlitchgrabReports
+    reporterName: session.user.name,   // optional, defaults to the name it was filed under
+  });
+  const [text, setText] = useState("");
+
+  return (
+    <div>
+      <h3>{report?.issue?.title} — {report?.issue?.githubState ?? "open"}</h3>
+      {comments.map((c, i) => (
+        <p key={i}><b>{c.author}</b>: {c.body}</p>
+      ))}
+      <textarea value={text} onChange={(e) => setText(e.target.value)} />
+      <button
+        disabled={isPosting || !text.trim()}
+        onClick={async () => { if (await addComment(text)) setText(""); }}
+      >
+        {isPosting ? "Sending…" : "Reply"}
+      </button>
+      {error && <p>{error}</p>}
+    </div>
+  );
+}
+```
+
+`addComment` never throws: it resolves `true` once the reply is posted and the thread reloaded, `false` with `error` set otherwise. Without the hook, use `fetchGlitchgrabReportThread` / `postGlitchgrabReportComment` (both throw) with your own data layer.
+
 ### With TanStack Query
 
 ```tsx
@@ -715,6 +751,10 @@ hydrateRoot(document, <App />, {
 
 Next.js does not expose `hydrateRoot` options, so App Router apps should use the `error.tsx` snippets above.
 
+### Hydration errors (React #418 family)
+
+Nothing to wire. In production the provider catches React #418/#419/#422/#423/#425 with the **component stack** React built for them (Next.js normally throws it away), the server HTML React replaced, any extension or Translate nodes found in the page, and fetch timing. The issue is labelled `gg:hydration` and its title names the element that mismatched. The same mismatch groups into one issue across pages, browsers and deploys. If your site serves source maps (`productionBrowserSourceMaps: true`), Glitchgrab also maps the stack to your source files, so the issue names the nearest component file too.
+
 ### captureError options
 
 ```ts

package/dist/index.d.mts

@@ -280,6 +280,82 @@ declare function useGlitchgrabActions({ token, onSuccess, onError, }: {
     isPending: boolean;
     error: string | null;
 };
+interface GlitchgrabComment {
+    /** GitHub login. Replies from your users post as the Glitchgrab app, with their name in the body. */
+    author: string;
+    body: string;
+    createdAt: string;
+}
+interface GlitchgrabReportThread {
+    id: string;
+    status: string;
+    rawInput: string | null;
+    createdAt: string;
+    issue: {
+        githubNumber: number;
+        githubUrl: string;
+        title: string;
+        body: string;
+        labels: string[];
+        severity: string | null;
+        /** "open" | "closed", or null when GitHub did not answer. */
+        githubState: string | null;
+    } | null;
+    /** Oldest first. Empty when no issue is linked yet. */
+    comments: GlitchgrabComment[];
+}
+/**
+ * Fetch one report with its GitHub issue and every comment on it — the team's
+ * replies and your user's. Throws on failure; pair it with your own data layer.
+ */
+declare function fetchGlitchgrabReportThread({ token, reportId, }: {
+    token: string;
+    reportId: string;
+}): Promise<GlitchgrabReportThread>;
+/**
+ * Post a reply on the report's GitHub issue. It lands as the Glitchgrab app
+ * with "Commented by: <name>" underneath, so the team knows who said it.
+ * Throws on failure.
+ */
+declare function postGlitchgrabReportComment({ token, reportId, message, reporterName, reporterEmail, }: {
+    token: string;
+    reportId: string;
+    message: string;
+    /** Defaults to the name the report was filed under. */
+    reporterName?: string;
+    reporterEmail?: string;
+}): Promise<GlitchgrabComment>;
+/**
+ * The conversation on one report: where it stands, what the team said, and a
+ * way for your user to reply — without a GitHub account.
+ *
+ * ```tsx
+ * const { report, comments, addComment, isPosting } = useGlitchgrabReportThread({
+ *   token: process.env.NEXT_PUBLIC_GLITCHGRAB_TOKEN!,
+ *   reportId,
+ *   reporterName: session.user.name,
+ * });
+ * ```
+ *
+ * Never throws. `addComment` resolves `true` once the reply is on the issue
+ * (and the thread has reloaded), `false` with `error` set otherwise.
+ */
+declare function useGlitchgrabReportThread({ token, reportId, reporterName, reporterEmail, }: {
+    token: string;
+    /** `reportId` from `useGlitchgrabReports` or the report submit result. Null waits. */
+    reportId: string | null;
+    reporterName?: string;
+    reporterEmail?: string;
+}): {
+    report: GlitchgrabReportThread | null;
+    comments: GlitchgrabComment[];
+    isLoading: boolean;
+    isFetching: boolean;
+    isPosting: boolean;
+    error: string | null;
+    refetch: () => Promise<void>;
+    addComment: (message: string) => Promise<boolean>;
+};
 
 interface FeedbackQuery {
     token: string;
@@ -422,4 +498,4 @@ declare function computeSignature(params: {
 declare function shouldSkipDuplicate(signature: string, windowMs?: number, now?: number): boolean;
 declare function clearDedupCache(): void;
 
-export { BookDemoButton, BookingDialog, Breadcrumb, BreadcrumbType, CaptureErrorOptions, CapturedContext, DeviceInfo, FeedbackButton, FeedbackButtonProps, FeedbackPayload, type FeedbackQuery, FeedbackResult, GLITCHGRAB_SHORTCUT, GLITCHGRAB_SHORTCUT_MAC, GlitchgrabErrorBoundary, GlitchgrabFeedback, GlitchgrabProvider, GlitchgrabProviderProps, type GlitchgrabReport, GlitchgrabSession, LeadInput, LeadResult, ReportButton, ReportButtonProps, ReportPayload, ReportResult, UseGlitchgrabReturn, addBreadcrumb, captureContext, captureDeviceInfo, captureError, clearAppContext, clearBreadcrumbs, clearDedupCache, computeSignature, enhanceText, fetchGlitchgrabFeedback, fetchGlitchgrabReports, getAppContext, getBreadcrumbs, getShortcutLabel, initBreadcrumbs, matchesShortcut, sanitizeUrl, sendFeedback, sendLead, sendReport, setContext, setContexts, shouldSkipDuplicate, useGlitchgrab, useGlitchgrabActions, useGlitchgrabFeedback, useGlitchgrabReports };
+export { BookDemoButton, BookingDialog, Breadcrumb, BreadcrumbType, CaptureErrorOptions, CapturedContext, DeviceInfo, FeedbackButton, FeedbackButtonProps, FeedbackPayload, type FeedbackQuery, FeedbackResult, GLITCHGRAB_SHORTCUT, GLITCHGRAB_SHORTCUT_MAC, type GlitchgrabComment, GlitchgrabErrorBoundary, GlitchgrabFeedback, GlitchgrabProvider, GlitchgrabProviderProps, type GlitchgrabReport, type GlitchgrabReportThread, GlitchgrabSession, LeadInput, LeadResult, ReportButton, ReportButtonProps, ReportPayload, ReportResult, UseGlitchgrabReturn, addBreadcrumb, captureContext, captureDeviceInfo, captureError, clearAppContext, clearBreadcrumbs, clearDedupCache, computeSignature, enhanceText, fetchGlitchgrabFeedback, fetchGlitchgrabReportThread, fetchGlitchgrabReports, getAppContext, getBreadcrumbs, getShortcutLabel, initBreadcrumbs, matchesShortcut, postGlitchgrabReportComment, sanitizeUrl, sendFeedback, sendLead, sendReport, setContext, setContexts, shouldSkipDuplicate, useGlitchgrab, useGlitchgrabActions, useGlitchgrabFeedback, useGlitchgrabReportThread, useGlitchgrabReports };

package/dist/index.d.ts

@@ -280,6 +280,82 @@ declare function useGlitchgrabActions({ token, onSuccess, onError, }: {
     isPending: boolean;
     error: string | null;
 };
+interface GlitchgrabComment {
+    /** GitHub login. Replies from your users post as the Glitchgrab app, with their name in the body. */
+    author: string;
+    body: string;
+    createdAt: string;
+}
+interface GlitchgrabReportThread {
+    id: string;
+    status: string;
+    rawInput: string | null;
+    createdAt: string;
+    issue: {
+        githubNumber: number;
+        githubUrl: string;
+        title: string;
+        body: string;
+        labels: string[];
+        severity: string | null;
+        /** "open" | "closed", or null when GitHub did not answer. */
+        githubState: string | null;
+    } | null;
+    /** Oldest first. Empty when no issue is linked yet. */
+    comments: GlitchgrabComment[];
+}
+/**
+ * Fetch one report with its GitHub issue and every comment on it — the team's
+ * replies and your user's. Throws on failure; pair it with your own data layer.
+ */
+declare function fetchGlitchgrabReportThread({ token, reportId, }: {
+    token: string;
+    reportId: string;
+}): Promise<GlitchgrabReportThread>;
+/**
+ * Post a reply on the report's GitHub issue. It lands as the Glitchgrab app
+ * with "Commented by: <name>" underneath, so the team knows who said it.
+ * Throws on failure.
+ */
+declare function postGlitchgrabReportComment({ token, reportId, message, reporterName, reporterEmail, }: {
+    token: string;
+    reportId: string;
+    message: string;
+    /** Defaults to the name the report was filed under. */
+    reporterName?: string;
+    reporterEmail?: string;
+}): Promise<GlitchgrabComment>;
+/**
+ * The conversation on one report: where it stands, what the team said, and a
+ * way for your user to reply — without a GitHub account.
+ *
+ * ```tsx
+ * const { report, comments, addComment, isPosting } = useGlitchgrabReportThread({
+ *   token: process.env.NEXT_PUBLIC_GLITCHGRAB_TOKEN!,
+ *   reportId,
+ *   reporterName: session.user.name,
+ * });
+ * ```
+ *
+ * Never throws. `addComment` resolves `true` once the reply is on the issue
+ * (and the thread has reloaded), `false` with `error` set otherwise.
+ */
+declare function useGlitchgrabReportThread({ token, reportId, reporterName, reporterEmail, }: {
+    token: string;
+    /** `reportId` from `useGlitchgrabReports` or the report submit result. Null waits. */
+    reportId: string | null;
+    reporterName?: string;
+    reporterEmail?: string;
+}): {
+    report: GlitchgrabReportThread | null;
+    comments: GlitchgrabComment[];
+    isLoading: boolean;
+    isFetching: boolean;
+    isPosting: boolean;
+    error: string | null;
+    refetch: () => Promise<void>;
+    addComment: (message: string) => Promise<boolean>;
+};
 
 interface FeedbackQuery {
     token: string;
@@ -422,4 +498,4 @@ declare function computeSignature(params: {
 declare function shouldSkipDuplicate(signature: string, windowMs?: number, now?: number): boolean;
 declare function clearDedupCache(): void;
 
-export { BookDemoButton, BookingDialog, Breadcrumb, BreadcrumbType, CaptureErrorOptions, CapturedContext, DeviceInfo, FeedbackButton, FeedbackButtonProps, FeedbackPayload, type FeedbackQuery, FeedbackResult, GLITCHGRAB_SHORTCUT, GLITCHGRAB_SHORTCUT_MAC, GlitchgrabErrorBoundary, GlitchgrabFeedback, GlitchgrabProvider, GlitchgrabProviderProps, type GlitchgrabReport, GlitchgrabSession, LeadInput, LeadResult, ReportButton, ReportButtonProps, ReportPayload, ReportResult, UseGlitchgrabReturn, addBreadcrumb, captureContext, captureDeviceInfo, captureError, clearAppContext, clearBreadcrumbs, clearDedupCache, computeSignature, enhanceText, fetchGlitchgrabFeedback, fetchGlitchgrabReports, getAppContext, getBreadcrumbs, getShortcutLabel, initBreadcrumbs, matchesShortcut, sanitizeUrl, sendFeedback, sendLead, sendReport, setContext, setContexts, shouldSkipDuplicate, useGlitchgrab, useGlitchgrabActions, useGlitchgrabFeedback, useGlitchgrabReports };
+export { BookDemoButton, BookingDialog, Breadcrumb, BreadcrumbType, CaptureErrorOptions, CapturedContext, DeviceInfo, FeedbackButton, FeedbackButtonProps, FeedbackPayload, type FeedbackQuery, FeedbackResult, GLITCHGRAB_SHORTCUT, GLITCHGRAB_SHORTCUT_MAC, type GlitchgrabComment, GlitchgrabErrorBoundary, GlitchgrabFeedback, GlitchgrabProvider, GlitchgrabProviderProps, type GlitchgrabReport, type GlitchgrabReportThread, GlitchgrabSession, LeadInput, LeadResult, ReportButton, ReportButtonProps, ReportPayload, ReportResult, UseGlitchgrabReturn, addBreadcrumb, captureContext, captureDeviceInfo, captureError, clearAppContext, clearBreadcrumbs, clearDedupCache, computeSignature, enhanceText, fetchGlitchgrabFeedback, fetchGlitchgrabReportThread, fetchGlitchgrabReports, getAppContext, getBreadcrumbs, getShortcutLabel, initBreadcrumbs, matchesShortcut, postGlitchgrabReportComment, sanitizeUrl, sendFeedback, sendLead, sendReport, setContext, setContexts, shouldSkipDuplicate, useGlitchgrab, useGlitchgrabActions, useGlitchgrabFeedback, useGlitchgrabReportThread, useGlitchgrabReports };