已集成懒猫 OIDC 登录。 Crikket 是一个开源 Bug 反馈工具，用来把「用户遇到的问题」快速整理成开发者能直接排查的报告。它支持截图、录屏、页面地址、设备信息、复现上下文和报告管理，适合给自己的网站、Web 应用或内部系统添加反馈入口。 ## 首次使用 1. 在懒猫微服中打开 Crikket。 2. 进入登录页后，点击 `Continue with Lazycat`。 3. 按懒猫授权页面提示完成登录。 4. 登录后进入 Crikket 后台，左侧菜单可以看到： - `Bug Reports`：查看和管理 Bug 报告。 - `User`：个人资料和密码设置。 - `Organization`：工作区、成员和邀请。 - `Public Keys`：管理嵌入反馈组件所需的公开 Key。 - `Billing`：原项目保留的计费入口；懒猫自托管版本默认关闭支付能力。 ## 创建反馈组件 Key 如果你想把 Crikket 嵌入到自己的网站里，需要先创建 Public Key。 1. 打开 `Settings` -> `Public Keys`。 2. 点击 `Create key`。 3. 填写 `Site label`，例如： - `blog-prod` - `app-prod` - `internal-admin` 4. 在 `Allowed origins` 中填写允许使用这个 Key 的网站来源，每行一个，只填写协议、域名和端口，不要带路径。 示例： ```text https://example.com https://www.example.com http://localhost:3000 ``` 注意： - `https://example.com` 和 `https://www.example.com` 是两个不同来源，需要分别填写。 - `http://localhost:3000` 只建议用于本地调试。 - 不要填写自己不控制的域名。 ## 嵌入到网站 创建 Public Key 后，在 Key 右侧操作菜单中点击 `Copy embed snippet`，复制嵌入代码。 典型代码如下： ```ts import { init } from "@crikket-io/capture" init({ key: "crk_your_public_key", host: "https://crikket.your-box.heiyu.space", }) ``` 其中： - `key` 是 Crikket 后台创建的 Public Key。 - `host` 是你的 Crikket 应用访问地址，例如 `https://crikket.lanmao168.heiyu.space`。 如果你使用 Next.js，可以把初始化逻辑放在客户端入口文件中，例如 `instrumentation-client.ts`： ```ts import { init } from "@crikket-io/capture" const publicKey = process.env.NEXT_PUBLIC_CRIKKET_KEY if (publicKey) { init({ key: publicKey, host: process.env.NEXT_PUBLIC_CRIKKET_HOST, }) } ``` 推荐环境变量： ```bash NEXT_PUBLIC_CRIKKET_KEY=crk_your_public_key NEXT_PUBLIC_CRIKKET_HOST=https://crikket.your-box.heiyu.space ``` 嵌入后，用户在你的网站中打开反馈组件，就可以提交截图或录屏 Bug 报告。