使用字节的 TRAE 开发一个简单的 node 服务
/ 11 分钟阅读 /
目录 Table of Contents
大家好我是 luckySnail。在浏览流媒体的时候,发现都在推荐这个工具,字节刚刚发布了 AI 编辑器 - TRAE(The Real AI Engineer),真正的 AI 引擎吗?,必须赶紧体验一波,刚好想要开发一个小工具,希望它不要让我失望。偷偷说一下它已经让 windows 用户失望了,因为它目前仅支持 mac 电脑。你可以看冴羽的这篇了解TRAE:https://juejin.cn/post/7461825527059611686
初体验
让我们新建一个文件夹,为什么叫这个名字,接下来你就知道了。
接下来我们要做一个工具来帮我监控我的公司项目是否都正常运行。如果出问题了,就需要赶紧通知我出事了,赶紧爬起来修 bug !
简单的梳理了一下需求,我使用了它的 builder 能力来初始化项目,提问:“我要做一个小的工具来帮我们监控我的公司项目是否都正常运行。如果出问题了,就需要赶紧通知我出事了,赶紧修 bug 。通知方式是邮箱通知,使用前端技术实现,我如何实现?我目前调研可以使用 Playwright 来做充分的网站可用性检测,使用nodemailer 来进行邮箱通知,由于 nodemailer 是必须 node 环境,所以你需要给我搭建一个 node 服务”,这里我是预先告诉了它如何实现,防止它给出不合理的实现方式。
然后它很快理解了我们的需求,并且搭建好了一个基础服务:
启动项目后发现邮箱服务是有问题的,于是我把错误信息给它,然后问它为什么?如何修复?但是会出现:
于是我只能切换 chat 模式,发现是正常的,我把问题和相关代码(使用引用能力)给到它。它也很快发现了问题,然后给出了解决的方法。
我模拟了一个网站出现问题的场景,然后我们可以看到当检查网站存在问题的时候,就会触发发送邮件的逻辑:
到这里基本的流程算是跑通了,我们可以继续提问 AI,代码层面是否可以继续优化:
它给出了一些比较好的建议,我们可以点击“全部接受”,然后先安装依赖,再次启动查看一下效果:
这一次,它给出了更加细致的日志信息,但是我们发现最后一个 error 不太正常,我们问一下 AI 这个是否是正常日志,AI 发现了问题,并进行了修复,我们重启验证逻辑没有问题
邮箱也收到了告警信息!
到这里其实基本的牛马已经做好了,它能够实时的帮我监控网站是否运行良好,保证服务异常及时通知到人。但是真正场景下,需要的不仅仅是网站正常加载,还有很多其他需要监控的东西。
下面我们来看看 AI 的代码水平怎么样吧!
const { chromium } = require("@playwright/test");const nodemailer = require("nodemailer");const cron = require("node-cron");const winston = require("winston"); // 添加日志库
// 配置日志const logger = winston.createLogger({ format: winston.format.combine(winston.format.timestamp(), winston.format.json()), transports: [ new winston.transports.File({ filename: "error.log", level: "error" }), new winston.transports.File({ filename: "combined.log" }), new winston.transports.Console(), ],});
// 邮件配置const transporter = nodemailer.createTransport({ host: "smtp.qq.com", port: 465, // 修改为465端口 secure: true, // 设置为true auth: { user: "3074994545@qq.com", // 补充完整的QQ邮箱地址 pass: "xxxx", // QQ邮箱授权码 },});
// 要监控的网站列表const websites = [ { name: "老鱼简历", url: "https://laoyujianli.com", checkElements: [".laoyu-page-container", ".new-index-page", ".template-item"], }, { name: "编程导航", url: "https://codefather.cn", checkElements: [".ant-layout", ".user-name"], }, { name: "面试鸭", url: "https://mianshiya.cn", // 移除多余的空格 checkElements: ["#indexPage", ".ant-list-item", "#ccc"], retryCount: 3, // 添加重试次数 retryDelay: 5000, // 重试延迟时间(毫秒) },];
// 浏览器实例管理let browserInstance = null;async function getBrowser() { if (!browserInstance) { browserInstance = await chromium.launch({ timeout: 60000, }); } return browserInstance;}
// 检查网站可用性async function checkWebsite(site) { const startTime = Date.now(); const browser = await getBrowser(); const context = await browser.newContext({ userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36", });
try { const page = await context.newPage(); logger.info(`正在检查网站: ${site.name}`);
let lastError; // 添加重试机制 for (let i = 0; i < (site.retryCount || 1); i++) { try { // 设置页面加载超时时间 await page.goto(site.url, { timeout: 30000, waitUntil: "networkidle", // 等待网络空闲 });
// 检查关键元素是否存在 for (const selector of site.checkElements) { try { await page.waitForSelector(selector, { timeout: 5000 }); } catch (elementError) { console.log(`元素 ${selector} 未找到,继续检查其他元素`); } }
console.log(`${site.name} 检查通过`); return { success: true }; } catch (error) { lastError = error; if (i < (site.retryCount || 1) - 1) { console.log(`${site.name} 检查失败,等待 ${site.retryDelay || 5000}ms 后重试...`); await new Promise((resolve) => setTimeout(resolve, site.retryDelay || 5000)); } } }
console.error(`${site.name} 检查失败:`, lastError.message); return { success: false, error: lastError.message, }; } finally { await context.close(); // 只关闭 context,不关闭浏览器 }}
// 添加进程退出时的清理process.on("SIGTERM", async () => { logger.info("服务正在关闭..."); if (browserInstance) { await browserInstance.close(); browserInstance = null; } process.exit(0);});
process.on("SIGINT", async () => { logger.info("服务正在关闭..."); if (browserInstance) { await browserInstance.close(); browserInstance = null; } process.exit(0);});
// 发送告警邮件async function sendAlertEmail(site, error) { const mailOptions = { from: "3074994545@qq.com", // 使用完整的发件人邮箱 to: "3074994545@qq.com", // 使用完整的收件人邮箱 subject: `🚨 网站异常告警: ${site.name}`, html: ` <h2>网站监控告警</h2> <p><strong>网站名称:</strong> ${site.name}</p> <p><strong>网站地址:</strong> ${site.url}</p> <p><strong>错误信息:</strong> ${error}</p> <p><strong>发生时间:</strong> ${new Date().toLocaleString()}</p> `, };
try { await transporter.sendMail(mailOptions); console.log(`已发送告警邮件 - ${site.name}`); } catch (error) { console.error("发送邮件失败:", error); // 如果是认证错误,输出更详细的信息 if (error.code === "EAUTH") { console.error("邮箱认证失败,请检查以下内容:"); console.error("1. 确保QQ邮箱已开启SMTP服务"); console.error("2. 确保使用的是正确的授权码而不是邮箱密码"); console.error("3. 访问 https://service.mail.qq.com/cgi-bin/help?subtype=1&&id=28&&no=1001256 获取帮助"); } }}
// 执行监控任务async function runMonitoring() { // 添加并发限制 const concurrentLimit = 2; const chunks = []; for (let i = 0; i < websites.length; i += concurrentLimit) { chunks.push(websites.slice(i, i + concurrentLimit)); }
for (const chunk of chunks) { await Promise.all( chunk.map(async (site) => { try { const result = await checkWebsite(site); if (!result.success) { await sendAlertEmail(site, result.error); } } catch (error) { logger.error(`监控任务执行失败 (${site.name}):`, { error: error.message, stack: error.stack, }); } }) ); }}
// 添加优雅退出处理process.on("SIGTERM", async () => { logger.info("服务正在关闭..."); if (browserInstance) { await browserInstance.close(); } process.exit(0);});
// 设置定时任务,每5分钟执行一次监控cron.schedule("*/5 * * * *", () => { console.log("开始执行网站监控..."); runMonitoring();});
// 立即执行一次监控console.log("启动网站监控服务...");runMonitoring();你觉得写的怎么样呢?我觉得蛮好的:
- 代码逻辑清晰,每个函数都符合单一原则,开发中它也提醒我要把 websites 配置信息单独创建文件存储
- 能够基于代码进行重构优化,使用社区流行的 winston 日志库来记录信息
- 有重试,try catch 兜底逻辑
总结
- TRAE 的 UI 和交互不输 cursor
- builder 模式下,提出一个需求,它能快速帮我拆解需求,生成项目,安装依赖,启动项目到最后的 web 预览。这对没有接触过编程的人更加友好
- 在有些时候,它也会乱说,明明有问题,但是硬说已经解决了!
- 连接不稳定,经常网络错误,这个非常影响开发体验
- 免费使用 claude 3.5 和 chatGpt 很香。
- 代码块右上角的一些能力非常好用,例如应用功能,能够智能的把相关的内容进行替换,然后通过 diff 清晰的让你知道你修改了什么
- 感觉模型深度链接了代码上下文,能给出和我目前项目相关的代码
- 暴论:由于模型能力的限制,无论如何优化交互,流程。目前没有编程基础的人很难使用 AI 编辑器开发出真正的产品
需要深度使用才能发现它更多使用场景!