• 前端监控日志产品


    前言

    流量分析的监控有:百度统计谷歌分析、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字体的文本。这是用户第一次开始使用页面内容。

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

  • 相关阅读:
    k8s-kubeapps部署 20
    自旋锁和读写锁
    苹果智能戒指再曝光,或将配合头显来应用,支持无线充电
    RL — 强化学习算法概述
    【车辆分类】基于matlab的视频中车辆跟踪监测分类算法仿真,包括背景差分与帧间差分以及形态学处理
    Vue中的事件总线(EventBus)是什么?它有什么优点和缺点?
    21天学习挑战:经典算法---冒泡排序
    西华师范大学 数学考研真题及解析(全收录) 考研 数学分析 708 高代代数 810 真题
    【pen200-lab】10.11.1.231
    Qt编译数据库插件通用步骤说明
  • 原文地址:https://blog.csdn.net/haonan_z/article/details/133387321