小工具安裝

BugSpark 小工具是一個輕量級的 JavaScript 片段，可為您的應用程式添加錯誤回報按鈕。

環境變數

以下所有安裝方式都透過環境變數來引用您的專案 API 金鑰。請勿將 API 金鑰直接寫入原始碼中。

在您的 .env（或 .env.local）檔案中加入：

bash

BUGSPARK_PROJECT_KEY=YOUR_API_KEY

您可以在儀表板的 專案設定 中找到您的專案 API 金鑰。

Script 標籤

最簡單的方式。在 </body> 結尾標籤前貼上以下程式碼：

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>

將 YOUR_API_KEY 換成儀表板或 .env 檔案入面嘅專案 API 金鑰。

對於伺服器渲染的頁面，請在建置時或透過範本引擎注入環境變數。

小工具會非同步載入，不會阻擋頁面渲染。

NPM / React

安裝套件：

bash

npm install @bugspark/widget

在應用程式入口點初始化：

typescript

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

對於 React 應用，在 useEffect 中初始化：

tsx

import { useEffect } from "react";
import BugSpark from "@bugspark/widget";

function App() {
  useEffect(() => {
    // Set NEXT_PUBLIC_ENABLE_BUGSPARK=false in .env to disable
    if (process.env.NEXT_PUBLIC_ENABLE_BUGSPARK !== "false") {
      BugSpark.init({
        apiKey: process.env.BUGSPARK_PROJECT_KEY,
        endpoint: "https://api.bugspark.hillmanchan.com/api/v1
",
        position: "bottom-right",
      });
    }
  }, []);

  return <div>{/* your app */}</div>;
}

Vue

vue

<script setup>
import { onMounted } from "vue";
import BugSpark from "@bugspark/widget";

onMounted(() => {
  // Set VITE_ENABLE_BUGSPARK=false in .env to disable
  if (import.meta.env.VITE_ENABLE_BUGSPARK !== "false") {
    BugSpark.init({
      apiKey: import.meta.env.VITE_BUGSPARK_PROJECT_KEY,
      endpoint: "https://api.bugspark.hillmanchan.com/api/v1
",
      position: "bottom-right",
    });
  }
});
</script>

Vue（Vite）的客戶端環境變數需要 VITE_ 前綴。請在 .env 檔案中加入 VITE_BUGSPARK_PROJECT_KEY。

Angular

typescript

import { Component, OnInit } from "@angular/core";
import BugSpark from "@bugspark/widget";
import { environment } from "../environments/environment";

@Component({ selector: "app-root", template: "<router-outlet />" })
export class AppComponent implements OnInit {
  ngOnInit() {
    // Set enableBugspark: false in environment.ts to disable
    if (environment.enableBugspark !== false) {
      BugSpark.init({
        apiKey: environment.bugsparkApiKey,
        endpoint: "https://api.bugspark.hillmanchan.com/api/v1
",
        position: "bottom-right",
      });
    }
  }
}

請將 bugsparkProjectKey 加入 environment.ts 和 environment.prod.ts 檔案中。

驗證安裝

安裝完成後，您應該會在頁面角落看到一個小型錯誤圖示。點擊它開啟報告表單並提交測試報告。檢查儀表板以確認報告已送達。

小工具安裝

BugSpark 小工具是一個輕量級的 JavaScript 片段，可為您的應用程式添加錯誤回報按鈕。

環境變數

以下所有安裝方式都透過環境變數來引用您的專案 API 金鑰。請勿將 API 金鑰直接寫入原始碼中。

在您的 .env（或 .env.local）檔案中加入：

bash

BUGSPARK_PROJECT_KEY=YOUR_API_KEY

您可以在儀表板的 專案設定 中找到您的專案 API 金鑰。

Script 標籤

最簡單的方式。在 </body> 結尾標籤前貼上以下程式碼：

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>

將 YOUR_API_KEY 換成儀表板或 .env 檔案入面嘅專案 API 金鑰。

對於伺服器渲染的頁面，請在建置時或透過範本引擎注入環境變數。

小工具會非同步載入，不會阻擋頁面渲染。

NPM / React

安裝套件：

bash

npm install @bugspark/widget

在應用程式入口點初始化：

typescript

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

對於 React 應用，在 useEffect 中初始化：

tsx

import { useEffect } from "react";
import BugSpark from "@bugspark/widget";

function App() {
  useEffect(() => {
    // Set NEXT_PUBLIC_ENABLE_BUGSPARK=false in .env to disable
    if (process.env.NEXT_PUBLIC_ENABLE_BUGSPARK !== "false") {
      BugSpark.init({
        apiKey: process.env.BUGSPARK_PROJECT_KEY,
        endpoint: "https://api.bugspark.hillmanchan.com/api/v1
",
        position: "bottom-right",
      });
    }
  }, []);

  return <div>{/* your app */}</div>;
}

Vue

vue

<script setup>
import { onMounted } from "vue";
import BugSpark from "@bugspark/widget";

onMounted(() => {
  // Set VITE_ENABLE_BUGSPARK=false in .env to disable
  if (import.meta.env.VITE_ENABLE_BUGSPARK !== "false") {
    BugSpark.init({
      apiKey: import.meta.env.VITE_BUGSPARK_PROJECT_KEY,
      endpoint: "https://api.bugspark.hillmanchan.com/api/v1
",
      position: "bottom-right",
    });
  }
});
</script>

Vue（Vite）的客戶端環境變數需要 VITE_ 前綴。請在 .env 檔案中加入 VITE_BUGSPARK_PROJECT_KEY。

Angular

typescript

import { Component, OnInit } from "@angular/core";
import BugSpark from "@bugspark/widget";
import { environment } from "../environments/environment";

@Component({ selector: "app-root", template: "<router-outlet />" })
export class AppComponent implements OnInit {
  ngOnInit() {
    // Set enableBugspark: false in environment.ts to disable
    if (environment.enableBugspark !== false) {
      BugSpark.init({
        apiKey: environment.bugsparkApiKey,
        endpoint: "https://api.bugspark.hillmanchan.com/api/v1
",
        position: "bottom-right",
      });
    }
  }
}

請將 bugsparkProjectKey 加入 environment.ts 和 environment.prod.ts 檔案中。

驗證安裝

安裝完成後，您應該會在頁面角落看到一個小型錯誤圖示。點擊它開啟報告表單並提交測試報告。檢查儀表板以確認報告已送達。