• 前端监控日志产品


    前言

    流量分析的监控有:百度统计谷歌分析、GrowingIo、友盟

    错误统计的监控有:sentryfundebug、frontJs、岳鹰

    前端监控产品:OneApm、听云

    开源的:logan web、Matomo

    PS:加粗的是博主用过的,sentry还可以和Hubspot搭配使用

    前端监控体系包含哪些方面

    我们可以从两方向思考这个问题:

    • 监控什么
    • 如何监控

    监控什么是指我们要监控的应用是什么样的应用。比如:web应用、小程序(微信公众平台有自己的日志系统,但不够强大)、客户端应用,或者node应用。

    监控什么从另个层次上还可以理解为具体监控应用的哪些信息,对于应用程序来讲,我们通常需要监控代码的一下信息:

    • 代码运行错误
    • 应用界面的加载性能
    • 某个时刻的内存消耗
    • 用户的操作行为
    • 应用的访问量 PV \ UV

    前端监控体系

    JS中常见的错误:

    • uncaught error :这种错误通常情况下发生在我们的开发过程中,理论上不需要我们进行上报。
    • runtime error:运行时错误,这种错误会触发window.onerror事件,我们可以通过监听onerror事件,获取相关的信息进行上报。
    • 资源错误:例如图片简直失败,js文件加载失败等,它也会触发onerror事件
    • unhandledregection:这种错误由promise触发,我们可以监听onunhandledrejection方法获取相关信息进行上报。
    • 当然可能还有框架的错误,例如 vue 的 Vue.config.errorHandler,可看我之前 vue项目如何捕获错误进行上报

    监听接口:

    比如,

    • 请求发起的时间、响应时间、请求耗时情况;
    • 请求参数和响应参数,包括请求头、方式等;
    • 触发请求的信息,如网址路由,DOM节点信息;

    其他:

    行为监听:用户触发了哪些事件,如点击的按钮,访问的页面,停留的时长;
    性能上报,如:

    • First paint 页面导航与浏览器将该网页的第一个像素渲染到屏幕上所用的间时,渲染是任何与输入网页导航前的屏幕上的内容不同的内容。
    • First meaningful paint 页面完成布局后,加载了web 字体。
    • First contentFul paint (FCP)是浏览器从DOM中呈现第一位内容,向用户提供页面实际加载的第一个反馈。First Contentful Paint时间戳是浏览器首次渲染任何文本、图像(包括背景图像)、视频、已绘制到的画布或非空SVG的时间。这排除了iframes的任何内容,但包括带有挂起的Web字体的文本。这是用户第一次开始使用页面内容。

    还要了解一些统计学相关的知识。

  • 相关阅读:
    Markdown 数学公式详解
    xilinx hls实现sobel检测
    全网独家:编译CentOS6.10系统的openssl-1.1.1多版本并存的rpm安装包
    第六章:Java数组相关
    石油石化物资采购杂志社石油石化物资采购编辑部2023年第18期部分目录
    【算法挨揍日记】day06——1004. 最大连续1的个数 III、1658. 将 x 减到 0 的最小操作数
    电子产品量产工具-软件架构-显示系统
    【JS基础知识07】函数
    Oracle连接和使用
    flutter---->阿里云oss的插件
  • 原文地址:https://blog.csdn.net/haonan_z/article/details/133387321