快速開始
三個步驟讓 BugSpark 在您的專案中運行。
1. 建立專案
在 BugSpark 儀表板 註冊並建立您的第一個專案。 您需要：
- 專案名稱（例如「我的網頁應用」）
- 應用程式運行的網域（例如
myapp.com）
建立後，您會收到一個格式為 bsk_pub_... 的 API 金鑰。請妥善保管此金鑰。
2. 安裝小工具
將 BugSpark 小工具加入您的前端。選擇適合您技術架構的方式：
Script 標籤（最簡單）
html
<script
src="https://cdn.jsdelivr.net/npm/@bugspark/widget@latest/dist/bugspark.iife.js"
data-api-key="YOUR_API_KEY"
data-endpoint="https://api.bugspark.hillmanchan.com/api/v1
"
data-position="bottom-right"
async
></script>NPM 套件
bash
npm install @bugspark/widgettypescript
import BugSpark from "@bugspark/widget";
// Set ENABLE_BUGSPARK=false in .env to disable the widget
if (process.env.ENABLE_BUGSPARK !== "false") {
BugSpark.init({
apiKey: process.env.BUGSPARK_PROJECT_KEY,
endpoint: "https://api.bugspark.hillmanchan.com/api/v1
",
position: "bottom-right",
});
}3. 開始接收報告
小工具安裝完成後，您的使用者可以點擊錯誤按鈕來提交報告。 每份報告會自動包含：
- 螢幕截圖 及可選的標註
- 主控台日誌（錯誤、警告、資訊）
- 網路請求（失敗的呼叫、緩慢的回應）
- 裝置資訊（瀏覽器、作業系統、視窗大小）
- 使用者操作時間軸（點擊、導覽、表單提交）
在 儀表板 中查看所有報告。報告按專案整理，可依嚴重程度、狀態和日期範圍進行篩選。
另一種方式：使用 CLI
喜歡用終端機？安裝 BugSpark CLI，從命令列管理一切：
bash
npm install -g @bugspark/cli
bugspark login
bugspark initinit 命令會引導你選擇專案，並輸出可以直接貼上的 Widget 程式碼。查看 CLI 安裝 了解完整指南。