Vue.js 应用实现监控可观测性最佳实践

前言

Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。

TinyPro 是一套使用 Vue 编写的中后台管理后台框架,官网地址:https://www.opentiny.design/vue-pro/docs/start ,下面以 TinyPro 为例来接入如何实现 Vue 应用的可观测性。

环境信息

  • Node 版本 > 10

接入方案

准备工作

第一步:在观测云创建应用

这里面的就是配置代码,后面会用到。

第二步:下载 tinyPro 管理后台
tiny init

控制台提示如下:

成功安装大概样式:

项目结构如下:

接入观测云 SDK

接入观测云 SDK 有两种方式:npm 或者 cdn,选择其中一种即可。

npm 方式接入

在项目根目录执行以下脚本安装 sdk 。

npm install @cloudcare/browser-rum

安装脚本后,找到入口文件,并粘贴如下代码,注意修改。

//引入观测云rum的sdk
import { datafluxRum } from '@cloudcare/browser-rum'
cdn 方式接入

在当前目录下找到 index.hml 并把观测云接入代码拷贝到 head 标签内,如下图所示。

配置启动参数

通过配置的参数能设置应用名称、版本、环境、采样率等。

cdn 方式接入

cdn 方式接入有同步或异步,如果选择同步方式,可以按照如下接入。

npm 方式接入
//初始化sdk
datafluxRum.init({
  applicationId: 'guance',//应用id
  site: 'https://rum-openway.guance.com',
  clientToken:"***" // 请在3.1的第一步中创建的内容查看clientToken
  env: 'production',
  version: '1.0.0',
  sessionSampleRate: 100,
  sessionReplaySampleRate: 70,
  trackInteractions: true,
  traceType: 'ddtrace', // 非必填,默认为ddtrace,目前支持 ddtrace、zipkin、skywalking_v3、jaeger、zipkin_single_header、w3c_traceparent 6种类型
  allowedTracingOrigins: ['https://api.example.com', /https:\/\/.*\.my-api-domain\.com/],  // 非必填,允许注入trace采集器所需header头部的所有请求列表。可以是请求的origin,也可以是正则
})

启动项目

我们启动项目,命令如下:

tiny start

检查是否有数据上报,如果在 network 看到有 rum 的数据,则说明上报成功。

实践效果

用户会话、轨迹

页面性能、设备等信息

录制回放效果

概览信息

性能看板

资源分析

相关推荐
小远yyds16 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
程序媛小果35 分钟前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot
小光学长39 分钟前
基于vue框架的的流浪宠物救助系统25128(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
数据库·vue.js·宠物
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4113 小时前
无网络安装ionic和运行
前端·npm
理想不理想v3 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试