SelfHostSelfHost

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

8 months ago

最近发现了一个好用的开源工具 —— Operational。如果你正在运营 SaaS 产品，或者管理着自己的网站，经常需要追踪关键事件（比如用户注册、支付失败、定时任务执行情况），那这个工具能帮你省不少事。

这玩意到底是干嘛的？

简单来说，Operational 就是一个事件追踪器，但它比普通的监控工具有意思多了。想象一下这些场景：

  • 凌晨 3 点，你的支付系统突然挂了，但你还在呼呼大睡
  • 有个大客户刚刚注册了你的服务，你却浑然不知
  • 定时备份任务悄悄失败了三天，你才后知后觉

有了 Operational，这些重要事件发生时，你的手机会立刻收到推送通知。更酷的是，它还能让你直接在手机上触发一些操作，比如重启服务、发送邮件等等。

https://appstore.lazycat.cloud/#/shop/detail/operational.gutenye

如何使用

应用启动后，你会发现让你填配置

image.png

简单解释下这几个值 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

image.png

邮箱地址最好填真实的,类似这种：mailto:email@domain.com

下面的VITE_PUSH_SERVER_KEY

这个实际上就是 VAPID Public Key，填入生成的公钥即可

填写后类似这样：

image.png

点击发布，可以看到登录页面了

image.png 但这一步还没有账户，你需要把地址后面加上/playground 先创建个账户 类似这样https://operational.lanmao168.heiyu.space/playground

image.png

image.png

image.png

先保存一下这个 key,待会要用

image.png

引导页的提示是可以在手机上用 PWA 的方式，这样手机也能看到通知了

image.png

应用主页：

image.png

在主页面 playground，左侧是你的 apikey 和编程语言，中间是常用的通知类型举例，右侧是效果

image.png

实际使用场景

1. 监控用户注册流程

最基础的用法就是监控用户注册。你可以这样设置：

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
  }
});

有个细节，不用自己写代码，在这里复制就行

image.png

左侧的两个按钮，test mode 是测试模式，Notify toggle：开启后，会发送推送通知到你的浏览器/手机

image.png

点击右下角的 "Send event" 按钮，我的浏览器通知权限已经允许了，

image.png 但是我并没有看到浏览器的通知。这是因为我的系统级通知被关闭了，

解决方法： Windows 11/10:

设置 → 系统 → 通知 → 确保浏览器通知开启

macOS:

系统偏好设置 → 通知与专注模式 → 找到浏览器 → 允许通知

我的是 Mac 电脑，在这里打开

image.png

这个时候，再点击 send event 按钮，在浏览器右上角就能看到了

image.png

每次有新用户注册，你就会收到通知，还能看到是从哪个渠道来的，订阅了什么套餐。特别适合早期创业者，每个用户都是宝贝啊！

2. 监控支付和订阅

这个功能对 SaaS 来说简直是刚需：

// 支付成功
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
  }
});

image.png 有人付费了，立马知道；有人要走了，赶紧挽留。这种实时性对小团队来说太重要了。

3. 系统监控和告警

除了业务事件，技术层面的监控也很实用：

// 定时任务执行情况
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（操作按钮）

这是我最喜欢的功能之一，可以直接在通知里添加操作按钮：

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 表情快速识别

细心的你肯定发现了左侧的事件一般都有个表情，给不同类型的事件设置不同的表情，一眼就能看出是好消息还是坏消息：

  • 💰💵 - 收入相关
  • 🎉😃 - 好消息
  • ⚠️🚨 - 需要关注
  • 🔥😱 - 紧急情况
  • 📊📈 - 数据报告

image.png

最后

Operational 真的是那种用了就回不去的工具。它让你对自己的产品有种"尽在掌控"的感觉，不管是在开会、吃饭还是度假，重要的事情都不会错过。

如果你也在运营线上产品，真心建议试试 Operational。它可能不是最强大的监控工具，但绝对是最贴心、最好用的那个。毕竟，工具是为人服务的，不是吗？

项目地址：github.com/operational-co/operational.co

在线体验：app.operational.co（有 demo 账号可以直接体验）

官方文档：operational.co/docs

作者
天天