Vue.js 应用实现监控可观测性最佳实践
前言
Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。
TinyPro 是一套使用 Vue 编写的中后台管理后台框架,官网地址:https://www.opentiny.design/vue-pro/docs/start ,下面以 TinyPro 为例来接入如何实现 Vue 应用的可观测性。
环境信息
Node 版本 > 10
接入方案
准备工作
注册观测云账号( https://auth.guance.com/businessRegister )
安装了 vue( https://cn.vuejs.org/guide/quick-start.html )、TinyCli( https://www.opentiny.design/tiny-cli/docs/start )
第一步:在观测云创建应用
这里面的就是配置代码,后面会用到。
第二步:下载 tinyPro 管理后台
复制代码
控制台提示如下:
成功安装大概样式:
项目结构如下:
接入观测云 SDK
接入观测云 SDK 有两种方式:npm 或者 cdn,选择其中一种即可。
npm 方式接入
在项目根目录执行以下脚本安装 sdk 。
复制代码
安装脚本后,找到入口文件,并粘贴如下代码,注意修改。
复制代码
cdn 方式接入
在当前目录下找到 index.hml 并把观测云接入代码拷贝到 head 标签内,如下图所示。
配置启动参数
通过配置的参数能设置应用名称、版本、环境、采样率等。
cdn 方式接入
cdn 方式接入有同步或异步,如果选择同步方式,可以按照如下接入。
npm 方式接入
复制代码
启动项目
我们启动项目,命令如下:
复制代码
检查是否有数据上报,如果在 network 看到有 rum 的数据,则说明上报成功。
评论