在仪表板直接查看 PlanetScale 系统状态

对于我们的大多数客户而言，数据库是其基础设施中至关重要的一部分。在罕见的情况下，如果出现问题，信息越详细越好。我们最近对数据库页面进行了改进，使客户更容易了解 PlanetScale 本身是否存在任何问题。从现在开始，任何对状态页的更新都会直接显示在 UI 中。
仪表板中的 PlanetScale 系统状态消息

我们是如何实现的？

PlanetScale 的仪表板是一个基于 Next.js 的应用，并由 Ruby on Rails API 支持。我们认为这是一个很好机会，可以使用 Vercel 的新 edge functions（边缘函数），这使我们能够代理状态页面 API 并将其缓存，从而实现超快的约 ~30ms 响应时间。
如果你使用 StatusPage 作为状态监控工具，可以将这段代码适配到自己的应用中实现类似的功能。

边缘函数的代码

export const config = {
  runtime: 'experimental-edge'
}

export default async () => {
  const res = await fetch('https://www.planetscalestatus.com/api/v2/incidents/unresolved.json')
  const json = await res.json()
  let incident = json?.incidents?.[0] || {}

  if (incident) {
    incident = { ...incident, url: `https://www.planetscalestatus.com/incidents/${incident.id}` }
  }

  return new Response(JSON.stringify({ ...incident }), {
    status: 200,
    headers: {
      'content-type': 'application/json',
      'cache-control': 's-maxage=1, stale-while-revalidate'
    }
  })
}

注意代码中的 cache-control 头部。这是一个关键细节，它指示 Vercel 在后台更新缓存的同时从缓存中为用户提供响应。这确保用户始终能够获得超快的响应，同时数据也是最新的。这种方法非常适合该场景。
开发者工具中的网络选项卡显示 API 响应

React 组件

在我们的 UI 中，我们调用边缘函数来检查任何状态更新，并展示最近的状态（如果存在）。

React 组件的代码

import React from 'react'

import useSWR from 'swr'

import { SWR_OPTIONS, fetchSWR } from '@/utils/api'

import Icon from './Icon'

interface Incident {
  id: string
  url: string
  name: string
}

const IncidentStatus: React.FC = () => {
  const { data } = useSWR<Incident>(['/api/incidents', SWR_OPTIONS], fetchSWR)

  if (!data?.id) {
    return null
  }

  return (
    <div className='flex items-center gap-x-sm text-sm'>
      <Icon name='alert-circle' className='text-red' />
      <span className='font-medium'>{data.name}</span>
      ·
      <a href={data.url} className='flex items-center' target='_blank' rel='noreferrer'>
        View status
        <Icon name='external-link' />
      </a>
    </div>
  )
}

export default IncidentStatus

在仪表板直接查看 PlanetScale 系统状态插图

关注公众号：程序新视界，一个让你软实力、硬技术同步提升的平台

除非注明，否则均为程序新视界原创文章，转载必须以链接形式标明本文链接

本文链接：http://www.choupangxia.com/2025/09/07/planetscale-in-your-dashboard/

secbro2

程序新视界，一个软实力、硬知识同时提升的平台

1205