feat(react-email): Image validation checking (#1884)

Author: gabrielmfern

.changeset/angry-bugs-sing.md

@@ -0,0 +1,5 @@
+---
+"react-email": minor
+---
+
+Add image validation checking

package.json

@@ -20,7 +20,6 @@
     "@types/node": "22.10.2",
     "@types/react": "19.0.1",
     "@types/react-dom": "19.0.1",
-    "eslint": "8.50.0",
     "happy-dom": "15.10.2",
     "prettier": "3.4.2",
     "prettier-plugin-tailwindcss": "0.6.6",

packages/react-email/package.json

@@ -69,6 +69,7 @@
     "node-html-parser": "6.1.13",
     "postcss": "8.4.40",
     "prettier-plugin-tailwindcss": "0.6.6",
+    "pretty-bytes": "6.1.1",
     "prism-react-renderer": "2.1.0",
     "react": "^19",
     "react-dom": "^19",

packages/react-email/src/actions/email-validation/check-images.spec.tsx

@@ -0,0 +1,90 @@
+import { render } from '@react-email/render';
+import * as React from 'react';
+import { type ImageCheckingResult, checkImages } from './check-images';
+
+test('checkImages()', async () => {
+  expect(
+    await checkImages(
+      await render(
+        <div>
+          {/* biome-ignore lint/a11y/useAltText: This is intentional to test the checking for accessibility */}
+          <img src="https://resend.com/static/brand/resend-icon-white.png" />,
+          <img src="/static/codepen-challengers.png" alt="codepen challenges" />
+          ,
+        </div>,
+      ),
+      'https://demo.react.email',
+    ),
+  ).toEqual([
+    {
+      source: 'https://resend.com/static/brand/resend-icon-white.png',
+      checks: [
+        {
+          passed: false,
+          type: 'accessibility',
+          metadata: {
+            alt: undefined,
+          },
+        },
+        {
+          passed: true,
+          type: 'syntax',
+        },
+        {
+          passed: true,
+          type: 'security',
+        },
+        {
+          passed: true,
+          type: 'fetch_attempt',
+          metadata: {
+            fetchStatusCode: 200,
+          },
+        },
+        {
+          passed: true,
+          type: 'image_size',
+          metadata: {
+            byteCount: 23_138,
+          },
+        },
+      ],
+      status: 'warning',
+    },
+    {
+      checks: [
+        {
+          metadata: {
+            alt: 'codepen challenges',
+          },
+          passed: true,
+          type: 'accessibility',
+        },
+        {
+          passed: true,
+          type: 'syntax',
+        },
+        {
+          passed: true,
+          type: 'security',
+        },
+        {
+          metadata: {
+            fetchStatusCode: 200,
+          },
+          passed: true,
+          type: 'fetch_attempt',
+        },
+        {
+          metadata: {
+            byteCount: 111_922,
+          },
+          passed: true,
+          type: 'image_size',
+        },
+      ],
+      source: '/static/codepen-challengers.png',
+      status: 'success',
+    },
+  ] satisfies ImageCheckingResult[]);
+});

packages/react-email/src/actions/email-validation/check-images.ts

@@ -0,0 +1,142 @@
+'use server';
+
+import type { IncomingMessage } from 'node:http';
+import { headers } from 'next/headers';
+import { parse } from 'node-html-parser';
+import { quickFetch } from './quick-fetch';
+
+type Check = { passed: boolean } & (
+  | {
+      type: 'accessibility';
+      metadata: {
+        alt: string | undefined;
+      };
+    }
+  | {
+      type: 'fetch_attempt';
+      metadata: {
+        fetchStatusCode: number | undefined;
+      };
+    }
+  | {
+      type: 'image_size';
+      metadata: {
+        byteCount: number | undefined;
+      };
+    }
+  | {
+      type: 'syntax';
+    }
+  | {
+      type: 'security';
+    }
+);
+
+export interface ImageCheckingResult {
+  status: 'success' | 'warning' | 'error';
+  source: string;
+  checks: Check[];
+}
+
+const getResponseSizeInBytes = async (res: IncomingMessage) => {
+  let totalBytes = 0;
+  for await (const chunk of res) {
+    totalBytes += chunk.byteLength;
+  }
+  return totalBytes;
+};
+
+export const checkImages = async (code: string, base: string) => {
+  const ast = parse(code);
+
+  const imageCheckingResults: ImageCheckingResult[] = [];
+
+  const images = ast.querySelectorAll('img');
+  for await (const image of images) {
+    const rawSource = image.attributes.src;
+    if (!rawSource) continue;
+    if (imageCheckingResults.some((result) => result.source === rawSource))
+      continue;
+
+    const source = rawSource?.startsWith('/')
+      ? `${base}${rawSource}`
+      : rawSource;
+
+    const result: ImageCheckingResult = {
+      source: rawSource,
+      status: 'success',
+      checks: [],
+    };
+
+    const alt = image.attributes.alt;
+    result.checks.push({
+      passed: alt !== undefined,
+      type: 'accessibility',
+      metadata: {
+        alt,
+      },
+    });
+    if (alt === undefined) {
+      result.status = 'warning';
+    }
+
+    try {
+      const url = new URL(source);
+      result.checks.push({
+        passed: true,
+        type: 'syntax',
+      });
+
+      if (source.startsWith('https://')) {
+        result.checks.push({
+          passed: true,
+          type: 'security',
+        });
+      } else {
+        result.checks.push({
+          passed: false,
+          type: 'security',
+        });
+        result.status = 'warning';
+      }
+
+      const res = await quickFetch(url);
+      const hasSucceeded = res.statusCode?.toString().startsWith('2') ?? false;
+
+      result.checks.push({
+        type: 'fetch_attempt',
+        passed: hasSucceeded,
+        metadata: {
+          fetchStatusCode: res.statusCode,
+        },
+      });
+      if (!hasSucceeded) {
+        result.status = res.statusCode?.toString().startsWith('3')
+          ? 'warning'
+          : 'error';
+      }
+
+      const responseSizeBytes = await getResponseSizeInBytes(res);
+      result.checks.push({
+        type: 'image_size',
+        passed: responseSizeBytes < 1_048_576, // 1024 x 1024 bytes
+        metadata: {
+          byteCount: responseSizeBytes,
+        },
+      });
+      if (responseSizeBytes > 1_048_576) {
+        result.status = 'warning';
+      }
+    } catch (exception) {
+      result.checks.push({
+        passed: false,
+        type: 'syntax',
+      });
+      result.status = 'error';
+    }
+
+    imageCheckingResults.push(result);
+  }
+
+  return imageCheckingResults;
+};

packages/react-email/src/actions/email-validation/check-links.spec.tsx

@@ -0,0 +1,92 @@
+import { render } from '@react-email/render';
+import * as React from 'react';
+import { type LinkCheckingResult, checkLinks } from './check-links';
+
+test('checkLinks()', async () => {
+  expect(
+    await checkLinks(
+      await render(
+        <div>
+          <a href="/">Root</a>
+          <a href="https://resend.com">Resend</a>
+          <a href="https://notion.so">Notion</a>
+          <a href="http://example.com">Example unsafe</a>
+        </div>,
+      ),
+    ),
+  ).toEqual([
+    {
+      status: 'error',
+      checks: [
+        {
+          type: 'syntax',
+          passed: false,
+        },
+      ],
+      link: '/',
+    },
+    {
+      status: 'success',
+      checks: [
+        {
+          type: 'syntax',
+          passed: true,
+        },
+        {
+          type: 'security',
+          passed: true,
+        },
+        {
+          type: 'fetch_attempt',
+          passed: true,
+          metadata: {
+            fetchStatusCode: 200,
+          },
+        },
+      ],
+      link: 'https://resend.com',
+    },
+    {
+      status: 'warning',
+      checks: [
+        {
+          type: 'syntax',
+          passed: true,
+        },
+        {
+          type: 'security',
+          passed: true,
+        },
+        {
+          type: 'fetch_attempt',
+          metadata: {
+            fetchStatusCode: 301,
+          },
+          passed: false,
+        },
+      ],
+      link: 'https://notion.so',
+    },
+    {
+      status: 'warning',
+      checks: [
+        {
+          type: 'syntax',
+          passed: true,
+        },
+        {
+          type: 'security',
+          passed: false,
+        },
+        {
+          type: 'fetch_attempt',
+          metadata: {
+            fetchStatusCode: 200,
+          },
+          passed: true,
+        },
+      ],
+      link: 'http://example.com',
+    },
+  ] satisfies LinkCheckingResult[]);
+});