@agent-native/core 0.90.11 → 0.91.0

package/corpus/templates/analytics/app/pages/monitoring/errors/IssueList.tsx

@@ -0,0 +1,360 @@
+import { CodeSurface } from "@agent-native/core/blocks";
+import {
+  IconAlertTriangle,
+  IconBug,
+  IconCode,
+  IconExternalLink,
+  IconRefresh,
+  IconSearch,
+  IconUsers,
+} from "@tabler/icons-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+
+import { fmt, useErrorsT } from "./i18n";
+import { Sparkline } from "./Sparkline";
+import type { ErrorIssueSummary, StatusFilter } from "./types";
+import {
+  formatNumber,
+  formatRelativeTime,
+  levelAccentClass,
+  levelBadgeClass,
+  statusBadgeClass,
+  useLevelLabel,
+  useStatusLabel,
+} from "./utils";
+
+const ERROR_CAPTURE_DOCS_URL =
+  "https://www.agent-native.com/docs/tracking#error-capture";
+
+const ERROR_CAPTURE_SNIPPET = `// Agent Native templates already call configureTracking().
+import { configureTracking, captureException } from "@agent-native/core/client";
+
+configureTracking({
+  key: "anpk_...",
+  endpoint: "https://analytics.example.com/api/analytics/track",
+  // Auto-captures window.onerror + unhandledrejection and links each
+  // error to the session replay it happened in. On by default when a
+  // public key is set; pass errorCapture: false to opt out.
+  errorCapture: true,
+});
+
+// Manual, Sentry-style capture anywhere in your app:
+try {
+  risky();
+} catch (err) {
+  captureException(err, { tags: { area: "checkout" } });
+}`;
+
+const STATUS_TABS: StatusFilter[] = [
+  "unresolved",
+  "resolved",
+  "ignored",
+  "all",
+];
+
+export function IssueList({
+  issues,
+  isLoading,
+  status,
+  onStatusChange,
+  search,
+  onSearchChange,
+  onRefresh,
+  isFetching,
+  onSelect,
+  onSendTestError,
+  sendingTest,
+  error,
+}: {
+  issues: ErrorIssueSummary[];
+  isLoading: boolean;
+  status: StatusFilter;
+  onStatusChange: (status: StatusFilter) => void;
+  search: string;
+  onSearchChange: (value: string) => void;
+  onRefresh: () => void;
+  isFetching: boolean;
+  onSelect: (id: string) => void;
+  onSendTestError: () => void;
+  sendingTest: boolean;
+  error?: string | null;
+}) {
+  const t = useErrorsT();
+
+  const tabLabel = (tab: StatusFilter): string => {
+    switch (tab) {
+      case "unresolved":
+        return t.tabUnresolved;
+      case "resolved":
+        return t.tabResolved;
+      case "ignored":
+        return t.tabIgnored;
+      default:
+        return t.tabAll;
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div
+          className="inline-flex rounded-lg border border-border/60 bg-muted/20 p-0.5"
+          role="tablist"
+        >
+          {STATUS_TABS.map((tab) => (
+            <button
+              key={tab}
+              type="button"
+              role="tab"
+              aria-selected={status === tab}
+              onClick={() => onStatusChange(tab)}
+              className={cn(
+                "rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
+                status === tab
+                  ? "bg-background text-foreground shadow-sm"
+                  : "text-muted-foreground hover:text-foreground",
+              )}
+            >
+              {tabLabel(tab)}
+            </button>
+          ))}
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="relative sm:w-64">
+            <IconSearch className="pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground/60" />
+            <Input
+              type="search"
+              value={search}
+              onChange={(e) => onSearchChange(e.target.value)}
+              placeholder={t.searchPlaceholder}
+              className="ps-8"
+            />
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onRefresh}
+            aria-label={t.refresh}
+          >
+            <IconRefresh
+              className={cn("size-3.5", isFetching && "animate-spin")}
+            />
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onSendTestError}
+            disabled={sendingTest}
+          >
+            <IconBug className="size-3.5" />
+            {sendingTest ? t.sending : t.sendTestError}
+          </Button>
+        </div>
+      </div>
+
+      {error ? (
+        <Card>
+          <CardContent className="p-6 text-sm text-destructive">
+            {fmt(t.loadFailed, { message: error })}
+          </CardContent>
+        </Card>
+      ) : isLoading ? (
+        <IssueListSkeleton />
+      ) : issues.length === 0 ? (
+        <EmptyState
+          filtered={status !== "unresolved" || search.trim().length > 0}
+          onSendTestError={onSendTestError}
+          sendingTest={sendingTest}
+        />
+      ) : (
+        <Card>
+          <CardContent className="p-0">
+            <ul className="divide-y divide-border/60">
+              {issues.map((issue) => (
+                <IssueRow key={issue.id} issue={issue} onSelect={onSelect} />
+              ))}
+            </ul>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}
+
+function IssueRow({
+  issue,
+  onSelect,
+}: {
+  issue: ErrorIssueSummary;
+  onSelect: (id: string) => void;
+}) {
+  const t = useErrorsT();
+  const levelLabel = useLevelLabel();
+  const statusLabel = useStatusLabel();
+
+  return (
+    <li className="relative">
+      <button
+        type="button"
+        onClick={() => onSelect(issue.id)}
+        className="flex w-full items-center gap-4 py-3 pe-4 ps-5 text-left transition-colors hover:bg-muted/35 focus-visible:bg-muted/35 focus-visible:outline-none"
+      >
+        <span
+          className={cn(
+            "absolute inset-y-2 start-0 w-1 rounded-full",
+            levelAccentClass(issue.level),
+          )}
+        />
+        <span className="min-w-0 flex-1">
+          <span className="flex items-center gap-2">
+            <span
+              className={cn(
+                "inline-flex shrink-0 items-center rounded border px-1.5 py-0.5 text-[11px] font-semibold uppercase tracking-wide",
+                levelBadgeClass(issue.level),
+              )}
+            >
+              {issue.type}
+            </span>
+            <span className="truncate text-sm font-semibold text-foreground">
+              {stripTypePrefix(issue.title, issue.type)}
+            </span>
+          </span>
+          <span className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted-foreground">
+            {issue.culprit ? (
+              <span className="truncate font-mono">{issue.culprit}</span>
+            ) : null}
+            {issue.app ? <span>· {issue.app}</span> : null}
+            <span>
+              ·{" "}
+              {fmt(t.lastSeen, { time: formatRelativeTime(issue.lastSeenAt) })}
+            </span>
+          </span>
+        </span>
+
+        <Sparkline
+          data={issue.sparkline}
+          className="hidden shrink-0 sm:block"
+        />
+
+        <span className="hidden w-16 shrink-0 flex-col items-end md:flex">
+          <span className="text-sm font-semibold text-foreground">
+            {formatNumber(issue.eventCount)}
+          </span>
+          <span className="text-[11px] uppercase tracking-wide text-muted-foreground">
+            {t.events}
+          </span>
+        </span>
+        <span className="hidden w-16 shrink-0 flex-col items-end lg:flex">
+          <span className="inline-flex items-center gap-1 text-sm font-semibold text-foreground">
+            <IconUsers className="size-3.5 text-muted-foreground" />
+            {formatNumber(issue.usersAffected)}
+          </span>
+          <span className="text-[11px] uppercase tracking-wide text-muted-foreground">
+            {t.users}
+          </span>
+        </span>
+
+        <span
+          className={cn(
+            "inline-flex shrink-0 items-center rounded-full border px-2 py-0.5 text-[11px] font-medium",
+            statusBadgeClass(issue.status),
+          )}
+        >
+          {statusLabel(issue.status)}
+        </span>
+        {levelLabel(issue.level) ? (
+          <span className="sr-only">{levelLabel(issue.level)}</span>
+        ) : null}
+      </button>
+    </li>
+  );
+}
+
+function EmptyState({
+  filtered,
+  onSendTestError,
+  sendingTest,
+}: {
+  filtered: boolean;
+  onSendTestError: () => void;
+  sendingTest: boolean;
+}) {
+  const t = useErrorsT();
+
+  if (filtered) {
+    return (
+      <Card>
+        <CardContent className="flex flex-col items-center gap-2 py-14 text-center">
+          <IconAlertTriangle className="size-6 text-muted-foreground/60" />
+          <p className="text-sm text-muted-foreground">{t.emptySearch}</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardContent className="grid gap-6 p-6 lg:grid-cols-2 lg:p-8">
+        <div className="flex flex-col justify-center gap-3">
+          <div className="flex size-10 items-center justify-center rounded-md border bg-muted/40">
+            <IconAlertTriangle className="size-5 text-primary" />
+          </div>
+          <div className="space-y-2">
+            <h2 className="text-lg font-semibold">{t.emptyTitle}</h2>
+            <p className="max-w-xl text-sm text-muted-foreground">
+              {t.emptyDescription}
+            </p>
+          </div>
+          <div className="flex flex-wrap items-center gap-2 pt-1">
+            <Button size="sm" onClick={onSendTestError} disabled={sendingTest}>
+              <IconBug className="size-3.5" />
+              {sendingTest ? t.sending : t.sendTestError}
+            </Button>
+            <Button asChild variant="ghost" size="sm">
+              <a href={ERROR_CAPTURE_DOCS_URL} target="_blank" rel="noreferrer">
+                {t.docs}
+                <IconExternalLink className="size-3.5" />
+              </a>
+            </Button>
+          </div>
+        </div>
+        <div className="overflow-hidden rounded-md border bg-muted/30">
+          <div className="flex items-center gap-2 border-b px-4 py-3 text-sm font-medium">
+            <IconCode className="size-4 text-muted-foreground" />
+            <span className="truncate">{t.installTitle}</span>
+          </div>
+          <CodeSurface
+            code={ERROR_CAPTURE_SNIPPET}
+            language="typescript"
+            maxLines={null}
+            showLanguageLabel={false}
+            className="mt-0"
+          />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function IssueListSkeleton() {
+  return (
+    <Card>
+      <CardContent className="space-y-3 p-6">
+        {Array.from({ length: 6 }).map((_, index) => (
+          <Skeleton key={index} className="h-12 w-full" />
+        ))}
+      </CardContent>
+    </Card>
+  );
+}
+
+/** Issue titles are "Type: message"; the type is shown as a badge already. */
+function stripTypePrefix(title: string, type: string): string {
+  const prefix = `${type}: `;
+  return title.startsWith(prefix) ? title.slice(prefix.length) : title;
+}

package/corpus/templates/analytics/app/pages/monitoring/errors/Sparkline.tsx

@@ -0,0 +1,55 @@
+import { useId } from "react";
+import { Area, AreaChart, ResponsiveContainer } from "recharts";
+
+/**
+ * Tiny inline volume sparkline for an issue row. Purely decorative — no axes,
+ * tooltip, or interaction — so it stays legible at ~100x28px.
+ */
+export function Sparkline({
+  data,
+  className,
+  color = "hsl(var(--primary))",
+}: {
+  data: number[];
+  className?: string;
+  color?: string;
+}) {
+  const gradientId = useId().replace(/:/g, "");
+  const points = (data.length ? data : [0]).map((value, index) => ({
+    index,
+    value: Number.isFinite(value) ? value : 0,
+  }));
+  const hasVolume = points.some((point) => point.value > 0);
+
+  return (
+    <div
+      className={className}
+      aria-hidden="true"
+      style={{ width: 96, height: 28 }}
+    >
+      <ResponsiveContainer width="100%" height="100%">
+        <AreaChart
+          data={points}
+          margin={{ top: 2, right: 0, bottom: 2, left: 0 }}
+        >
+          <defs>
+            <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor={color} stopOpacity={0.35} />
+              <stop offset="100%" stopColor={color} stopOpacity={0} />
+            </linearGradient>
+          </defs>
+          <Area
+            type="monotone"
+            dataKey="value"
+            stroke={color}
+            strokeWidth={1.5}
+            strokeOpacity={hasVolume ? 1 : 0.35}
+            fill={`url(#${gradientId})`}
+            isAnimationActive={false}
+            dot={false}
+          />
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}

package/corpus/templates/analytics/app/pages/monitoring/errors/i18n.ts

@@ -0,0 +1,106 @@
+/**
+ * Self-contained i18n for the Error capture feature. English is the source of
+ * truth; other locales fall back to English per key. Do NOT move these into the
+ * shared app i18n — this feature owns its copy.
+ */
+import { useLocale } from "@agent-native/core/client";
+
+const MESSAGES = {
+  "en-US": {
+    // Toolbar / list
+    searchPlaceholder: "Search errors…", // i18n-ignore feature-local i18n source
+    refresh: "Refresh",
+    sendTestError: "Send test error",
+    sending: "Sending…",
+    // Filter tabs
+    tabUnresolved: "Unresolved",
+    tabResolved: "Resolved",
+    tabIgnored: "Ignored",
+    tabAll: "All",
+    // Status labels
+    statusUnresolved: "Unresolved",
+    statusResolved: "Resolved",
+    statusIgnored: "Ignored",
+    // Level labels
+    levelFatal: "Fatal",
+    levelError: "Error",
+    levelWarning: "Warning",
+    levelInfo: "Info",
+    levelDebug: "Debug",
+    // List columns / meta
+    events: "events",
+    users: "users",
+    eventCount: "{count} events",
+    usersAffected: "{count} users",
+    lastSeen: "Last seen {time}",
+    firstSeen: "First seen {time}",
+    handled: "Handled",
+    unhandled: "Unhandled",
+    // Empty state
+    emptyTitle: "No errors captured yet", // i18n-ignore feature-local i18n source
+    emptyDescription:
+      "Your app's analytics SDK automatically captures uncaught exceptions and unhandled promise rejections, groups them into issues, and links each one to the session replay where it happened.",
+    emptySearch: "No errors match your filter.",
+    installTitle: "Enable error capture",
+    docs: "Docs",
+    // Detail
+    back: "Back to errors",
+    resolve: "Resolve",
+    reopen: "Reopen",
+    ignore: "Ignore",
+    unignore: "Unignore",
+    watchReplay: "Watch session replay",
+    overview: "Overview",
+    metaFirstSeen: "First seen",
+    metaLastSeen: "Last seen",
+    metaEvents: "Events",
+    metaUsers: "Users affected",
+    metaEnvironment: "Environment",
+    metaRelease: "Release",
+    stackTrace: "Stack trace",
+    noStack: "No stack trace was captured for this error.",
+    inApp: "In app",
+    vendor: "Vendor",
+    breadcrumbs: "Breadcrumbs",
+    noBreadcrumbs: "No breadcrumbs were captured before this error.",
+    occurrences: "Recent occurrences",
+    noOccurrences: "No occurrences recorded yet.",
+    occurredAt: "Occurred {time}",
+    anonymous: "Anonymous",
+    tags: "Tags",
+    additionalData: "Additional data",
+    loadFailed: "Could not load errors: {message}",
+    detailLoadFailed: "Could not load this error: {message}",
+    // Cross-links from session recordings
+    viewIssue: "View issue",
+    viewIssueTooltip:
+      "Open this error's issue — how many users hit it, the stack trace, and recent occurrences",
+    // Toasts
+    resolvedToast: "Issue resolved.",
+    reopenedToast: "Issue reopened.",
+    ignoredToast: "Issue ignored.",
+    updateFailed: "Could not update issue: {message}",
+    testSentToast: "Sent a test error. It should appear in the list shortly.",
+    testFailed: "Could not send a test error: {message}",
+  },
+} as const;
+
+type ErrorMessages = (typeof MESSAGES)["en-US"];
+
+export function useErrorsT(): ErrorMessages {
+  const { locale } = useLocale();
+  return {
+    ...MESSAGES["en-US"],
+    ...((MESSAGES as Record<string, Partial<ErrorMessages>>)[locale] ?? {}),
+  };
+}
+
+/** Interpolate {placeholders} in a message template. */
+export function fmt(
+  template: string,
+  vars: Record<string, string | number> = {},
+): string {
+  return template.replace(/\{(\w+)\}/g, (match, key) =>
+    key in vars ? String(vars[key]) : match,
+  );
+}

package/corpus/templates/analytics/app/pages/monitoring/errors/types.ts

@@ -0,0 +1,75 @@
+/**
+ * Client-side mirrors of the error-capture server types
+ * (`server/lib/error-capture.ts`). Kept as plain structural types so the panel
+ * stays decoupled from the server module.
+ */
+export type ExceptionLevel = "fatal" | "error" | "warning" | "info" | "debug";
+
+export type IssueStatus = "unresolved" | "resolved" | "ignored";
+
+export type StatusFilter = IssueStatus | "all";
+
+export interface ParsedStackFrame {
+  function: string | null;
+  file: string | null;
+  lineno: number | null;
+  colno: number | null;
+  inApp: boolean;
+  raw: string;
+}
+
+export interface ErrorIssueSummary {
+  id: string;
+  fingerprint: string;
+  type: string;
+  title: string;
+  culprit: string | null;
+  level: ExceptionLevel;
+  status: IssueStatus;
+  firstSeenAt: string;
+  lastSeenAt: string;
+  eventCount: number;
+  usersAffected: number;
+  lastSessionRecordingId: string | null;
+  lastSessionRecordingPath: string | null;
+  assignee: string | null;
+  app: string | null;
+  template: string | null;
+  sparkline: number[];
+}
+
+export interface ErrorEventDetail {
+  id: string;
+  type: string;
+  message: string;
+  culprit: string | null;
+  level: ExceptionLevel;
+  stack: ParsedStackFrame[];
+  handled: boolean;
+  url: string | null;
+  userId: string | null;
+  anonymousId: string | null;
+  userKey: string | null;
+  sessionId: string | null;
+  sessionRecordingId: string | null;
+  sessionRecordingPath: string | null;
+  release: string | null;
+  environment: string | null;
+  tags: Record<string, unknown>;
+  extra: Record<string, unknown>;
+  breadcrumbs: ErrorBreadcrumb[];
+  occurredAt: string;
+}
+
+export interface ErrorBreadcrumb {
+  timestamp?: string;
+  category?: string;
+  message?: string;
+  level?: ExceptionLevel;
+}
+
+export interface ErrorIssueDetail {
+  issue: ErrorIssueSummary;
+  events: ErrorEventDetail[];
+  sessions: Array<{ recordingId: string; path: string }>;
+}