@allbluecn/admin-app 0.1.0

package/src/routes/_nav/monitoring/sentry/route.lazy.tsx

@@ -0,0 +1,399 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { createLazyFileRoute, useRouter } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import * as Sentry from '@sentry/tanstackstart-react'
+import { BugPlay, ExternalLink, Bug, Activity, AlertTriangle, Eye, EyeOff, Save, RotateCcw, CheckCircle2, XCircle, RefreshCw, ShieldCheck } from 'lucide-react'
+import { IconBrandSentry } from '@tabler/icons-react';
+import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
+import { getSentryConfig, saveSentryConfig, reconfigureSentryServer } from '@/server/serverFns/sentry/config'
+import type { SentryConfig } from '@/server/serverFns/sentry/config'
+
+export const Route = createLazyFileRoute('/_nav/monitoring/sentry')({
+  component: SentryPage,
+})
+
+type ConfigField = {
+  key: keyof SentryConfig
+  label: string
+  placeholder: string
+  secret: boolean
+  instruction: string[]
+}
+
+function SentryPage() {
+  const { t } = useTranslation('common')
+  const router = useRouter()
+  const [config, setConfig] = useState<SentryConfig>({ dsn: '', org: '', project: '', authToken: '' })
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [changed, setChanged] = useState(false)
+  const [visibleFields, setVisibleFields] = useState<Set<string>>(new Set())
+  const [verifyResult, setVerifyResult] = useState<{ ok: boolean; detail: string } | null>(null)
+  const [verifying, setVerifying] = useState(false)
+
+  const CONFIG_FIELDS: ConfigField[] = [
+    {
+      key: 'dsn',
+      label: 'DSN',
+      placeholder: 'https://<key>@o<orgId>.ingest.sentry.io/<projectId>',
+      secret: false,
+      instruction: [
+        t('monitoring.sentry.fields.dsn.instruction.step1'),
+        t('monitoring.sentry.fields.dsn.instruction.step2'),
+        t('monitoring.sentry.fields.dsn.instruction.step3'),
+        t('monitoring.sentry.fields.dsn.instruction.step4'),
+      ],
+    },
+    {
+      key: 'org',
+      label: t('monitoring.sentry.fields.org.label'),
+      placeholder: 'my-organization',
+      secret: false,
+      instruction: [
+        t('monitoring.sentry.fields.org.instruction.step1'),
+        t('monitoring.sentry.fields.org.instruction.step2'),
+        t('monitoring.sentry.fields.org.instruction.step3'),
+      ],
+    },
+    {
+      key: 'project',
+      label: t('monitoring.sentry.fields.project.label'),
+      placeholder: 'my-project',
+      secret: false,
+      instruction: [
+        t('monitoring.sentry.fields.project.instruction.step1'),
+        t('monitoring.sentry.fields.project.instruction.step2'),
+        t('monitoring.sentry.fields.project.instruction.step3'),
+      ],
+    },
+    {
+      key: 'authToken',
+      label: 'Auth Token',
+      placeholder: 'sntrys_********************',
+      secret: true,
+      instruction: [
+        t('monitoring.sentry.fields.authToken.instruction.step1'),
+        t('monitoring.sentry.fields.authToken.instruction.step2'),
+        t('monitoring.sentry.fields.authToken.instruction.step3'),
+        t('monitoring.sentry.fields.authToken.instruction.step4'),
+        t('monitoring.sentry.fields.authToken.instruction.step5'),
+      ],
+    },
+  ]
+
+  const loadConfig = async () => {
+    setLoading(true)
+    try {
+      const cfg = await getSentryConfig()
+      setConfig(cfg)
+    } catch {
+      toast.error(t('monitoring.sentry.loadFailed'))
+    }
+    setLoading(false)
+  }
+
+  useEffect(() => {
+    loadConfig()
+  }, [])
+
+  const dsnConfigured = !!config.dsn || !!import.meta.env.VITE_SENTRY_DSN
+
+  const updateField = (key: keyof SentryConfig, value: string) => {
+    setConfig((prev) => ({ ...prev, [key]: value }))
+    setChanged(true)
+  }
+
+  const toggleVisible = (key: string) => {
+    setVisibleFields((prev) => {
+      const next = new Set(prev)
+      if (next.has(key)) next.delete(key)
+      else next.add(key)
+      return next
+    })
+  }
+
+  const reconfigure = (dsn: string) => {
+    Sentry.init({
+      dsn,
+      environment: import.meta.env.VITE_SENTRY_ENVIRONMENT || import.meta.env.MODE,
+      dataCollection: {},
+      tracesSampleRate: 1.0,
+      replaysSessionSampleRate: 0.1,
+      replaysOnErrorSampleRate: 1.0,
+      enableLogs: true,
+      tunnel: '/sentry-tunnel',
+    })
+  }
+
+  const handleSave = async () => {
+    setSaving(true)
+    try {
+      await saveSentryConfig({ data: config })
+      reconfigure(config.dsn)
+      await reconfigureSentryServer({ data: { dsn: config.dsn } })
+      toast.success(t('monitoring.sentry.saveSuccess'))
+      setChanged(false)
+      router.invalidate()
+    } catch {
+      toast.error(t('monitoring.sentry.saveFailed'))
+    }
+    setSaving(false)
+  }
+
+  const validateDsn = (dsn: string) => {
+    if (!dsn) return { ok: false, detail: t('monitoring.sentry.validate.empty') }
+    if (!dsn.startsWith('https://')) return { ok: false, detail: t('monitoring.sentry.validate.httpsPrefix') }
+    if (!dsn.includes('.sentry.io')) return { ok: false, detail: t('monitoring.sentry.validate.notSentryIo') }
+    if (!dsn.includes('@')) return { ok: false, detail: t('monitoring.sentry.validate.missingAt') }
+    const projectId = dsn.split('/').pop()
+    if (!projectId || !/^\d+$/.test(projectId)) return { ok: false, detail: t('monitoring.sentry.validate.missingProjectId') }
+    return { ok: true, detail: t('monitoring.sentry.validate.valid') }
+  }
+
+  const verifyConfig = async () => {
+    const activeDsn = config.dsn || import.meta.env.VITE_SENTRY_DSN
+    const fmt = validateDsn(activeDsn || '')
+    if (!fmt.ok) {
+      setVerifyResult(fmt)
+      return
+    }
+    setVerifying(true)
+    setVerifyResult(null)
+    try {
+      const client = Sentry.getClient()
+      const clientDsn = client?.getOptions().dsn
+      if (clientDsn !== activeDsn) {
+        await reconfigure(activeDsn)
+      }
+
+      const eventId = Sentry.captureException(new Error('Sentry config validation - test error'))
+      if (!eventId) {
+        setVerifyResult({ ok: false, detail: t('monitoring.sentry.verify.notInitialized') })
+        setVerifying(false)
+        return
+      }
+      const flushed = await Sentry.flush(5000)
+      if (flushed) {
+        setVerifyResult({ ok: true, detail: t('monitoring.sentry.verify.success', { eventId }) })
+      } else {
+        setVerifyResult({ ok: false, detail: t('monitoring.sentry.verify.timeout') })
+      }
+    } catch (e) {
+      setVerifyResult({ ok: false, detail: t('monitoring.sentry.verify.error', { message: (e as Error).message }) })
+    }
+    setVerifying(false)
+  }
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-2xl font-bold flex items-center gap-2">
+            <IconBrandSentry stroke={2} />
+            {t('monitoring.sentry.title')}
+          </h2>
+          <p className="mt-1 text-muted-foreground">{t('monitoring.sentry.subtitle')}</p>
+        </div>
+        <a
+          href="https://sentry.io"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center gap-1.5 rounded-lg border bg-card px-4 py-2 text-sm font-medium hover:bg-accent transition-colors"
+        >
+          <ExternalLink className="size-4" />
+          {t('monitoring.sentry.openSentry')}
+        </a>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-4">
+        <StatusCard
+          title={t('monitoring.sentry.statusCards.dsn.title')}
+          status={dsnConfigured ? 'active' : 'inactive'}
+          icon={dsnConfigured ? CheckCircle2 : XCircle}
+          description={dsnConfigured ? t('monitoring.sentry.statusCards.dsn.configured') : t('monitoring.sentry.statusCards.dsn.notConfigured')}
+        />
+        <StatusCard
+          title={t('monitoring.sentry.statusCards.errors.title')}
+          status={dsnConfigured ? 'active' : 'inactive'}
+          icon={Bug}
+          description={dsnConfigured ? t('monitoring.sentry.statusCards.errors.enabled') : t('monitoring.sentry.statusCards.errors.disabled')}
+        />
+        <StatusCard
+          title={t('monitoring.sentry.statusCards.performance.title')}
+          status={dsnConfigured ? 'active' : 'inactive'}
+          icon={Activity}
+          description={dsnConfigured ? t('monitoring.sentry.statusCards.performance.enabled') : t('monitoring.sentry.statusCards.performance.disabled')}
+        />
+        <StatusCard
+          title="Session Replay"
+          status={dsnConfigured ? 'active' : 'inactive'}
+          icon={BugPlay}
+          description={dsnConfigured ? t('monitoring.sentry.statusCards.replay.enabled') : t('monitoring.sentry.statusCards.replay.disabled')}
+        />
+      </div>
+
+      <div className="rounded-lg border bg-card">
+        <div className="border-b px-6 py-4">
+          <h3 className="text-lg font-semibold">{t('monitoring.sentry.config.title')}</h3>
+          <p className="text-sm text-muted-foreground mt-1">
+            {t('monitoring.sentry.config.description')}
+          </p>
+        </div>
+        <div className="divide-y">
+          {CONFIG_FIELDS.map((field) => (
+            <ConfigFieldCard
+              key={field.key}
+              field={field}
+              value={config[field.key]}
+              visible={visibleFields.has(field.key)}
+              onChange={(v) => updateField(field.key, v)}
+              onToggleVisible={() => toggleVisible(field.key)}
+            />
+          ))}
+        </div>
+        <div className="border-t px-6 py-4 flex items-center gap-3">
+          <button
+            type="button"
+            onClick={handleSave}
+            disabled={!changed || saving}
+            className="inline-flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 transition-opacity disabled:opacity-50"
+          >
+            {saving ? <RefreshCw className="size-4 animate-spin" /> : <Save className="size-4" />}
+            {t('monitoring.sentry.saveConfig')}
+          </button>
+          {changed && (
+            <span className="text-xs text-muted-foreground">{t('monitoring.sentry.unsaved')}</span>
+          )}
+        </div>
+      </div>
+
+      {verifyResult && (
+        <div
+          className={`rounded-lg border p-4 text-sm flex items-start gap-3 ${verifyResult.ok
+            ? 'border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-950 text-green-700 dark:text-green-300'
+            : 'border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950 text-red-700 dark:text-red-300'
+            }`}
+        >
+          {verifyResult.ok ? <CheckCircle2 className="size-4 mt-0.5 shrink-0" /> : <XCircle className="size-4 mt-0.5 shrink-0" />}
+          <span>{verifyResult.detail}</span>
+        </div>
+      )}
+
+      <div className="rounded-lg border bg-card p-6">
+        <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
+          <ShieldCheck className="size-5" />
+          {t('monitoring.sentry.verify.title')}
+        </h3>
+        <p className="text-sm text-muted-foreground mb-4">
+          {t('monitoring.sentry.verify.description')}
+          <h4 className="text-xs text-muted-foreground mb-4">
+            {t('monitoring.sentry.verify.note')}
+          </h4>
+        </p>
+        <button
+          type="button"
+          onClick={verifyConfig}
+          disabled={verifying || (!config.dsn && !import.meta.env.VITE_SENTRY_DSN)}
+          className="inline-flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 transition-opacity disabled:opacity-40"
+        >
+          {verifying ? <RefreshCw className="size-4 animate-spin" /> : <ShieldCheck className="size-4" />}
+          {t('monitoring.sentry.verify.button')}
+        </button>
+      </div>
+    </div>
+  )
+}
+
+function ConfigFieldCard({
+  field,
+  value,
+  visible,
+  onChange,
+  onToggleVisible,
+}: {
+  field: ConfigField
+  value: string
+  visible: boolean
+  onChange: (v: string) => void
+  onToggleVisible: () => void
+}) {
+  const { t } = useTranslation('common')
+  return (
+    <div className="px-6 py-5 space-y-3">
+      <div className="flex items-center justify-between">
+        <label className="text-sm font-medium">{field.label}</label>
+        {field.secret && (
+          <button
+            type="button"
+            onClick={onToggleVisible}
+            className="text-muted-foreground hover:text-foreground transition-colors"
+          >
+            {visible ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+          </button>
+        )}
+      </div>
+
+      <div className="relative">
+        <input
+          type={field.secret && !visible ? 'password' : 'text'}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={field.placeholder}
+          className="w-full rounded-lg border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring/50"
+        />
+      </div>
+
+      <div className="rounded-lg bg-muted/50 p-3">
+        <p className="text-xs font-medium text-muted-foreground mb-1.5">{t('monitoring.sentry.fields.obtainMethod')}</p>
+        <ol className="list-decimal list-inside space-y-0.5">
+          {field.instruction.map((step, i) => (
+            <li key={i} className="text-xs text-muted-foreground">{step}</li>
+          ))}
+        </ol>
+      </div>
+    </div>
+  )
+}
+
+function StatusCard({
+  title,
+  status,
+  icon: Icon,
+  description,
+}: {
+  title: string
+  status: 'active' | 'inactive'
+  icon: React.ComponentType<{ className?: string }>
+  description: string
+}) {
+  return (
+    <div className={`rounded-lg border p-4 ${status === 'active' ? 'border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-950' : ''}`}>
+      <div className="flex items-center gap-3">
+        <div className="flex size-10 items-center justify-center rounded-full bg-background shadow-sm">
+          <Icon className={`size-5 ${status === 'active' ? 'text-green-500' : 'text-muted-foreground'}`} />
+        </div>
+        <div>
+          <p className="text-sm font-medium">{title}</p>
+          <p className="text-xs text-muted-foreground mt-0.5">{description}</p>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/routes/_nav/monitoring/sentry/route.tsx

@@ -0,0 +1,20 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_nav/monitoring/sentry')({})