搞定前端Bug监控
支持邮件告警、多项目日志隔离

VeryBugs:搞定前端Bug监控

本项目尚处于开发阶段,请勿用于生产/正式环境。因为开发时是按全日志上报来开发的,没有加上报概率逻辑,而且为了方便也没有做日志的读写分离。

一、网站介绍

八哥,是bug的谐音。

追逐八哥是一个简便易用的bug监控平台,支持邮件告警多项目日志隔离等特性。

二、如何体验

点击右上角的“立即开始”按钮进入登录界面,然后在登录界面的左下角有个“填充测试账号”的按钮,点击后会自动填充测试账号和密码,然后点击登录就可以看到数据了。

当然你也可以自己注册账号后生成专属的项目ID,然后按本页的说明引用我们的SDK进行配置。

三、作品界面截图

 

四、使用方法

该系统的使用非常方便,只需到后台领取一个独有的项目id,然后按下面的HTML标签配置法或者脚本配置法进行操作即可。建议用脚本配置法,这种方式会更加灵活。

4.1、HTML标签配置法

按下面这样在你的项目的head标签中通过script标签引用我们的SDK(地址:https://www.verybugs.com/library/bug.min.js)即可,就像下面这样。

<!DOCTYPE html>
<html>
<head>
    <!-- 在页面head标签中引入js文件并进行初始化,这样会自动监听脚本报错 -->
    <script
            id="verybugs"
            crossorigin="anonymous"
            data-project-id="这里填上你自己申请到的项目id"
            data-debug="1"
            data-error-log="1"
            src="https://www.verybugs.com/library/bug.min.js"></script>
</head>
<body>
    <!-- ...其他代码 -->
</body>
</html>

各个配置项说明下:

  • id:值固定为”verybugs”,方便脚本通过该id找到其他配置项。如果配置的值不对,会忽略其他配置在html标签上的配置项。
  • crossorigin:值固定为”anonymous”。配置该项是为了让上报请求(post请求)能正常跨域, 且能识别跨域脚本的报错信息(浏览器默认情况下是不报跨域脚本具体错误信息的)。
  • data-project-id: 你在后台申请到的项目id。
  • data-debug:值为”0″或”1″,若为”1″,会监听脚本报错,即会上报error、unhandledrejection等事件捕获到的脚本错误。
  • data-error-log:值为”0″或”1″,若为”1″,会将console.error打印的内容进行上报(你可以通过 这种方式来调试移动端项目)。
  • src:值为”https://www.verybugs.com/library/bug.min.js”,即本站提供的js脚本。

4.2、脚本配置法

你也可以像下面这样,通过JS代码来进行初始化配置(见$bug.init)。注意,这种情况下不需要配置id=”verybugs”。

<!DOCTYPE html>
<html>
<head>
    <script crossorigin="anonymous" src="https://www.verybugs.com/library/bug.min.js"></script>
    <script>
        try {
            $bug.init({
                projectId: '这里填上你自己申请到的项目id',
                debug: true,
                errorLog: true,
            });
        } catch (err) {
            console && console.log  && console.log(err);
        }
    </script>
</head>
<body>
    <!-- ...其他代码 -->
</body>
</html>

除了脚本错误,如果还需要上报接口错误的话,可以通过下面的方式主动对接口异常进行上报。下面以axios为例进行展示(见$bug.reportAjax)。

<!DOCTYPE html>
<html>
<head>
    <script crossorigin="anonymous" src="https://www.verybugs.com/library/bug.min.js"></script>
    <!-- ...其他代码 -->
</head>
<body>
    <!-- ...其他代码 -->
    <script>
        /**
         * 上报接口异常
         **/
        Axios.interceptors.response.use((response) => response, (error) => {
            $bug.reportAjax(error);
            return Promise.reject(error);
        });
    </script>
</body>
</body>
</html>