@magnet-cms/plugin-sentry 1.0.0

package/src/admin/components/error-metrics.tsx

@@ -0,0 +1,54 @@
+import { Card } from '@magnet-cms/ui/components'
+import { AlertTriangle, BarChart3, Bug } from 'lucide-react'
+
+interface MetricCardProps {
+	title: string
+	value: string | number
+	icon: React.ReactNode
+}
+
+function MetricCard({ title, value, icon }: MetricCardProps) {
+	return (
+		<Card className="p-6">
+			<div className="flex items-center justify-between">
+				<div>
+					<p className="text-sm font-medium text-muted-foreground">{title}</p>
+					<p className="text-2xl font-bold mt-1">{value}</p>
+				</div>
+				<div className="text-muted-foreground">{icon}</div>
+			</div>
+		</Card>
+	)
+}
+
+interface ErrorMetricsProps {
+	totalErrors: number
+	unresolvedIssues: number
+	errorsLast24h: number
+}
+
+export function ErrorMetrics({
+	totalErrors,
+	unresolvedIssues,
+	errorsLast24h,
+}: ErrorMetricsProps) {
+	return (
+		<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+			<MetricCard
+				title="Unresolved Issues"
+				value={unresolvedIssues}
+				icon={<AlertTriangle className="h-5 w-5" />}
+			/>
+			<MetricCard
+				title="Errors (Last 24h)"
+				value={errorsLast24h}
+				icon={<Bug className="h-5 w-5" />}
+			/>
+			<MetricCard
+				title="Total Errors"
+				value={totalErrors}
+				icon={<BarChart3 className="h-5 w-5" />}
+			/>
+		</div>
+	)
+}

package/src/admin/components/feedback-widget.tsx

@@ -0,0 +1,76 @@
+import { useAdapter } from '@magnet-cms/admin'
+import { useEffect, useRef } from 'react'
+
+interface SentryClientConfig {
+	dsn: string
+	enabled: boolean
+	environment: string
+}
+
+/**
+ * Mounts the Sentry User Feedback widget via the @sentry/browser feedbackIntegration.
+ *
+ * Fetches the public DSN from the backend (/sentry/config), initializes the
+ * Sentry Browser SDK if not already initialized, and attaches a floating
+ * feedback button to the page.
+ *
+ * The widget uses Sentry's shadow DOM isolation so it is style-independent
+ * from the admin UI theme.
+ */
+export function SentryFeedbackWidget() {
+	const adapter = useAdapter()
+	const feedbackRef = useRef<{ remove: () => void } | null>(null)
+
+	useEffect(() => {
+		let cancelled = false
+
+		async function init() {
+			try {
+				const config =
+					await adapter.request<SentryClientConfig>('/sentry/config')
+
+				if (cancelled || !config.enabled || !config.dsn) return
+
+				// Dynamically import @sentry/browser to keep it out of the main bundle
+				const Sentry = await import('@sentry/browser')
+
+				if (cancelled) return
+
+				// Initialize Sentry Browser SDK if not already done
+				if (!Sentry.getClient()) {
+					Sentry.init({
+						dsn: config.dsn,
+						environment: config.environment,
+					})
+				}
+
+				// Attach the feedback widget — uses shadow DOM for style isolation
+				const feedback = Sentry.feedbackIntegration({
+					colorScheme: 'system',
+					buttonLabel: 'Report an Issue',
+					submitButtonLabel: 'Send Report',
+					messagePlaceholder: 'Describe the issue you encountered...',
+					showBranding: false,
+				})
+
+				const widget = feedback.createWidget?.()
+				if (widget) {
+					feedbackRef.current = widget
+				}
+			} catch {
+				// Sentry is optional — never crash the admin UI
+			}
+		}
+
+		init()
+
+		return () => {
+			cancelled = true
+			feedbackRef.current?.remove()
+			feedbackRef.current = null
+		}
+	}, [adapter])
+
+	// Widget is rendered by Sentry SDK into the DOM directly — no React output needed
+	return null
+}

package/src/admin/components/recent-issues.tsx

@@ -0,0 +1,100 @@
+import {
+	Badge,
+	DataTable,
+	type DataTableColumn,
+} from '@magnet-cms/ui/components'
+import { ExternalLink } from 'lucide-react'
+
+interface SentryIssue {
+	id: string
+	shortId: string
+	title: string
+	status: string
+	count: string
+	lastSeen: string
+	permalink: string
+}
+
+interface RecentIssuesProps {
+	issues: SentryIssue[]
+}
+
+function getStatusVariant(
+	status: string,
+): 'default' | 'secondary' | 'destructive' | 'outline' {
+	switch (status) {
+		case 'resolved':
+			return 'secondary'
+		case 'ignored':
+			return 'outline'
+		default:
+			return 'destructive'
+	}
+}
+
+function formatRelativeTime(dateStr: string): string {
+	const diff = Date.now() - new Date(dateStr).getTime()
+	const minutes = Math.floor(diff / 60_000)
+	if (minutes < 60) return `${minutes}m ago`
+	const hours = Math.floor(minutes / 60)
+	if (hours < 24) return `${hours}h ago`
+	return `${Math.floor(hours / 24)}d ago`
+}
+
+const columns: DataTableColumn<SentryIssue>[] = [
+	{
+		type: 'custom',
+		header: 'Title',
+		cell: (row) => (
+			<div className="flex items-center gap-2">
+				<span className="font-medium truncate max-w-[300px]">
+					{row.original.title}
+				</span>
+				<a
+					href={row.original.permalink}
+					target="_blank"
+					rel="noopener noreferrer"
+					onClick={(e) => e.stopPropagation()}
+				>
+					<ExternalLink className="h-3 w-3 text-muted-foreground shrink-0" />
+				</a>
+			</div>
+		),
+	},
+	{
+		type: 'custom',
+		header: 'Status',
+		cell: (row) => (
+			<Badge variant={getStatusVariant(row.original.status)}>
+				{row.original.status}
+			</Badge>
+		),
+	},
+	{
+		type: 'text',
+		header: 'Events',
+		accessorKey: 'count',
+	},
+	{
+		type: 'text',
+		header: 'Last Seen',
+		accessorKey: 'lastSeen',
+		format: (value) => (
+			<span className="text-muted-foreground">
+				{formatRelativeTime(value as string)}
+			</span>
+		),
+	},
+]
+
+export function RecentIssues({ issues }: RecentIssuesProps) {
+	if (issues.length === 0) {
+		return (
+			<p className="text-sm text-muted-foreground text-center py-4">
+				No recent issues
+			</p>
+		)
+	}
+
+	return <DataTable columns={columns} data={issues} />
+}

package/src/admin/hooks/use-project-filter.ts

@@ -0,0 +1,59 @@
+import type { useAdapter } from '@magnet-cms/admin'
+import { useEffect, useState } from 'react'
+
+export interface SentryProject {
+	id: string
+	slug: string
+	name: string
+	platform: string | null
+	isActive: boolean
+	errorCount: number | null
+}
+
+/** Sentinel value for the "All Projects" aggregate option */
+export const ALL_PROJECTS = '__all__'
+
+type Adapter = ReturnType<typeof useAdapter>
+
+/**
+ * Shared hook for project filter functionality used by Dashboard and Issues pages.
+ *
+ * Fetches the org's project list on mount, defaults to ALL_PROJECTS (aggregate view),
+ * and invokes `onProjectChange` whenever the selection changes.
+ * Pass ALL_PROJECTS ('') to get org-level aggregate data (no ?project= param).
+ */
+export function useProjectFilter(
+	adapter: Adapter,
+	onProjectChange: (slug: string) => Promise<void>,
+) {
+	const [projects, setProjects] = useState<SentryProject[]>([])
+	const [selectedProject, setSelectedProject] = useState<string>(ALL_PROJECTS)
+	const [loading, setLoading] = useState(true)
+
+	useEffect(() => {
+		async function init() {
+			try {
+				const [projectsData] = await Promise.all([
+					adapter.request<SentryProject[]>('/sentry/admin/projects'),
+					// Initial data fetch for "All Projects"
+					onProjectChange(ALL_PROJECTS),
+				])
+				setProjects(projectsData)
+			} catch (error) {
+				console.error('[Sentry] Failed to load projects:', error)
+			} finally {
+				setLoading(false)
+			}
+		}
+		init()
+		// onProjectChange is intentionally excluded — stable callback ref not needed
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [adapter])
+
+	function handleProjectChange(slug: string) {
+		setSelectedProject(slug)
+		onProjectChange(slug).catch(console.error)
+	}
+
+	return { projects, selectedProject, loading, handleProjectChange }
+}

package/src/admin/index.ts

@@ -0,0 +1,121 @@
+/**
+ * Sentry Plugin — Frontend Entry
+ *
+ * Self-registers the plugin when loaded via script injection.
+ * The admin app loads plugin bundles at runtime and plugins self-register
+ * on window.__MAGNET_PLUGINS__.
+ */
+
+import type { ComponentType } from 'react'
+
+interface FrontendPluginManifest {
+	pluginName: string
+	routes?: {
+		path: string
+		componentId: string
+		requiresAuth?: boolean
+		children?: { path: string; componentId: string }[]
+	}[]
+	sidebar?: {
+		id: string
+		title: string
+		url: string
+		icon: string
+		order?: number
+		items?: { id: string; title: string; url: string; icon: string }[]
+	}[]
+	widgets?: {
+		componentId: string
+		position: 'global' | 'dashboard' | 'header'
+	}[]
+}
+
+interface PluginRegistration {
+	manifest: FrontendPluginManifest
+	components: Record<string, () => Promise<{ default: ComponentType<unknown> }>>
+}
+
+const manifest: FrontendPluginManifest = {
+	pluginName: 'sentry',
+	routes: [
+		{
+			path: 'sentry',
+			componentId: 'SentryDashboard',
+			requiresAuth: true,
+			children: [
+				{ path: '', componentId: 'SentryDashboard' },
+				{ path: 'issues', componentId: 'SentryIssues' },
+				{ path: 'settings', componentId: 'SentrySettings' },
+			],
+		},
+	],
+	sidebar: [
+		{
+			id: 'sentry',
+			title: 'Sentry',
+			url: '/sentry',
+			icon: 'AlertTriangle',
+			order: 80,
+			items: [
+				{
+					id: 'sentry-dashboard',
+					title: 'Dashboard',
+					url: '/sentry',
+					icon: 'BarChart3',
+				},
+				{
+					id: 'sentry-issues',
+					title: 'Issues',
+					url: '/sentry/issues',
+					icon: 'Bug',
+				},
+				{
+					id: 'sentry-settings',
+					title: 'Settings',
+					url: '/sentry/settings',
+					icon: 'Settings',
+				},
+			],
+		},
+	],
+	// Global widget — the feedback button is mounted once on the page
+	widgets: [
+		{
+			componentId: 'SentryFeedbackWidget',
+			position: 'global',
+		},
+	],
+}
+
+const components: Record<
+	string,
+	() => Promise<{ default: ComponentType<unknown> }>
+> = {
+	SentryDashboard: () => import('./pages/sentry-dashboard'),
+	SentryIssues: () => import('./pages/sentry-issues'),
+	SentrySettings: () => import('./pages/sentry-settings'),
+	SentryFeedbackWidget: () =>
+		import('./components/feedback-widget').then((m) => ({
+			default: m.SentryFeedbackWidget as ComponentType<unknown>,
+		})),
+}
+
+function registerPlugin() {
+	if (!window.__MAGNET_PLUGINS__) {
+		window.__MAGNET_PLUGINS__ = []
+	}
+
+	const alreadyRegistered = window.__MAGNET_PLUGINS__.some(
+		(p: PluginRegistration) => p.manifest.pluginName === manifest.pluginName,
+	)
+
+	if (!alreadyRegistered) {
+		window.__MAGNET_PLUGINS__.push({ manifest, components })
+		console.log(`[Magnet] Plugin registered: ${manifest.pluginName}`)
+	}
+}
+
+registerPlugin()
+
+export const sentryPlugin = () => ({ manifest, components })
+export default sentryPlugin

package/src/admin/pages/sentry-dashboard.tsx

@@ -0,0 +1,149 @@
+import { PageContent, PageHeader, useAdapter } from '@magnet-cms/admin'
+import {
+	Alert,
+	AlertDescription,
+	AlertTitle,
+	Card,
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+	Skeleton,
+} from '@magnet-cms/ui/components'
+import { useState } from 'react'
+import { ErrorMetrics } from '../components/error-metrics'
+import { RecentIssues } from '../components/recent-issues'
+import { ALL_PROJECTS, useProjectFilter } from '../hooks/use-project-filter'
+
+interface SentryStats {
+	isConfigured: boolean
+	apiError?: string
+	totalErrors: number
+	unresolvedIssues: number
+	errorsLast24h: number
+}
+
+interface SentryIssue {
+	id: string
+	shortId: string
+	title: string
+	status: string
+	count: string
+	lastSeen: string
+	permalink: string
+}
+
+function DashboardSkeleton() {
+	return (
+		<div className="space-y-6 p-6">
+			<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+				{['unresolved', '24h', 'total'].map((id) => (
+					<Skeleton key={id} className="h-24" />
+				))}
+			</div>
+			<Skeleton className="h-[200px]" />
+		</div>
+	)
+}
+
+function SetupCard() {
+	return (
+		<Card className="p-6">
+			<h3 className="text-lg font-semibold mb-2">Sentry API Not Configured</h3>
+			<p className="text-sm text-muted-foreground mb-4">
+				To enable the error dashboard, add the following environment variables:
+			</p>
+			<ul className="text-sm font-mono space-y-1 bg-muted p-3 rounded-md">
+				<li>SENTRY_AUTH_TOKEN=your-auth-token</li>
+				<li>SENTRY_ORG=your-org-slug</li>
+				<li>SENTRY_PROJECT=your-project-slug</li>
+			</ul>
+		</Card>
+	)
+}
+
+const SentryDashboard = () => {
+	const adapter = useAdapter()
+	const [stats, setStats] = useState<SentryStats | null>(null)
+	const [issues, setIssues] = useState<SentryIssue[]>([])
+	const [dataLoading, setDataLoading] = useState(false)
+
+	const { projects, selectedProject, loading, handleProjectChange } =
+		useProjectFilter(adapter, async (slug) => {
+			setDataLoading(true)
+			try {
+				const params =
+					slug && slug !== ALL_PROJECTS
+						? `?project=${encodeURIComponent(slug)}`
+						: ''
+				const [statsData, issuesData] = await Promise.all([
+					adapter.request<SentryStats>(`/sentry/admin/stats${params}`),
+					adapter.request<SentryIssue[]>(`/sentry/admin/issues${params}`),
+				])
+				setStats(statsData)
+				setIssues(issuesData.slice(0, 5))
+			} catch (error) {
+				console.error('[Sentry] Failed to fetch dashboard data:', error)
+			} finally {
+				setDataLoading(false)
+			}
+		})
+
+	const projectSelector =
+		projects.length > 0 ? (
+			<Select value={selectedProject} onValueChange={handleProjectChange}>
+				<SelectTrigger className="w-[180px]">
+					<SelectValue />
+				</SelectTrigger>
+				<SelectContent>
+					<SelectItem value={ALL_PROJECTS}>All Projects</SelectItem>
+					{projects.map((p) => (
+						<SelectItem key={p.slug} value={p.slug}>
+							{p.name}
+						</SelectItem>
+					))}
+				</SelectContent>
+			</Select>
+		) : null
+
+	return (
+		<>
+			<PageHeader
+				title="Sentry Dashboard"
+				actions={projectSelector ?? undefined}
+			/>
+			<PageContent>
+				{loading || dataLoading || !stats ? (
+					<DashboardSkeleton />
+				) : !stats.isConfigured ? (
+					<div className="p-6">
+						<SetupCard />
+					</div>
+				) : (
+					<div className="space-y-6 p-6">
+						{stats.apiError ? (
+							<Alert variant="destructive">
+								<AlertTitle>Could not load Sentry data</AlertTitle>
+								<AlertDescription className="text-sm whitespace-pre-wrap">
+									{stats.apiError}
+								</AlertDescription>
+							</Alert>
+						) : null}
+						<ErrorMetrics
+							totalErrors={stats.totalErrors}
+							unresolvedIssues={stats.unresolvedIssues}
+							errorsLast24h={stats.errorsLast24h}
+						/>
+						<div>
+							<h3 className="text-lg font-semibold mb-4">Recent Issues</h3>
+							<RecentIssues issues={issues} />
+						</div>
+					</div>
+				)}
+			</PageContent>
+		</>
+	)
+}
+
+export default SentryDashboard