fix: error trace event pattern should have red color (#1743)

.changeset/violet-bears-attend.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+fix: error trace event pattern should have red color

packages/app/src/components/DBRowTable.tsx

@@ -123,6 +123,7 @@ const SPECIAL_VALUES = {
 const ACCESSOR_MAP: Record<string, AccessorFn> = {
   duration: row =>
     row.duration >= 0 ? row.duration : SPECIAL_VALUES.not_available,
+  severityText: row => row.severityText ?? row.statusCode,
   default: (row, column) => row[column],
 };
 
@@ -516,7 +517,10 @@ export const RawLogTable = memo(
                     <PatternTrendChart
                       data={value.data}
                       dateRange={value.dateRange}
-                      color={logLevelColor(info.row.original.severityText)}
+                      color={logLevelColor(
+                        info.row.original.severityText ??
+                          info.row.original.statusCode,
+                      )}
                     />
                   </div>
                 );

packages/app/src/components/PatternTable.tsx

@@ -44,6 +44,7 @@ export default function PatternTable({
     samples: SAMPLES,
     bodyValueExpression,
     severityTextExpression: source?.severityTextExpression ?? '',
+    statusCodeExpression: source?.statusCodeExpression ?? '',
     totalCount,
   });
 
@@ -79,7 +80,7 @@ export default function PatternTable({
           __hdx_pattern_trend: 'Trend',
           countStr: 'Count',
           pattern: 'Pattern',
-          severityText: 'level',
+          severityText: 'Level',
         }}
         config={patternQueryConfig}
         showExpandButton={false}

packages/app/src/hooks/usePatterns.tsx

@@ -107,6 +107,7 @@ async function mineEventPatterns(logs: string[], pyodide: any) {
 export const PATTERN_COLUMN_ALIAS = '__hdx_pattern_field';
 export const TIMESTAMP_COLUMN_ALIAS = '__hdx_timestamp';
 export const SEVERITY_TEXT_COLUMN_ALIAS = '__hdx_severity_text';
+export const STATUS_CODE_COLUMN_ALIAS = '__hdx_status_code';
 
 export type SampleLog = {
   [PATTERN_COLUMN_ALIAS]: string;
@@ -126,12 +127,14 @@ function usePatterns({
   samples,
   bodyValueExpression,
   severityTextExpression,
+  statusCodeExpression,
   enabled = true,
 }: {
   config: ChartConfigWithDateRange;
   samples: number;
   bodyValueExpression: string;
   severityTextExpression?: string;
+  statusCodeExpression?: string;
   enabled?: boolean;
 }) {
   const configWithPrimaryAndPartitionKey = useConfigWithPrimaryAndPartitionKey({
@@ -143,6 +146,9 @@ function usePatterns({
       ...(severityTextExpression
         ? [`${severityTextExpression} as ${SEVERITY_TEXT_COLUMN_ALIAS}`]
         : []),
+      ...(statusCodeExpression
+        ? [`${statusCodeExpression} as ${STATUS_CODE_COLUMN_ALIAS}`]
+        : []),
     ].join(','),
     // TODO: Proper sampling
     orderBy: [{ ordering: 'DESC', valueExpression: 'rand()' }],
@@ -210,6 +216,7 @@ export function useGroupedPatterns({
   samples,
   bodyValueExpression,
   severityTextExpression,
+  statusCodeExpression,
   totalCount,
   enabled = true,
 }: {
@@ -217,6 +224,7 @@ export function useGroupedPatterns({
   samples: number;
   bodyValueExpression: string;
   severityTextExpression?: string;
+  statusCodeExpression?: string;
   totalCount?: number;
   enabled?: boolean;
 }) {
@@ -229,15 +237,9 @@ export function useGroupedPatterns({
     samples,
     bodyValueExpression,
     severityTextExpression,
+    statusCodeExpression,
     enabled,
   });
-  const columnMap = useMemo(() => {
-    return selectColumnMapWithoutAdditionalKeys(
-      results?.meta,
-      results?.additionalKeysLength,
-    );
-  }, [results]);
-  const columns = useMemo(() => Array.from(columnMap.keys()), [columnMap]);
 
   const sampledRowCount = results?.data.length;
   const sampleMultiplier = useMemo(() => {
@@ -283,12 +285,15 @@ export function useGroupedPatterns({
 
       // return at least 1
       const count = Math.max(Math.round(rows.length * sampleMultiplier), 1);
+      const lastRow = rows.at(-1);
+
       fullPatternGroups[patternId] = {
         id: patternId,
-        pattern: rows[rows.length - 1].__hdx_pattern, // last pattern is usually the most up to date templated pattern
+        pattern: lastRow?.__hdx_pattern, // last pattern is usually the most up to date templated pattern
         count,
         countStr: `~${count}`,
-        severityText: rows[rows.length - 1].__hdx_severity_text, // last severitytext is usually representative of the entire pattern set
+        severityText: lastRow?.[SEVERITY_TEXT_COLUMN_ALIAS], // last severitytext is usually representative of the entire pattern set
+        statusCode: lastRow?.[STATUS_CODE_COLUMN_ALIAS],
         samples: rows,
         __hdx_pattern_trend: {
           data: Object.entries(bucketCounts).map(([bucket, count]) => ({