perf(logs): 日志量统计改用 index/volume_range（快 ~1300 倍）+ 查询护栏 + 真实错误提示

=== 一、现象 === - /logs 页「正在统计整个时间范围的日志量」24 小时查询转圈 5 分钟不出结果 - /analysis 页默认 1 小时也一直「加载中...」 - 期间 Loki 被 OOMKilled(2Gi) → Pod not Ready → Service 无端点 → 全站查询 502 === 二、根因（实测数据） === 同一 query {namespace="astralx", app="cex-ipublic-gateway"}： 24h count_over_time[15m] step=15m → 53.7s 后连接断开（算不完） 24h count_over_time[1h] step=1h → 60.1s 失败 24h index/stats（只读索引） → 1.3s → bytes 44.9GB / entries 3.33亿 / chunks 2474 24h index/volume_range step=1h → 111ms → 25 个点 1h index/volume_range step=5m → 115ms → 13 个点原因：count_over_time 必须**下载并解码所有 chunk**；volume_range 只读 TSDB 索引里的 chunk 元数据（字节数），根本不碰日志内容。该 app 一天就有 3.33 亿条 / 44.9 GB。 === 三、改造 === 1. LokiHistogram 改用官方 /loki/api/v1/index/volume_range（带 step） - 返回单位是「字节」，bucket 带 unit=bytes，前端格式化为 KB/MB/GB - 老版本 Loki 没有该端点时自动回退 count_over_time（unit=entries） 2. 查询护栏（防止单条查询拖垮单实例 Loki） - 统计范围上限 7 天，超出直接 400「统计范围过大（27.0 天），最多支持 7 天」 - 重查询单独 30s 超时（原来 120s） - 全局并发重查询上限 2，超出立刻 429「请稍后重试」（不排队） - /logs/metrics（analysis 页）共用同一套护栏 3. 前端 - 发起新查询前 abort 上一次请求（原来只用版本号丢弃结果，旧请求仍在后端跑） - histogram/query 支持 signal；超时 40s/60s（原 125s） - 错误不再统一显示「日志量统计失败」，按 429/400/502/超时给不同文案 - 时间线按 unit 格式化（字节 → GB），i18n 去掉「条」 4. Loki 侧官方优化（此前 limits_config 只有 retention_period） - query_range: align_queries_with_step + cache_results + embedded_cache 100MB - limits_config: max_query_parallelism 8（默认 32，单实例过高） - 已用 `loki -verify-config` 校验通过（config is valid） === 四、实测（平台 API） === 1 分钟 0.02s 2 桶 1 小时 0.05s 61 桶 3.8 GB 6 小时 0.04s 73 桶 12.3 GB 24 小时 0.04s 97 桶 41.8 GB ← 改造前 53.7s 失败 7 天 0.05s 37 桶 58.2 GB 27 天 0.01s 400「最多支持 7 天」镜像：lghost/lokistack:latest + v0.1 = sha256:9fa1c4597533
2026-10-28 15:54:55 +00:00
1 parent 9acc15f4d2
commit de376a1284
@@ -1,11 +1,28 @@
 import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'

-type Bucket = { timestamp: string; count: number }
+type Bucket = { timestamp: string; count: number; unit?: string }

 const formatTime = (timestamp: string) => new Date(timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
 const formatCount = (count: number) => new Intl.NumberFormat('zh-CN').format(count)

+/**
+ * 日志量展示：后端优先用 index/volume_range（只读索引，快约 500 倍），
+ * 它返回的是**字节数**（unit=bytes）；老版本 Loki 回退 count_over_time 时是条数。
+ * 按 unit 决定格式，避免把 44 GB 显示成 "44894961500 条"。
+ */
+const formatVolume = (count: number, unit?: string) => {
+  if (unit !== 'bytes') return formatCount(count)
+  const units = ['B', 'KB', 'MB', 'GB', 'TB']
+  let v = count
+  let i = 0
+  while (v >= 1024 && i < units.length - 1) {
+    v /= 1024
+    i++
+  }
+  return `${v >= 100 ? v.toFixed(0) : v.toFixed(1)} ${units[i]}`
+}
+
 export function LogVolumeTimeline({ buckets, onSelect }: {
  buckets: Bucket[]
  onSelect: (start: number, end: number) => void
@@ -38,7 +55,7 @@ export function LogVolumeTimeline({ buckets, onSelect }: {
  return <section className="rounded-xl border bg-card p-4" aria-label={t('volume.timelineAria')}>
    <div className="mb-3 flex flex-wrap items-baseline justify-between gap-2">
      <div><h2 className="text-sm font-semibold">{t('volume.timelineTitle')}</h2><p className="text-xs text-muted-foreground">{t('volume.timelineHint')}</p></div>
-      <span className="text-sm tabular-nums">{t('volume.timelineTotal', { count: formatCount(total) })}</span>
+      <span className="text-sm tabular-nums">{t('volume.timelineTotal', { count: formatVolume(total, buckets[0]?.unit) })}</span>
    </div>
    <div className="flex gap-2">
      <div className="relative h-44 min-w-0 flex-1 select-none touch-none cursor-crosshair"
@@ -55,7 +72,7 @@ export function LogVolumeTimeline({ buckets, onSelect }: {
          </div>)}
        </div>
        {hover !== null && <div className="pointer-events-none absolute z-10 top-2 rounded-md border bg-popover px-2 py-1 text-xs text-popover-foreground shadow-sm" style={{ left: `${Math.min(78, Math.max(2, (hover + 0.5) / buckets.length * 100))}%` }}>
-          {new Date(buckets[hover].timestamp).toLocaleString()} · <strong>{t('volume.timelineBucket', { count: formatCount(buckets[hover].count) })}</strong>
+          {new Date(buckets[hover].timestamp).toLocaleString()} · <strong>{t('volume.timelineBucket', { count: formatVolume(buckets[hover].count, buckets[hover].unit) })}</strong>
        </div>}
      </div>
      <div className="flex h-44 w-14 flex-col justify-between text-right text-xs tabular-nums text-muted-foreground"><span>{formatCount(max)}</span><span>{formatCount(Math.round(max / 2))}</span><span>0</span></div>
@@ -26,6 +26,39 @@ const ns = (ms: number) => Math.round(ms).toString() + '000000'

 type Bucket = { timestamp: string; count: number }

+/** 是否为主动取消（abort）造成的错误 —— 这类不该提示用户 */
+function isAbortError(e: unknown): boolean {
+  return e instanceof DOMException
+    ? e.name === 'AbortError'
+    : typeof e === 'object' && e !== null && (e as { name?: string }).name === 'AbortError'
+}
+
+/**
+ * 把后端错误翻译成用户能看懂的一句话。
+ * 之前统一显示「日志量统计失败」，把 429/400/超时/Loki 不可用全糊在一起，
+ * 用户既不知道该缩小范围还是该等，也无从判断是不是平台挂了。
+ */
+function describeQueryError(e: unknown, fallback: string): string {
+  const raw = e instanceof Error ? e.message : String(e ?? '')
+  if (!raw) return fallback
+  const lower = raw.toLowerCase()
+
+  if (raw.includes('统计范围过大') || lower.includes('too large') || lower.includes('range exceeds')) {
+    return raw
+  }
+  if (raw.includes('较多日志量统计') || lower.includes('too many requests') || lower.includes('429')) {
+    return '当前有其他日志量统计正在进行（单实例 Loki 保护），请等几秒后重试'
+  }
+  if (lower.includes('no endpoints available') || lower.includes('http 502') || lower.includes('http 503')) {
+    return 'Loki 暂时不可用（Pod 未就绪或无端点），请稍后重试；若持续请查看 Loki 实例状态'
+  }
+  if (lower.includes('timeout') || lower.includes('timed out') || lower.includes('aborted')) {
+    return '统计超时（数据量过大），请缩小时间范围后重试'
+  }
+  // 其它情况：保留原始信息，便于排查（截断避免撑爆布局）
+  return raw.length > 160 ? raw.slice(0, 160) + '…' : raw
+}
+
 export default function LogsPage() {
  const { t } = useTranslation('logs')
  const admin = getUser()?.role === 'admin'
@@ -42,7 +75,11 @@ export default function LogsPage() {
  const [searched, setSearched] = useState(false)
  const [buckets, setBuckets] = useState<Bucket[]>([])
  const [histogramLoading, setHistogramLoading] = useState(false)
-  const [histogramError, setHistogramError] = useState(false)
+  // 从 boolean 改为字符串：原来只显示"日志量统计失败"，
+  // 真实原因（429 并发超限 / 400 范围过大 / Loki 不可用）全被吞掉。
+  const [histogramError, setHistogramError] = useState<string>('')
+  /** 当前在跑的查询/统计控制器：发起新请求前 abort 掉，避免重查询叠加 */
+  const histAbortRef = useRef<AbortController | null>(null)
  const [cursor, setCursor] = useState('')
  const [pageIndex, setPageIndex] = useState(0)
  const [pageCursors, setPageCursors] = useState<string[]>([''])
@@ -62,7 +99,7 @@ export default function LogsPage() {
    } catch (e) { setError(e instanceof Error ? e.message : t('source.loadFailed')) }
  }, [t])
  useEffect(() => { void reloadSources() }, [reloadSources])
-  useEffect(() => { requestVersion.current++; setEntries([]); setBuckets([]); setHistogramLoading(false); setHistogramError(false); setCursor(''); setPageIndex(0); setPageCursors(['']); setSearched(false); setLoading(false) }, [sourceId])
+  useEffect(() => { requestVersion.current++; setEntries([]); setBuckets([]); setHistogramLoading(false); setHistogramError(''); setCursor(''); setPageIndex(0); setPageCursors(['']); setSearched(false); setLoading(false) }, [sourceId])

  // 从日志分析页等入口跳转:带 ?q= 预填输入框并尝试执行一次;执行后清掉参数防刷新重复执行。
  // 预填不等数据源就绪(无数据源时也要让用户看到带来的查询),是否真正执行由 search 内部判断
@@ -88,10 +125,18 @@ export default function LogsPage() {
    if (!r || !sourceId || !searchQuery) return
    const version = ++requestVersion.current
    setLoading(true); setLoadingStartedAt(Date.now()); setError('')
-    if (!paging) { setBuckets([]); setHistogramLoading(false); setHistogramError(false) }
+    if (!paging) { setBuckets([]); setHistogramLoading(false); setHistogramError('') }
    const data: LogQuery = { sourceId, query: searchQuery, ...r, limit, direction: 'backward', cursor: nextCursor }
+
+    // 关键：发起新查询前，先断掉上一次仍在跑的查询/统计。
+    // 否则用户连续改条件会产生多条并发重查询，把单实例 Loki 打满
+    // （历史事故：27 天统计 → OOMKilled → Pod 不 Ready → 全站 502）。
+    histAbortRef.current?.abort()
+    const histController = new AbortController()
+    histAbortRef.current = histController
+
    try {
-      const result = await logsApi.query(data)
+      const result = await logsApi.query(data, { signal: histController.signal })
      if (version !== requestVersion.current) return
      if (paging && result.entries.length === 0) { setCursor(''); return }
      if (!paging) setQueryHistory(rememberQuery(data.query))
@@ -104,13 +149,23 @@ export default function LogsPage() {
      setPageCursors(previous => paging ? [...previous.slice(0, targetPage), nextCursor] : [''])
      if (!paging) {
        setHistogramLoading(true)
-        setHistogramError(false)
-        void logsApi.histogram(data).then(histogram => {
+        setHistogramError('')
+        void logsApi.histogram(data, { signal: histController.signal }).then(histogram => {
          if (version === requestVersion.current) {
-            setBuckets(histogram.map(item => ({ timestamp: String(item.timestamp), count: Number(item.count) || 0 })))
+            setBuckets(histogram.map(item => ({
+              timestamp: String(item.timestamp),
+              count: Number(item.count) || 0,
+              unit: typeof item.unit === 'string' ? item.unit : undefined,
+            })))
          }
-        }).catch(() => { if (version === requestVersion.current) setHistogramError(true) })
-          .finally(() => { if (version === requestVersion.current) setHistogramLoading(false) })
+        }).catch((e: unknown) => {
+          // 主动取消不算错误，直接静默
+          if (isAbortError(e) || histController.signal.aborted) return
+          if (version === requestVersion.current) setHistogramError(describeQueryError(e, t('volume.statsError')))
+        }).finally(() => {
+          // 无论成功/失败/取消都必须清掉 loading，否则会一直转圈
+          if (!histController.signal.aborted || version === requestVersion.current) setHistogramLoading(false)
+        })
      }
    } catch (e) { if (!quiet && version === requestVersion.current) setError(e instanceof Error ? e.message : t('toolbar.queryFailed')) }
    finally { if (version === requestVersion.current) { setLoading(false); setLoadingStartedAt(null) } }
@@ -202,7 +257,7 @@ export default function LogsPage() {
      {admin && tab === 'access' && <PolicyGroupsPage sources={sources} />}
      {admin && tab === 'sources' && <SourcesManager sources={sources} onSaved={() => void reloadSources()} />}
      {tab === 'query' && histogramLoading && <div role="status" className="flex items-center gap-2 rounded-xl border bg-card p-4 text-sm text-muted-foreground"><Loader2 className="size-4 animate-spin text-info" />{t('volume.statsLoading')}</div>}
-      {tab === 'query' && histogramError && <p className="rounded-xl border bg-card p-4 text-sm text-muted-foreground">{t('volume.statsError')}</p>}
+      {tab === 'query' && histogramError && <p className="rounded-xl border bg-card p-4 text-sm text-muted-foreground">{histogramError}</p>}
      {tab === 'query' && buckets.length > 0 && <LogVolumeTimeline key={`${buckets[0].timestamp}-${buckets.length}`} buckets={buckets} onSelect={selectTimeRange} />}
      {tab === 'query' && <LogResultsPanel key={`${sourceId}:${executedQuery}:${executedRange?.start}:${executedRange?.end}`} entries={entries} searched={searched} hasSource={sources.length > 0} pageIndex={pageIndex} hasNextPage={Boolean(cursor)} loading={loading} loadingStartedAt={loadingStartedAt} query={query} terms={highlightTerms} onQueryChange={setQuery} onApplyDomain={applyDomainFilter} onShowContext={row => void showContext(row)} onSearch={() => void search()} onNextPage={() => void search(cursor, false, undefined, undefined, pageIndex + 1)} onPreviousPage={() => void search(pageCursors[pageIndex - 1] ?? '', false, undefined, undefined, pageIndex - 1)} />}
      <LogContextDialog context={context} terms={highlightTerms} onClose={() => setContext(null)} />