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

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

## 这玩意到底是干嘛的？

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

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

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


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

## 如何使用

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

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/c557740a-4e08-4281-9bf9-beb9d4ccf2a5.png "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](https://dl.playground.lazycat.cloud/guidelines/496/cc313262-0e75-4152-a038-99169cfb313a.png "image.png")

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

下面的VITE_PUSH_SERVER_KEY

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

填写后类似这样：

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/012c6883-b59b-4f24-82b7-ecad33e67d13.png "image.png")

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

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/12693d68-a4e8-404b-9da0-3563b12fb854.png "image.png")
但这一步还没有账户，你需要把地址后面加上/playground 先创建个账户
类似这样https://operational.lanmao168.heiyu.space/playground

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/c83a8119-7cfb-4f09-8ca8-39fff129e123.png "image.png")

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/fbedf6e2-88d0-4ede-ab10-8023cc8fa54f.png "image.png")

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/685c9338-deea-478a-b2ea-84f9fed7ceb9.png "image.png")

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

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/9dd36686-29c2-4418-8eb8-4c3e00c072d6.png "image.png")

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

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/2fc4f376-6450-49f8-8c3e-6538dca4ba6c.png "image.png")

应用主页：

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/c46422f6-82fe-46db-ac15-daa8e9a2b2b1.png "image.png")

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

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/acf56cf9-b38c-448d-9baf-f0f9b3f8b29e.png "image.png")

## 实际使用场景

### 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
  }
});
```
有个细节，不用自己写代码，在这里复制就行

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/40ded9da-33ec-4b7d-a076-bed269d18d2a.png "image.png")

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


![image.png](https://dl.playground.lazycat.cloud/guidelines/496/7ebf8ad3-7a06-4caa-b544-3e676c041208.png "image.png")

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

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/0e1dea09-e45d-452b-a105-08abb3ea3443.png "image.png")
但是我并没有看到浏览器的通知。这是因为我的系统级通知被关闭了，

解决方法：
Windows 11/10:

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

macOS:

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

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

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/7428f9f7-befd-4993-aae8-7912ca15a96b.png "image.png")

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

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/54410234-2d05-4270-b5c9-e63c3854ec33.png "image.png")

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

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

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/12ddac2f-cef9-455b-8a79-a13ead802c5a.png "image.png")
有人付费了，立马知道；有人要走了，赶紧挽留。这种实时性对小团队来说太重要了。

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

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

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

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/6fba2e85-203a-48cb-83c0-596fdb77c628.png "image.png")
 

## 最后

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)