前端异常监控--fundebug....... 一个看似没有问题的前端网站，通过自测，测试，验收等环节，最后成功上线的给

fundebug

支持多类型项目

js
vue
node
小程序
.......

安装方便-使用简单，对原本项目的代码侵入性，串改console方法，其他还需长期观察

使用请看官方文档

能捕捉到范围

能捕捉到范围，分为5类，主要就前面三种

JavaScript执行错误 ReferenceError
资源加载错误 resourceError
HTTP请求错误 httpError
unhandledrejection 未使用 catch 处理的 Promise 错误
WebSockect连接错误

支持sourcemap快速定位错误代码位置

上传报错代码机制

当捕获到上述错误，一个错误会发一次请求到fundebug服务器，在控制台会及时更新错误日志，支持丁丁和邮箱报警配置。

错误回放-按需使用

可以区分多套环境配置，但条数有限，建议看具体业务线情况分环境执行

报警规则

时间间隔：实时/15分钟/30分钟/1小时/2小时/.../6小时
规则：等比数列/有限数列 - 可添加多条 - 满足任意或全部条件不能做到精确报错类型

报警方式

邮件
DingDing - 机器人

钉钉机器人给了我们关键词认证（最多添加10个关键字），即，只有出现关键词才允许在群聊中发出
所以，我们可以提炼10大重要信息作为报错类型的限制，配合报警时间间隔与数列规则，做到一定情况的报警

三方社交软件（洽洽，企业邮箱...）

优缺点

优点

开箱即用
毕竟我们现在没有（对目前偶现，非直观异常，app嵌套h5等情况能更好的定位并解决问题）

缺点

收钱
异常数据在第三方数据库（包括录屏回放，用户信息等，这是重伤）
一个错误就需要占用一次http请求
定制化自定义难，不能进行二次开发，功能局限

需测试

轮询报错并发测试

结果

可以使用

试用报告

一个看似没有问题的前端网站，通过自测，测试，验收等环节，最后成功上线的给广大用户使用，没想到却有如此多种多样的问题报错，在正常环境与非正常环境，我们如何去规避，最优的解决问题。fundebug的试用。

体验

即时的问题收集，与个性化的实时报警，让我们能更早发现问题，定位问题，解决问题。

代码语法错误错误级别：1级

作为语法错误，本身就是高风险，不允许存在。

语法兼容性问题错误级别：2级

前端面对用户情况复杂，兼容性问题往往不好定位

三方语法错误错误级别：2级

对业务功能，项目整体是否存在风险。
是否阻塞流程，总结如何规避

接口/资源超时错误级别：3级

主要依赖文件-是否可以存放本地
对于异常量较大的超时问题：抛出--（是自身网络环境还是服务器压力，优化处理关键节点）

具体领域，具体分析 - 一同细化总结共性与个性问题，输出分享解决方案

关键节点 例如：

登录注册
充值/结算等支付流
如游戏：从登录开始，到最后进入游戏整个流程，是绝对不允许阻塞等

界面

问题展示界面清晰，简洁。

报警

通过自定义配置，使用钉钉来通知相关项目出现的问题

针对目前情况，报警方案

分组：按人员所负责项目分小组；所有项目统计分大组：集体群聊
报警条件：一、设置有序/等比数列二、时间间隔三、钉钉：关键字规则
报警机制，时间：可控；小组报警时间间隔：1小时；集体群聊时间间隔：6小时

收费

主要对数据针对数据条数，我们可以自定义对无用报错过滤，不同环境的区分，来限制条数。

问题

一、重视：问题为何会出现，想想自己写的代码会报错，体验不友好等诸多问题。或许这些异常问题并不会影响流程，只有少数用户偶现。等侥幸心理不应出现。问题不可怕，怕就怕你不去解决它。解决问题是理解代码原理的方式之一二、时机：隐藏的问题，尽早发现尽早解决。不是到用户反馈，才去解决问题

结果

目前情况与局势，根据业务线痛点，可以按需接入监控系统。

使用说明书

一、安装

yarn add fundebug-javascript fundebug-vue --save
yarn add fundebug-revideo --save

二、配置 (放在util/fundebug.js中，最后引入main.js)

import Vue from 'vue'
import hostConfig from '../api/config'
import * as fundebug from 'fundebug-javascript'
import fundebugVue from 'fundebug-vue'

// fundebug 初始化配置
function fundebugInit (env) {
    fundebug.init({
        apikey: 'xx',
        releasestage: env,
        filters: [
            {
                name: /uncaught error/,
                message: /ResizeObserver loop limit exceeded/
            },
            {
                name: /unhandledrejection/,
                message: /{"code":"201","data":"","message":"登录已失效,请重新登录"}/
            },
            {
                name: /uncaught error/,
                message: /Script error./
            },
            {
                name: /^unhandledrejection$/
            }
        ]
    })
    fundebugVue(fundebug, Vue)
    // 回放功能
    require('fundebug-revideo')
}
// 只运行在预发和线上
if (hostConfig.fundebug) {
    if (hostConfig.doamin === 'sdk-h5-pre.y8511.cn') {
        fundebugInit('pre')
    } else {
        fundebugInit('production')
    }
}

四、报警（）规则：10的等比数列时间间隔：1/2小时钉钉-关键字：错误

前端异常监控--fundebug