Skip to content

fix: stop jsx-email Butan deprecation warning on every email render - #469

Open
KMKoushik wants to merge 1 commit into
mainfrom
hq/fix-butan-log-spam
Open

KMKoushik wants to merge 1 commit into
mainfrom
hq/fix-butan-log-spam

Conversation

@KMKoushik

@KMKoushik KMKoushik commented Oct 17, 2026 •

Copy link
Copy Markdown
Member

What changed

  • Added packages/email-editor/src/email-button.tsx: EmailButton, a copy of jsx-email 2.8.4's deprecated Butan component with the deprecation log.warn removed. Everything else is the same.
  • packages/email-editor/src/renderer.tsx now uses EmailButton instead of importing Butan as Button from jsx-email.
  • Added apps/web/src/server/email-renderer.unit.test.ts. It pins the exact button markup and checks that rendering a button doesn't call console.warn.

Why

Butan logs "The Butan component is deprecated and is provided as a means of migrating to the updated Butan component…" every time it renders, so once per button per email. In production this was 356 of the last 500 error-level lines, and Railway was dropping log lines because of the rate, which hid real errors.

jsx-email's replacement Button produces completely different markup: a <table> wrapper and a VML v:roundrect, and it needs explicit width and height. Switching to it would change how every customer email with a button looks. Turning off jsx-email's shared logger would also hide its other warnings. Copying the component without the warning keeps the output the same and stops only this log line.

How I checked it

  • Rendered a sample doc through the real EmailRenderer before and after the change and compared the HTML. The doc had a paragraph, a spacer and 4 buttons (custom colors and borders, left/center/right alignment, a {{variable}} URL, a linkValues URL, and default/missing attrs), rendered both with and without variable replacement. The output was byte-identical (cmp). The before run printed the warning once per button; the after run printed nothing.
  • The new unit test's warning check fails on main and passes with this change. Its markup check passes on both.
  • pnpm --filter=web exec vitest run -c vitest.unit.config.ts: 23 files, 133 tests passed.
  • pnpm --filter=web typecheck and tsc --noEmit in packages/email-editor both pass. ESLint shows no new warnings in the changed files.

No migrations and no UI changes.


Summary by cubic

Stops jsx-email's deprecated Butan component from logging a deprecation warning on every email render; the warning accounted for 356 of the last 500 error-level log lines in production and caused Railway to drop log lines, hiding real errors.

  • Added EmailButton, a copy of Butan with the deprecation log.warn removed, and switched packages/email-editor/src/renderer.tsx to use it.
  • Kept Butan rather than switching to jsx-email's replacement Button, which renders different markup (a <table> wrapper and VML v:roundrect) and would change how every customer email with a button looks.
  • Added a unit test that pins the exact button markup and verifies rendering a button no longer calls console.warn.

Written for commit 4c983ff. Summary will update on new commits.

View guided diff Turn on auto-fix

Summary by CodeRabbit

  • New Features
    • Email-rendered buttons now retain the legacy button appearance, including Outlook-compatible spacing. Button padding supports pixel, em, rem, percentage, and numeric values, with shorthand and side-specific settings applied.
  • Bug Fixes
    • Email rendering now uses consistent button markup, and a rendering check verifies that button output is produced without warnings.

@vercel

vercel Bot commented Oct 17, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
unsend-marketing Ready Ready Preview Oct 17, 2026 7:37am UTC

@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying usesend with  Cloudflare Pages  Cloudflare Pages

Latest commit: 4c983ff
Status: ✅  Deploy successful!
Preview URL: https://def3bf82.usesend.pages.dev
Branch Preview URL: https://hq-fix-butan-log-spam.usesend.pages.dev

View logs

@coderabbitai

coderabbitai Bot commented Oct 17, 2026 •

Copy link
Copy Markdown
Contributor

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Organization UI
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: 3cd75593-8ce8-4fab-9742-33c936e5fad0
📥 Commits

Reviewing files that changed from the base of the PR and between 7634811 and 4c983ff.

📒 Files selected for processing: 3
  • apps/web/src/server/email-renderer.unit.test.ts
  • packages/email-editor/src/email-button.tsx
  • packages/email-editor/src/renderer.tsx

Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 7 remain after this review.

Walkthrough

The change adds an anchor-based EmailButton that parses padding values and generates button markup, including Outlook-specific spacing when padding is available. EmailRenderer.button now uses EmailButton instead of the jsx-email button component. A unit test checks the rendered button markup and verifies that rendering produces no captured console.warn calls.

Priority: ➖ Normal

Change: Bug fix

Merge Risk: ⚪ Minimal · up to 4c983

No merge-blocking issue was identified; the button’s inspected rendering path preserves the existing markup.

Pre-merge checks: Passed 4 · Failed 1

Failed Failed checks: 1 warning

Check name Status Explanation Resolution
Docstring Coverage Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 3 functions across 3 files. Write docstrings for the functions missing them to satisfy the coverage threshold.
Passed Passed checks: 4 passed
Check name Status Explanation
Description Check Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check Passed The title clearly and concisely describes the main change: replacing the deprecated jsx-email Butan usage to stop deprecation warnings during email rendering.
Linked Issues check Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check Passed Check skipped because no linked issues were found for this pull request.
  • Fix all pre-merge checks with AI
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Warning

Some tools did not complete. Review the errors below.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

apps/web/src/server/email-renderer.unit.test.ts

ESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox.

packages/email-editor/src/email-button.tsx

ESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox.

packages/email-editor/src/renderer.tsx

ESLint skipped: the matched ESLint configuration already failed (missing-dependency).

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

This branch was successfully deployed

1 active deployment
Preview — 4c983ffb Deployed Oct 17, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant