Better Slack error alerts, added webhook error alerts

Author: matt-aitken

apps/webapp/app/v3/services/alerts/deliverErrorGroupAlert.server.ts

@@ -25,6 +25,7 @@ import { sendAlertEmail } from "~/services/email.server";
 import { logger } from "~/services/logger.server";
 import { decryptSecret } from "~/services/secrets/secretStore.server";
 import { subtle } from "crypto";
+import { generateErrorGroupWebhookPayload } from "./errorGroupWebhook.server";
 
 type ErrorAlertClassification = "new_issue" | "regression" | "unignored";
 
@@ -183,58 +184,15 @@ export class DeliverErrorGroupAlertService {
       return;
     }
 
-    const label = this.#classificationLabel(payload.classification);
-    const errorType = payload.error.errorType || "Error";
-    const task = payload.error.taskIdentifier;
-    const envName = payload.error.environmentName;
-
-    const emoji =
-      payload.classification === "new_issue"
-        ? ":rotating_light:"
-        : payload.classification === "regression"
-          ? ":warning:"
-          : ":bell:";
+    const message = this.#buildErrorGroupSlackMessage(
+      payload,
+      errorLink,
+      channel.project.name
+    );
 
     await this.#postSlackMessage(integration, {
       channel: slackProperties.data.channelId,
-      text: `${label}: ${errorType} in ${task} [${envName}]`,
-      blocks: [
-        {
-          type: "section",
-          text: {
-            type: "mrkdwn",
-            text: `${emoji} *${label}* in *${task}* [${envName}]`,
-          },
-        },
-        {
-          type: "section",
-          text: {
-            type: "mrkdwn",
-            text: this.#wrapInCodeBlock(
-              payload.error.sampleStackTrace || payload.error.errorMessage
-            ),
-          },
-        },
-        {
-          type: "context",
-          elements: [
-            {
-              type: "mrkdwn",
-              text: `> *${task}* | ${envName} | ${channel.project.name}\n> ${payload.error.occurrenceCount} occurrences | ${this.#formatTimestamp(new Date(Number(payload.error.lastSeen)))}`,
-            },
-          ],
-        },
-        {
-          type: "actions",
-          elements: [
-            {
-              type: "button",
-              text: { type: "plain_text", text: "Investigate" },
-              url: errorLink,
-            },
-          ],
-        },
-      ],
+      ...message,
     });
   }
 
@@ -255,36 +213,22 @@ export class DeliverErrorGroupAlertService {
       return;
     }
 
-    const webhookPayload = {
-      type: "alert.error_group" as const,
+    const webhookPayload = generateErrorGroupWebhookPayload({
       classification: payload.classification,
-      error: {
-        fingerprint: payload.error.fingerprint,
-        type: payload.error.errorType,
-        message: payload.error.errorMessage,
-        stackTrace: payload.error.sampleStackTrace || undefined,
-        firstSeen: payload.error.firstSeen,
-        lastSeen: payload.error.lastSeen,
-        occurrenceCount: payload.error.occurrenceCount,
-        taskIdentifier: payload.error.taskIdentifier,
-      },
-      environment: {
-        id: payload.error.environmentId,
-        name: payload.error.environmentName,
-      },
+      error: payload.error,
       organization: {
         id: channel.project.organizationId,
         slug: channel.project.organization.slug,
         name: channel.project.organization.title,
       },
       project: {
         id: channel.project.id,
-        ref: channel.project.externalRef,
+        externalRef: channel.project.externalRef,
         slug: channel.project.slug,
         name: channel.project.name,
       },
       dashboardUrl: errorLink,
-    };
+    });
 
     const rawPayload = JSON.stringify(webhookPayload);
     const hashPayload = Buffer.from(rawPayload, "utf-8");
@@ -352,11 +296,90 @@ export class DeliverErrorGroupAlertService {
     }
   }
 
+  #buildErrorGroupSlackMessage(
+    payload: ErrorAlertPayload,
+    errorLink: string,
+    projectName: string
+  ): Pick<ChatPostMessageArguments, "text" | "blocks" | "attachments"> {
+    const label = this.#classificationLabel(payload.classification);
+    const errorType = payload.error.errorType || "Error";
+    const task = payload.error.taskIdentifier;
+    const envName = payload.error.environmentName;
+
+    return {
+      text: `${label}: ${errorType} in ${task} [${envName}]`,
+      blocks: [
+        {
+          type: "section",
+          text: {
+            type: "mrkdwn",
+            text: `*${label} in ${task} [${envName}]*`,
+          },
+        },
+      ],
+      attachments: [
+        {
+          color: "danger",
+          blocks: [
+            {
+              type: "section",
+              text: {
+                type: "mrkdwn",
+                text: this.#wrapInCodeBlock(
+                  payload.error.sampleStackTrace || payload.error.errorMessage
+                ),
+              },
+            },
+            {
+              type: "section",
+              fields: [
+                {
+                  type: "mrkdwn",
+                  text: `*Task:*\n${task}`,
+                },
+                {
+                  type: "mrkdwn",
+                  text: `*Environment:*\n${envName}`,
+                },
+                {
+                  type: "mrkdwn",
+                  text: `*Project:*\n${projectName}`,
+                },
+                {
+                  type: "mrkdwn",
+                  text: `*Occurrences:*\n${payload.error.occurrenceCount}`,
+                },
+                {
+                  type: "mrkdwn",
+                  text: `*Last seen:*\n${this.#formatTimestamp(new Date(Number(payload.error.lastSeen)))}`,
+                },
+              ],
+            },
+            {
+              type: "actions",
+              elements: [
+                {
+                  type: "button",
+                  text: { type: "plain_text", text: "Investigate" },
+                  url: errorLink,
+                  style: "primary",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+  }
+
   #wrapInCodeBlock(text: string, maxLength = 3000) {
+    const wrapperLength = 6; // ``` prefix + ``` suffix
+    const truncationSuffix = "\n\n...truncated — check dashboard for full error";
+    const innerMax = maxLength - wrapperLength;
+
     const truncated =
-      text.length > maxLength - 10
-        ? text.slice(0, maxLength - 10 - 50) +
-          "\n\ntruncated - check dashboard for complete error message"
+      text.length > innerMax
+        ? text.slice(0, innerMax - truncationSuffix.length) + truncationSuffix
         : text;
     return `\`\`\`${truncated}\`\`\``;
   }

apps/webapp/app/v3/services/alerts/errorGroupWebhook.server.ts

@@ -0,0 +1,74 @@
+import { nanoid } from "nanoid";
+import type { ErrorWebhook } from "@trigger.dev/core/v3/schemas";
+
+export type ErrorAlertClassification = "new_issue" | "regression" | "unignored";
+
+export interface ErrorGroupAlertData {
+  classification: ErrorAlertClassification;
+  error: {
+    fingerprint: string;
+    environmentId: string;
+    environmentName: string;
+    taskIdentifier: string;
+    errorType: string;
+    errorMessage: string;
+    sampleStackTrace: string;
+    firstSeen: string;
+    lastSeen: string;
+    occurrenceCount: number;
+  };
+  organization: {
+    id: string;
+    slug: string;
+    name: string;
+  };
+  project: {
+    id: string;
+    externalRef: string;
+    slug: string;
+    name: string;
+  };
+  dashboardUrl: string;
+}
+
+/**
+ * Generates a webhook payload for an error group alert that conforms to the
+ * ErrorWebhook schema from @trigger.dev/core/v3/schemas
+ */
+export function generateErrorGroupWebhookPayload(data: ErrorGroupAlertData): ErrorWebhook {
+  return {
+    id: nanoid(),
+    created: new Date(),
+    webhookVersion: "2025-01-01",
+    type: "alert.error" as const,
+    object: {
+      classification: data.classification,
+      error: {
+        fingerprint: data.error.fingerprint,
+        type: data.error.errorType,
+        message: data.error.errorMessage,
+        stackTrace: data.error.sampleStackTrace || undefined,
+        firstSeen: new Date(data.error.firstSeen),
+        lastSeen: new Date(data.error.lastSeen),
+        occurrenceCount: data.error.occurrenceCount,
+        taskIdentifier: data.error.taskIdentifier,
+      },
+      environment: {
+        id: data.error.environmentId,
+        name: data.error.environmentName,
+      },
+      organization: {
+        id: data.organization.id,
+        slug: data.organization.slug,
+        name: data.organization.name,
+      },
+      project: {
+        id: data.project.id,
+        ref: data.project.externalRef,
+        slug: data.project.slug,
+        name: data.project.name,
+      },
+      dashboardUrl: data.dashboardUrl,
+    },
+  };
+}