Operational 使用指南：让你的产品事件追踪变得简单有趣

最近发现了一个好用的开源工具 —— Operational。如果你正在运营 SaaS 产品，或者管理着自己的网站，经常需要追踪关键事件（比如用户注册、支付失败、定时任务执行情况），那这个工具能帮你省不少事。 ## 这玩意到底是干嘛的？ 简单来说，Operational 就是一个事件追踪器，但它比普通的监控工具有意思多了。想象一下这些场景： - 凌晨 3 点，你的支付系统突然挂了，但你还在呼呼大睡 - 有个大客户刚刚注册了你的服务，你却浑然不知 - 定时备份任务悄悄失败了三天，你才后知后觉 有了 Operational，这些重要事件发生时，你的手机会立刻收到推送通知。更酷的是，它还能让你直接在手机上触发一些操作，比如重启服务、发送邮件等等。 https://appstore.lazycat.cloud/#/shop/detail/operational.gutenye ## 如何使用 应用启动后，你会发现让你填配置  简单解释下这几个值 VAPID (Voluntary Application Server Identification) 密钥用于推送通知认证。你需要生成一对公钥和私钥。 方法一：你可以安装 web-push 工具，使用 web-push 库生成 ``` npm install -g web-push # 生成 VAPID 密钥 web-push generate-vapid-keys ``` 执行后会输出类似这样的结果： ``` ======================================= Public Key: BKd0bW1m5tZwZ5JhwW5QwAkPLwgqDWcXEHvxqt_Lnk7hfJvGYW7jdQhPXr4vQrLndzCJp2qZg9FxhIjx-D5zQAc Private Key: GfNpM_E6SLHwQKhGnVxPXW_6S-8bVqZNlZs3GTJXEVU ======================================= ``` 或者更简单的，方法二：使用在线生成器 比如：- https://www.attheminute.com/au/vapid-key-generator  邮箱地址最好填真实的,类似这种：mailto:email@domain.com 下面的VITE_PUSH_SERVER_KEY 这个实际上就是 VAPID Public Key，填入生成的公钥即可 填写后类似这样：  点击发布，可以看到登录页面了  但这一步还没有账户，你需要把地址后面加上/playground 先创建个账户 类似这样https://operational.lanmao168.heiyu.space/playground    先保存一下这个 key,待会要用  引导页的提示是可以在手机上用 PWA 的方式，这样手机也能看到通知了  应用主页：  在主页面 playground，左侧是你的 apikey 和编程语言，中间是常用的通知类型举例，右侧是效果  ## 实际使用场景 ### 1. 监控用户注册流程 最基础的用法就是监控用户注册。你可以这样设置： ```javascript import Operational from "@operational.co/sdk"; const ops = new Operational("你的API密钥"); // 当有新用户注册时 await ops.events.ingest({ name: "新用户注册 🎉", avatar: "😃", data: { email: user.email, plan: user.plan, source: user.referralSource } }); ``` 有个细节，不用自己写代码，在这里复制就行  左侧的两个按钮，test mode 是测试模式，Notify toggle：开启后，会发送推送通知到你的浏览器/手机  点击右下角的 "Send event" 按钮，我的浏览器通知权限已经允许了，  但是我并没有看到浏览器的通知。这是因为我的系统级通知被关闭了， 解决方法： Windows 11/10: 设置 → 系统 → 通知 → 确保浏览器通知开启 macOS: 系统偏好设置 → 通知与专注模式 → 找到浏览器 → 允许通知 我的是 Mac 电脑，在这里打开  这个时候，再点击 send event 按钮，在浏览器右上角就能看到了  每次有新用户注册，你就会收到通知，还能看到是从哪个渠道来的，订阅了什么套餐。特别适合早期创业者，每个用户都是宝贝啊！ ### 2. 监控支付和订阅 这个功能对 SaaS 来说简直是刚需： ```javascript // 支付成功 await ops.events.ingest({ name: "收款成功 💰", avatar: "💵", data: { amount: payment.amount, customer: payment.customerName, plan: payment.planType } }); // 用户取消订阅（这个要重点关注！） await ops.events.ingest({ name: "⚠️ 用户取消订阅", avatar: "😢", data: { customer: subscription.customerName, reason: subscription.cancellationReason, mrr_lost: subscription.monthlyValue } }); ```  有人付费了，立马知道；有人要走了，赶紧挽留。这种实时性对小团队来说太重要了。 ### 3. 系统监控和告警 除了业务事件，技术层面的监控也很实用： ```javascript // 定时任务执行情况 await ops.events.ingest({ name: "数据库备份完成", avatar: "💾", data: { size: backup.size, duration: backup.duration, status: "success" } }); // API 错误率超标 if (errorRate > 0.05) { await ops.events.ingest({ name: "🚨 API错误率过高", avatar: "🔥", data: { error_rate: `${errorRate * 100}%`, affected_endpoints: errorEndpoints, recent_errors: recentErrors } }); } ``` ### 4. 添加 Action Buttons（操作按钮） 这是我最喜欢的功能之一，可以直接在通知里添加操作按钮： ```javascript await ops.events.ingest({ name: "服务器内存告急", avatar: "⚠️", data: { server: "prod-server-01", memory_usage: "92%" }, actions: [ { name: "重启服务", webhook_url: "https://your-api.com/restart-server", method: "POST" }, { name: "清理缓存", webhook_url: "https://your-api.com/clear-cache", method: "POST" } ] }); ``` 收到通知后，直接点击按钮就能执行操作，不用再打开电脑登录服务器了。 ### 利用 Avatar 表情快速识别 细心的你肯定发现了左侧的事件一般都有个表情，给不同类型的事件设置不同的表情，一眼就能看出是好消息还是坏消息： - 💰💵 - 收入相关 - 🎉😃 - 好消息 - ⚠️🚨 - 需要关注 - 🔥😱 - 紧急情况 - 📊📈 - 数据报告  ## 最后 Operational 真的是那种用了就回不去的工具。它让你对自己的产品有种"尽在掌控"的感觉，不管是在开会、吃饭还是度假，重要的事情都不会错过。 如果你也在运营线上产品，真心建议试试 Operational。它可能不是最强大的监控工具，但绝对是最贴心、最好用的那个。毕竟，工具是为人服务的，不是吗？ --- **项目地址**：[github.com/operational-co/operational.co](https://github.com/operational-co/operational.co) **在线体验**：[app.operational.co](https://app.operational.co/?signinas=kevin)（有 demo 账号可以直接体验） **官方文档**：[operational.co/docs](https://operational.co/docs)