Supabase 前端日志访问解决方案

Supabase日志系统接入方案

背景

根据 Supabase 官方讨论 和 Supabase Management API 文档 、Supabase 日志文档，我们需要设计一个安全、高效的方案来访问 Supabase 日志，并在前端展示。

方案设计

1. 架构概述

我们采用 Edge Function 作为中间层，使用 Management API Access Token 访问 Management API，然后将日志安全地返回给前端。

前端应用 (Vue 3) -> Edge Function -> Supabase Management API

2. Edge Function 实现

在 supabase/functions/system-logs/index.ts 中实现：

// 定义日志类型枚举和对应的表名
export enum LogTable {
   
  Auth = 'auth_logs',
  Edge = 'edge_logs',
  FunctionEdge = 'function_edge_logs',
  Function = 'function_logs',
  PgBouncer = 'pgbouncer_logs',
  Postgres = 'postgres_logs',
  Postgrest = 'postgrest_logs',
  Realtime = 'realtime_logs',
  Storage = 'storage_logs',
  Supervisor = 'supervisor_logs'
}
// 定义请求参数接口
interface LogsQueryParams {
   
  type?: string;
  iso_timestamp_start?: string;
  iso_timestamp_end?: string;
}
// Supabase项目信息和访问令牌
const SUPABASE_PROJECT_ID = "your_project_id"
const SUPABASE_ACCESS_TOKEN = "your_access_token"
// 处理请求的主函数
serve(async (req) => {
   
  // 处理跨域请求
  if (req.method === 'OPTIONS') {
   
    return new Response('ok', {
    headers: corsHeaders });
  }
  try {
   
    // 从请求中获取参数 (支持JSON和URL查询字符串)
    let params: LogsQueryParams = {
   };
    
    if (req.method === 'POST') {
   
      // 尝试从请求体解析JSON
      params = await req.json().catch(() => ({
   }));
    }
    
    // 如果没有从请求体获取到参数，尝试从URL查询字符串获取
    if (Object.keys(params).length === 0) {
   
      const url = new URL(req.url);
      params = {
   
        type: url.searchParams.get('type') || undefined,
        iso_timestamp_start: url.searchParams.get('iso_timestamp_start') || undefined,
        iso_timestamp_end: url.searchParams.get('iso_timestamp_end') || undefined
      };
    }
    
    // 参数提取
    const {
    type, iso_timestamp_start, iso_timestamp_end } = params;
    
    // 时区处理：支持直接输入北京时间，自动转换为UTC时间
    const convertToUTC = (beijingTimeIso: string | undefined): string | undefined => {
   
      if (!beijingTimeIso) return undefined;
      try {
   
        const date = new Date(beijingTimeIso);
        date.setHours(date.getHours() - 8); // 减去8小时调整为UTC
        return date.toISOString();
      } catch (e) {
   
        return undefined;
      }
    };
    
    // 时间参数处理
    let startTime = convertToUTC(iso_timestamp_start) || ''