Show log errors as different colors in chart

apps/studio/components/interfaces/Settings/Logs/LogEventChart.tsx

@@ -4,22 +4,25 @@ import type { EventChartData } from './Logs.types'
 
 export interface LogEventChartProps {
   data: EventChartData[]
-  onBarClick: (isoTimestamp: string) => void
+  onBarClick: (datum: Datum) => void
 }
 
-const LogEventChart = ({ data, onBarClick }: LogEventChartProps) => (
-  <BarChart
-    minimalHeader
-    size="tiny"
-    yAxisKey="count"
-    xAxisKey="timestamp"
-    data={data}
-    title="Logs / Time"
-    onBarClick={(datum: Datum | EventChartData) => {
-      if (!datum.timestamp) return
-      onBarClick(datum.timestamp as string)
-    }}
-    customDateFormat="MMM D, HH:mm:s"
-  />
-)
+const LogEventChart = ({ data, onBarClick }: LogEventChartProps) => {
+  return (
+    <BarChart
+      minimalHeader
+      size="tiny"
+      yAxisKey="count"
+      xAxisKey="timestamp"
+      data={data}
+      title="Logs / Time"
+      onBarClick={(datum: Datum | EventChartData) => {
+        if (!datum?.timestamp) return
+        onBarClick(datum)
+      }}
+      customDateFormat="MMM D, HH:mm:s"
+      xAxisIsDate={true}
+    />
+  )
+}
 export default LogEventChart

apps/studio/components/interfaces/Settings/Logs/Logs.types.ts

@@ -53,6 +53,7 @@ export interface CountData {
 export interface EventChartData extends Datum {
   count: number
   timestamp: string
+  has_error: boolean
 }
 
 type LFResponse<T> = {

apps/studio/components/interfaces/Settings/Logs/Logs.utils.ts

@@ -296,6 +296,24 @@ const calcChartStart = (params: Partial<LogsEndpointParams>): [Dayjs, string] =>
   return [its.add(-extendValue, trunc), trunc]
 }
 
+function getErrorCondition(table: LogsTableName): string {
+  switch (table) {
+    case 'edge_logs':
+      return 'response.status_code >= 400'
+    case 'postgres_logs':
+      return "parsed.error_severity IN ('ERROR', 'FATAL', 'PANIC')"
+    case 'function_logs':
+      return "metadata.level IN ('error', 'fatal')"
+    case 'auth_logs':
+      return "metadata.level = 'error' OR metadata.status >= 400"
+    case 'function_edge_logs':
+      return 'response.status_code >= 400'
+    // Add conditions for other log types as needed
+    default:
+      return 'false' // Default to no errors if table type is unknown
+  }
+}
+
 /**
  *
  * generates log event chart query
@@ -308,13 +326,16 @@ export const genChartQuery = (
   const [startOffset, trunc] = calcChartStart(params)
   const where = genWhereStatement(table, filters)
 
+  const errorCondition = getErrorCondition(table)
+
   let joins = genCrossJoinUnnests(table)
 
   return `
 SELECT
 -- log-event-chart
   timestamp_trunc(t.timestamp, ${trunc}) as timestamp,
-  count(t.timestamp) as count
+  count(t.timestamp) as count,
+  LOGICAL_OR(${errorCondition}) as has_error
 FROM
   ${table} t
   ${joins}

apps/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx

@@ -19,6 +19,7 @@ import { LOGS_TABLES, LOG_ROUTES_WITH_REPLICA_SUPPORT, LogsTableName } from './L
 import type { Filters, LogSearchCallback, LogTemplate, QueryType } from './Logs.types'
 import { ensureNoTimestampConflict, maybeShowUpgradePrompt } from './Logs.utils'
 import UpgradePrompt from './UpgradePrompt'
+import dayjs from 'dayjs'
 
 /**
  * Acts as a container component for the entire log display
@@ -228,11 +229,20 @@ export const LogsPreviewer = ({
           {!isLoading && showChart && (
             <LogEventChart
               data={eventChartData}
-              onBarClick={(isoTimestamp) => {
+              onBarClick={({ isoTimestamp }) => {
+                // from should be $RANGE minutes before the bar
+                // to should be $RANGE minutes after the bar
+                const RANGE = 5
+                const from = dayjs(isoTimestamp as string)
+                  .subtract(RANGE, 'minute')
+                  .toISOString()
+                const to = dayjs(isoTimestamp as string)
+                  .add(RANGE, 'minute')
+                  .toISOString()
                 handleSearch('event-chart-bar-click', {
                   query: filters.search_query as string,
-                  to: isoTimestamp as string,
-                  from: null,
+                  to: to,
+                  from: from,
                 })
               }}
             />

apps/studio/components/ui/Charts/AreaChart.tsx

@@ -39,7 +39,7 @@ const AreaChart = ({
     (focusDataIndex !== null &&
       data &&
       data[focusDataIndex] !== undefined &&
-      day(data[focusDataIndex][xAxisKey]).format(customDateFormat)) ||
+      day(String(data[focusDataIndex][xAxisKey])).format(customDateFormat)) ||
     highlightedLabel
 
   const resolvedHighlightedValue =
@@ -66,9 +66,11 @@ const AreaChart = ({
         highlightedValue={
           typeof resolvedHighlightedValue === 'number'
             ? numberFormatter(resolvedHighlightedValue, valuePrecision)
-            : resolvedHighlightedValue
+            : typeof resolvedHighlightedValue === 'string'
+              ? resolvedHighlightedValue
+              : ''
         }
-        highlightedLabel={resolvedHighlightedLabel}
+        highlightedLabel={String(resolvedHighlightedLabel || '')}
         minimalHeader={minimalHeader}
       />
       <Container>
@@ -117,8 +119,8 @@ const AreaChart = ({
       </Container>
       {data && (
         <div className="text-foreground-lighter -mt-8 flex items-center justify-between text-xs">
-          <span>{dayjs(data[0][xAxisKey]).format(customDateFormat)}</span>
-          <span>{dayjs(data[data?.length - 1]?.[xAxisKey]).format(customDateFormat)}</span>
+          <span>{dayjs(String(data[0][xAxisKey])).format(customDateFormat)}</span>
+          <span>{dayjs(String(data[data?.length - 1]?.[xAxisKey])).format(customDateFormat)}</span>
         </div>
       )}
     </div>

apps/studio/components/ui/Charts/BarChart.tsx

@@ -82,7 +82,7 @@ const BarChart = ({
       (focusDataIndex !== null &&
         data &&
         data[focusDataIndex] !== undefined &&
-        day(data[focusDataIndex][xAxisKey]).format(customDateFormat)) ||
+        day(String(data[focusDataIndex][xAxisKey])).format(customDateFormat)) ||
       highlightedLabel
     )
   }
@@ -114,9 +114,11 @@ const BarChart = ({
         highlightedValue={
           typeof resolvedHighlightedValue === 'number'
             ? numberFormatter(resolvedHighlightedValue, valuePrecision)
-            : resolvedHighlightedValue
+            : typeof resolvedHighlightedValue === 'string'
+              ? resolvedHighlightedValue
+              : ''
         }
-        highlightedLabel={resolvedHighlightedLabel}
+        highlightedLabel={String(resolvedHighlightedLabel || '')}
         minimalHeader={minimalHeader}
       />
       <Container>
@@ -163,9 +165,11 @@ const BarChart = ({
                 key={`cell-${index}`}
                 className={`transition-all duration-300 ${onBarClick ? 'cursor-pointer' : ''}`}
                 fill={
-                  focusDataIndex === index || focusDataIndex === null
-                    ? CHART_COLORS.GREEN_1
-                    : CHART_COLORS.GREEN_2
+                  _entry.has_error
+                    ? CHART_COLORS.YELLOW_1
+                    : focusDataIndex === index || focusDataIndex === null
+                      ? CHART_COLORS.GREEN_1
+                      : CHART_COLORS.GREEN_2
                 }
                 enableBackground={12}
               />
@@ -176,11 +180,13 @@ const BarChart = ({
       {data && (
         <div className="text-foreground-lighter -mt-9 flex items-center justify-between text-xs">
           <span>
-            {xAxisIsDate ? day(data[0][xAxisKey]).format(customDateFormat) : data[0][xAxisKey]}
+            {xAxisIsDate
+              ? day(String(data[0][xAxisKey])).format(customDateFormat)
+              : data[0][xAxisKey]}
           </span>
           <span>
             {xAxisIsDate
-              ? day(data[data?.length - 1]?.[xAxisKey]).format(customDateFormat)
+              ? day(String(data[data?.length - 1]?.[xAxisKey])).format(customDateFormat)
               : data[data?.length - 1]?.[xAxisKey]}
           </span>
         </div>

apps/studio/components/ui/Charts/Charts.constants.ts

@@ -7,6 +7,7 @@ export const CHART_COLORS = {
   AXIS: 'hsl(var(--background-overlay-hover))',
   GREEN_1: 'hsl(var(--brand-default))', // #3ECF8E
   GREEN_2: 'hsl(var(--brand-500))',
+  YELLOW_1: 'hsl(var(--warning-600))',
 }
 
 // refer to packages/ui/radix-colors.js for full list of colors

apps/studio/components/ui/Charts/Charts.types.tsx

@@ -38,7 +38,7 @@ export type HeaderType<D> = {
   displayDateInUtc?: boolean
 }
 
-export type Datum = Record<string, string | number>
+export type Datum = Record<string, string | number | boolean>
 
 export interface TimeseriesDatum extends Datum {
   timestamp: string

apps/studio/pages/project/[ref]/logs/edge-logs.tsx

@@ -19,6 +19,6 @@ export const LogPage: NextPageWithLayout = () => {
   )
 }
 
-LogPage.getLayout = (page) => <LogsLayout title="Edge Logs">{page}</LogsLayout>
+LogPage.getLayout = (page) => <LogsLayout title="API Gateway">{page}</LogsLayout>
 
 export default LogPage

apps/studio/tests/pages/projects/LogEventChart.test.tsx

@@ -25,8 +25,8 @@ test('renders chart', async () => {
   render(
     <LogEventChart
       data={[
-        { timestamp: tsMicro.toString(), count: 1 },
-        { timestamp: (tsMicro + 1).toString(), count: 2 },
+        { timestamp: tsMicro.toString(), count: 1, has_error: false },
+        { timestamp: (tsMicro + 1).toString(), count: 2, has_error: false },
       ]}
       onBarClick={mockFn}
     />