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

前言

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

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

环境信息

  • Node 版本 > 10

接入方案

准备工作

  • 注册观测云账号( Guance )
  • 安装了 vue( 快速上手 | Vue.js )、TinyCli( https://www.opentiny.design/tiny-cli/docs/start )
第一步:在观测云创建应用

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

第二步:下载 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',//应用idsite: 'https://rum-openway.guance.com',clientToken:"***" // 请在3.1的第一步中创建的内容查看clientTokenenv: '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 的数据,则说明上报成功。

实践效果

用户会话、轨迹

页面性能、设备等信息

录制回放效果

概览信息

性能看板

资源分析

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/747134.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c/c++字符串处理标准库 string 介绍

c语言中string.h介绍 C语言的标准库中包含了一个头文件 <string.h>&#xff0c;该头文件提供了一系列字符串处理函数的声明和定义。以下是一些常用的函数&#xff1a; 字符串复制&#xff1a;strcpy(dest, src)。将源字符串 src 复制到目标字符串 dest&#xff0c;包括…

提升用户体验,Xinstall智能判定拉起技术来袭

在移动互联网时代&#xff0c;App推广已经成为各大企业的必争之地。然而&#xff0c;随着市场竞争的加剧&#xff0c;如何提升App的转化效率和用户体验成为了推广者们亟待解决的问题。这时&#xff0c;Xinstall的智能判定拉起技术应运而生&#xff0c;为推广者们带来了新的解决…

安卓百度地图API显示隐藏Marker

方法 BaiduMap.Marker.setVisible(boolean) 实现 List<Marker> list_marker new ArrayList<>(); boolean isShowMarker true;Override public boolean onCreateOptionsMenu(Menu menu) {String[] sm { "显隐信息", "显隐照片", "截…

一文彻底搞懂HTTP版本区别

文章目录 1. HTTP/1.0与HTTP/1.1区别1. 持久连接&#xff08;Persistent Connections&#xff09;2. 请求/响应的流水线化&#xff08;Pipeline&#xff09;3. 主机头字段&#xff08;Host Header Field&#xff09;4. 缓存控制5. 错误处理 2. HTTP/1.1与HTTP/2.0区别1. 多路复…

【leetcode】点名

最近考研正好复习到数据结构&#xff0c;趁着这个机会再刷点题&#xff0c;写了没时间更上来&#xff0c;看有特别思路的更一下 某班级 n 位同学的学号为 0 ~ n-1。点名结果记录于升序数组 records。假定仅有一位同学缺席&#xff0c;请返回他的学号。 示例 1: 输入: records…

开发小程序多少钱?大数据揭秘,小白必看的成本清单!

在数字化时代的浪潮中&#xff0c;小程序已经成为连接用户与服务的重要桥梁。它们无需下载、安装&#xff0c;即可实现快速访问和使用&#xff0c;为用户提供了便捷的体验。然而&#xff0c;不少企业和个体经营者在面对开发小程序时&#xff0c;往往会对成本问题抱有疑问&#…

SpringBoot内置tomcat支持JSP

SpringBoot默认是不支持JSP解析,需要使用tomcat内置的JSP解析功能,需要引入的相关jar包如下: <!---引入嵌入式tomcat用于支持网页解析---> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web<…

OJ_最大序列和

题干 C实现 #include <stdio.h> #include <algorithm> using namespace std;long long s[1000001]; long long dp[1000002];//dp[i]是前i个元素中必须包含右边缘的最大子序和int main() {int n;scanf("%d",&n);for(int i 0; i< n;i){scanf(&quo…

【Vue3】Vue3中路由规则的 props 配置

&#x1f497;&#x1f497;&#x1f497;欢迎来到我的博客&#xff0c;你将找到有关如何使用技术解决问题的文章&#xff0c;也会找到某个技术的学习路线。无论你是何种职业&#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章&#xff0c;也欢…

云计算 3月14号 (TCP三次握手和四次挥手)

1.TCP三次握手和四次挥手 1.TCP的传输过程&#xff1a; Seq 序列号 保障传输过程可靠。 ACK &#xff08;确认消息&#xff09; SYN &#xff08;在建立TCP连接的时候使用&#xff09; FIN &#xff08;在关闭TCP连接的时候使用&#xff09; 3.TCP建立连接的过程&…

让Python自动测试更得心应手——认识一下神奇的pytest测试框架

前言 Python在测试圈的应用非常广泛&#xff0c;特别是在自动化测试以及测试开发的领域&#xff0c;其中在自动化测试中我们常用的测试框架是uniitest和pytest&#xff0c;本文将带领大家搭建以及熟悉pytest的使用。 既然有unittest那么为什么还要用pytest呢&#xff1f; 这…

单目测距+姿态识别+yolov8界面+车辆行人跟踪计数

yolov5单目测距速度测量目标跟踪&#xff08;算法介绍和代码&#xff09; 1.单目测距实现方法 在目标检测的基础上&#xff0c;我们可以通过计算物体在图像中的像素大小来估计其距离。具体方法是&#xff0c;首先确定某个物体的实际尺寸&#xff0c;然后根据该物体在图像中的像…

Vue3--数据和方法

data 组件的 data 选项是一个函数。Vue 在创建新组件实例的过程中会自动调用此函数。   data选项通常返回一个对象&#xff0c;然后 Vue 会通过响应性系统将其包裹起来&#xff0c;并以 $data 的形式存储在组件实例中。 <!DOCTYPE html> <html lang"en"&g…

8分SCI | 揭示随机森林的解释奥秘:探讨LIME技术如何提高模型的可解释性与可信度!

一、引言 Local Interpretable Model-agnostic Explanations (LIME) 技术作为一种局部可解释性方法&#xff0c;能够解释机器学习模型的预测结果&#xff0c;并提供针对单个样本的解释。通过生成局部线性模型来近似原始模型的预测&#xff0c;LIME技术可以帮助用户理解模型在特…

react批量引入svg图标

PS&#xff1a;也不只在react中用&#xff0c;其他框架也可&#xff0c;生态圈不一样配置会不同&#xff0c;但是能提供整体的思路&#xff0c;可以参考。 在批量引入之前&#xff0c;我们需要安装一个包并配置到typescript.json文件中。 1. 安装&#xff1a;yarn add -D type…

私域流量转化干货,揭秘四大关键因素!

在这个得私域者得天下的互联网时代&#xff0c;如何有效地实现私域流量的转化成为了很多企业或是个人的必修课。 接下来&#xff0c;就给大家分享私域转化的四大关键因素&#xff0c;帮助大家更好地实现私域流量的转化。 1、兴趣了解 在私域流量转化的过程中&#xff0c;我们…

js中的原型(原型对象,对象原型,原型继承,原型链)

js中的原型 一.原型二.constructor 属性三.对象原型四.原型继承五.原型链 一.原型 构造函数通过原型分配的函数是所有实例化对象所共享的。 JavaScript 规定&#xff0c;每一个构造函数都有一个 prototype 属性&#xff0c;指向另一个对象&#xff0c;所以我们也称为原型对象 …

C#中求余算法的用法及区别:Math.DivRem()方法 vs 运算符%

目录 1.Math.DivRem() 2.运算符% 3.区别 Math.DivRem()和运算符%都是用于求余运算&#xff0c;但它们在使用和功能上有一些区别&#xff1a; 1.Math.DivRem() Math.DivRem()是.NET框架中的一个静态方法&#xff0c;它将除法和求余运算的结果同时返回。它有两个版本&#xf…

Linux编译器gcc/g++的功能与使用

一、程序的生成 首先&#xff0c;我们知道程序的编译分为四步&#xff1a; 1、预处理 2、编译 3、汇编 4、链接 1.1预处理 预处理功能主要包括头文件展开、宏定义、文件包含、条件编译、去注释等。 所谓的头文件展开就是在预处理时候&#xff0c;将头文件内容拷贝至源文…

Android平台架构和Android Framework的区别

Android平台架构是指Android操作系统的整体架构&#xff0c;主要由四个层级组成&#xff1a;应用层、应用框架层、系统运行库层和Linux内核层。 应用层&#xff1a;包括用户界面、应用程序和系统应用等。用户界面层负责呈现图形化界面&#xff0c;应用程序层包括各种应用程序&a…