Fundebug-實時監控網頁應用的錯誤插件

一.含義

Fundebug的JavaScript插件能夠實時監控網頁應用的錯誤，第一時間給您發送報警，幫助您及時發現BUG，快速解決BUG。

二.特點

• 自動捕獲未處理的錯誤
• 能夠捕獲3種不同的前端錯誤：JavaScript執行錯誤，資源加載錯誤和HTTP請求錯誤
• 出錯場景完全可視化重制，相當于"錄屏"
• 支援通過Source Map還原出錯源代碼
• 記錄出錯前的滑鼠點選、HTTP請求、頁面跳轉、console列印等使用者行為，幫助您複現BUG
• 支援收集try/catch捕獲的錯誤
• 相容所有浏覽器包括IE 6到 IE 11
• 相容所有前端開發架構，例如Vue.js，React，AngularJS，Angular 2，Angular 4，Ionic 1，Ionic 2，Cordova，GitBook等

三.安裝

• 直接引入

  将fundebug.min.js放在head标簽中

<script src="https://js.fundebug.cn/fundebug.2.0.0.min.js" apikey="API-KEY" crossorigin="anonymous" ></script>
//其中，擷取apikey需要免費注冊帳号并且建立項目，注意選擇對應的項目類型
           

• npm安裝（以vue.js為例）

npm install fundebug-revideo --save
           

注：預設已經引入fundebug-javascript與fundebug-vue 如未引入

npm install fundebug-javascript fundebug-vue --save
           

四.使用

在vue.js中

例1：

1. 安裝fundebug-javascript與fundebug-vue

npm install fundebug-javascript fundebug-vue --save
           

1. 配置

import * as fundebug from "fundebug-javascript";
import fundebugVue from "fundebug-vue";
fundebug.init({
    apikey: "API-KEY"
})
fundebugVue(fundebug, Vue);
           

例2：

1. 建立一個fundebug.js檔案

import * as fundebug from "fundebug-javascript";
// 引入錄屏插件
require("fundebug-revideo");
export class InitFundebug {
  constructor(config) {
    let hostname = window.location.hostname;
    this.path = this.fullpath(config.path);
    fundebug.init({
      apikey: config.apikey,
      domain: this.getConfigDomain(hostname),
      releasestage: this.getReleasestage(hostname)
    });
  }
  getConfig() {
    return fundebug;
  }

  fullpath(path) {
    return path.charAt(0) == "/" ? path : `/${path}`;
  }
  /**
 1. 區分環境，區分線上報錯和測試/開發環境報錯
 2. @param {window.location.hostname} hostname
   */
  //
   getReleasestage(hostname) {
    var authUrlcases = {
      localhost: "development", //本地
      "127.0.0.1": "development", //本地
      "dev": "development", // dev
      "test": "test", //uat 測試
      "uat": "test", //uat 測試
      "pre": "test", //預釋出
      "www": "production" // 正式服
    };
    try {
      return authUrlcases[hostname];
    } catch (error) {
      return "production";
    }
  }

  /**
 3. 擷取fundebug錄屏需要的domain配置
 4. @param {window.location.hostname} hostname
   */
  //
  getConfigDomain(hostname) {
    //假如你的通路連結是https://www.baidu.com/static/activity/longpage/one/index.html,
    //domain就是 index.html前面那一串
    var authUrlcases = {
      localhost: "https://xxxxx" + this.path, //本地
      "127.0.0.1": "https://xxxxx" + this.path, //本地
      "dev": "https://dev" + this.path, // dev
      "test": "https://test" + this.path, //uat 測試
      "test-uat": "https://test-uat" + this.path, //uat 測試
      "pre": "https://pre" + this.path, //預釋出
      "zs": "https://zs" + this.path // 正式服
    };
    try {
      return authUrlcases[hostname];
    } catch (error) {
      return "https://xxxxx" + this.path;
    }
  }
}
           

1. 在main.js 執行個體化 fundebug配置

import fundebugVue from "fundebug-vue";
import { InitFundebug } from "./utils/fundebug";
let initFundebug = new InitFundebug({
apikey: "配置fundebug 項目的apikey",
path: "請配置路徑，參考下文"
});
let fundebugConfig = initFundebug.getConfig();
fundebugVue(fundebugConfig, Vue);

//path為路徑，例如應用連結是https://www.baidu.com/static/activity/event/theLanternFesival/index.html
//path 就是域名和 index.html之間間一串 static/activity/event/theLanternFesival
           

官網位址：https://docs.fundebug.com/notifier/javascript/framework/vuejs.html