React Email与Prometheus：邮件系统监控和告警

【免费下载链接】react-email 💌 Build and send emails using React 项目地址: https://gitcode.com/GitHub_Trending/re/react-email

痛点：邮件系统的黑盒困境

在现代企业应用中，邮件系统往往是关键的业务组件，承担着用户注册验证、订单通知、营销推广等重要功能。然而，传统的邮件系统监控存在诸多痛点：

• 📧 发送状态不透明：无法实时了解邮件发送成功率
• ⚠️ 故障响应延迟：问题发现时往往已经造成业务影响
• 📊 数据统计缺失：缺乏发送量、失败率等关键指标
• 🔍 问题排查困难：难以快速定位发送失败的根本原因

React Email + Prometheus：监控解决方案

架构设计

核心监控指标

指标类别	具体指标	说明	告警阈值
发送性能	email_send_total	总发送量	-
	email_send_duration_seconds	发送耗时	> 5s
成功率	email_success_total	成功发送数	-
	email_failure_total	失败发送数	连续失败 > 10
服务质量	email_queue_size	待发送队列大小	> 1000
	email_retry_count	重试次数	> 3

实现方案

1. Prometheus指标定义

// metrics.ts
import { Counter, Gauge, Histogram } from 'prom-client';

export const emailMetrics = {
  sendTotal: new Counter({
    name: 'email_send_total',
    help: 'Total number of email sending attempts',
    labelNames: ['provider', 'template'] as const,
  }),
  
  successTotal: new Counter({
    name: 'email_success_total',
    help: 'Total number of successful email sends',
    labelNames: ['provider', 'template'] as const,
  }),
  
  failureTotal: new Counter({
    name: 'email_failure_total', 
    help: 'Total number of failed email sends',
    labelNames: ['provider', 'template', 'error_code'] as const,
  }),
  
  sendDuration: new Histogram({
    name: 'email_send_duration_seconds',
    help: 'Email sending duration in seconds',
    labelNames: ['provider', 'template'] as const,
    buckets: [0.1, 0.5, 1, 2, 5, 10],
  }),
};

2. React Email集成监控

// monitored-email-service.ts
import { render } from '@react-email/render';
import { emailMetrics } from './metrics';

export class MonitoredEmailService {
  private provider: EmailProvider;
  
  constructor(provider: EmailProvider) {
    this.provider = provider;
  }
  
  async sendEmail(
    template: React.ComponentType<any>,
    props: any,
    to: string,
    subject: string
  ): Promise<SendResult> {
    const startTime = Date.now();
    
    try {
      // 渲染React Email组件
      const html = await render(React.createElement(template, props));
      
      emailMetrics.sendTotal.inc({
        provider: this.provider.name,
        template: template.name
      });
      
      // 发送邮件
      const result = await this.provider.send({
        to,
        subject, 
        html,
        from: 'noreply@example.com'
      });
      
      const duration = (Date.now() - startTime) / 1000;
      
      emailMetrics.successTotal.inc({
        provider: this.provider.name,
        template: template.name
      });
      
      emailMetrics.sendDuration.observe({
        provider: this.provider.name,
        template: template.name
      }, duration);
      
      return { success: true, messageId: result.messageId };
      
    } catch (error) {
      const errorCode = error.code || 'unknown';
      
      emailMetrics.failureTotal.inc({
        provider: this.provider.name,
        template: template.name,
        error_code: errorCode
      });
      
      return { 
        success: false, 
        error: error.message,
        errorCode 
      };
    }
  }
}

3. Grafana监控面板配置

{
  "panels": [
    {
      "title": "邮件发送成功率",
      "type": "stat",
      "targets": [{
        "expr": "email_success_total / email_send_total * 100",
        "legendFormat": "成功率"
      }],
      "thresholds": {
        "steps": [
          { "value": 95, "color": "green" },
          { "value": 90, "color": "yellow" },
          { "value": 85, "color": "red" }
        ]
      }
    },
    {
      "title": "发送耗时分布",
      "type": "heatmap", 
      "targets": [{
        "expr": "histogram_quantile(0.95, rate(email_send_duration_seconds_bucket[5m]))",
        "legendFormat": "P95耗时"
      }]
    }
  ]
}

4. Alertmanager告警规则

groups:
- name: email-alerts
  rules:
  - alert: EmailSendFailureRateHigh
    expr: rate(email_failure_total[5m]) / rate(email_send_total[5m]) * 100 > 10
    for: 5m
    labels:
      severity: critical
    annotations:
      summary: "邮件发送失败率过高"
      description: "过去5分钟内邮件发送失败率超过10%"
  
  - alert: EmailSendLatencyHigh
    expr: histogram_quantile(0.95, rate(email_send_duration_seconds_bucket[5m])) > 5
    for: 2m
    labels:
      severity: warning
    annotations:
      summary: "邮件发送延迟过高"
      description: "P95发送延迟超过5秒"
  
  - alert: SpecificTemplateFailure
    expr: rate(email_failure_total{template="welcome_email"}[10m]) > 5
    for: 2m
    labels:
      severity: warning
    annotations:
      summary: "欢迎邮件模板发送异常"
      description: "欢迎邮件模板在过去10分钟内失败次数超过5次"

实战案例：电商订单通知系统

场景描述

某电商平台使用React Email构建订单状态通知邮件，需要确保99.9%的邮件能够成功送达用户。

监控配置

// order-email-monitor.ts
import { MonitoredEmailService } from './monitored-email-service';
import { OrderConfirmationEmail } from './emails/order-confirmation';
import { OrderShippedEmail } from './emails/order-shipped';
import { OrderDeliveredEmail } from './emails/order-delivered';

class OrderEmailMonitor {
  private emailService: MonitoredEmailService;
  
  constructor() {
    this.emailService = new MonitoredEmailService(
      new ResendProvider(process.env.RESEND_API_KEY)
    );
  }
  
  async sendOrderConfirmation(order: Order, user: User) {
    return this.emailService.sendEmail(
      OrderConfirmationEmail,
      { order, user },
      user.email,
      `订单确认 #${order.id}`
    );
  }
  
  async sendOrderShippedNotification(order: Order, user: User) {
    return this.emailService.sendEmail(
      OrderShippedEmail, 
      { order, user },
      user.email,
      `订单已发货 #${order.id}`
    );
  }
  
  async sendOrderDeliveredNotification(order: Order, user: User) {
    return this.emailService.sendEmail(
      OrderDeliveredEmail,
      { order, user },
      user.email, 
      `订单已送达 #${order.id}`
    );
  }
  
  // 监控仪表板数据获取
  getMetrics() {
    return {
      totalSends: emailMetrics.sendTotal,
      successRate: emailMetrics.successTotal / emailMetrics.sendTotal * 100,
      averageDuration: emailMetrics.sendDuration,
      failureBreakdown: emailMetrics.failureTotal
    };
  }
}

监控效果

通过Prometheus + Grafana的监控体系，实现了：

1. 实时可视化：邮件发送状态、成功率、延迟等指标实时展示
2. 智能告警：异常情况自动触发告警，减少人工巡检
3. 性能优化：基于监控数据优化发送策略和模板设计
4. 容量规划：根据发送趋势进行资源扩容规划

最佳实践

监控策略

技术选型建议

组件	推荐方案	替代方案	适用场景
指标采集	Prometheus	InfluxDB	时间序列数据存储
可视化	Grafana	Kibana	监控仪表板
告警	Alertmanager	PagerDuty	多通道告警通知
邮件渲染	React Email	MJML	React技术栈
发送服务	Resend	SendGrid	事务性邮件

总结

React Email与Prometheus的结合为邮件系统提供了完整的可观测性解决方案：

🎯 核心价值：

• 端到端的邮件发送监控
• 实时的问题发现和告警
• 数据驱动的性能优化
• 可靠的业务保障

🚀 实施建议：

1. 从关键业务邮件开始监控
2. 建立分级告警机制
3. 定期复盘监控效果
4. 持续优化监控指标

通过这套监控体系，企业可以确保邮件系统的稳定性和可靠性，为用户提供更好的邮件体验，同时降低运维成本和业务风险。

【免费下载链接】react-email 💌 Build and send emails using React 项目地址: https://gitcode.com/GitHub_Trending/re/react-email