前端文档

# 监控平台

# Logan

Logan 是美团点评集团推出的大前端日志系统，包括日志的收集存储，上报分析以及可视化展示。提供了五个组件，包括端上日志收集存储 、iOS SDK、Android SDK、Web SDK，后端日志存储分析 Server，日志分析平台 LoganSite。

Logan (opens new window)

# ARMS

ARMS 前端监控专注于对 Web 场景、Weex 场景和小程序场景的监控，从页面打开速度（测速）、页面稳定性（JS Error）和外部服务调用成功率（API）这三个方面监测 Web 和小程序页面的健康度。

什么是 ARMS 前端监控？ (opens new window)

# CDC

监控方案 (opens new window)

# 日志工具

# sentry

sentry (opens new window) 是一个基于 Django 构建的现代化的实时事件日志监控、记录和聚合平台，主要用于如何快速的发现故障。

# kibana

kibana (opens new window) 是一款免费开源的前端应用程序，其基础是 Elastic Stack，可以为 Elasticsearch 中索引的数据提供搜索和数据可视化功能。

# 异常上报工具

  1. fundebug (opens new window)

  2. Vue.config.errorHandler

const ENV = process.env.PROXY_ENV

const install = Vue => {
  if (ENV !== 'prod') {
    Vue.config.errorHandler = (err, vm, info) => {
      let con = console
      con.error(err, info)
    }
    return
  }

  Vue.config.errorHandler = (err, vm, info) => {
    let con = console
    con.error(err)
    try {
      // 上报信息包括用户id、用户名、路由名、错误栈、当前版本、地址、
      // 运行环境、错误信息、组件名等信息。
      navigation.sendBeacon('/api/log', {
        userId: Math.random().toString().slice(2),
        userName: 'admin',
        menuName: vm.$route.meta?.title || '',
        error: err.stack,
        version: document.lastModified,
        url: decodeURIComponent(location.hash),
        ua: window.navigator.userAgent,
        info,
        component: vm.$vnode.tag
      })
    } catch (e) {
      con.error(e)
    }
  }
}

export default install

navigation.sendBeacon (opens new window)

  • 可用于通过 HTTP 将少量数据异步传输到 Web 服务器
  • navigator.sendBeacon(url, data)
  1. BadJS (opens new window)
  • 收集 window.onerror 的五个参数
  • 除了那五个参数，可以增加自定义参数
  • 发送到后台服务器

← Web安全 →