likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 10

本文由观测云团队编写~

前言

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

TinyPro 是一套使用 Vue 编写的中后台管理后台框架,官网地址:www.opentiny.design/vue-pro/doc…

下面以 TinyPro 为例来接入如何实现 Vue 应用的可观测性。

环境信息

  • Node 版本 > 10

接入方案

准备工作

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

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

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

第二步:下载 TinyPro 管理后台

tiny init

控制台提示如下:

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

成功安装大概样式:

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

项目结构如下:

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

接入观测云 SDK

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

npm 方式接入

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

npm install @cloudcare/browser-rum

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

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

cdn 方式接入

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

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

配置启动参数

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

cdn 方式接入

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

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

npm 方式接入

//初始化sdk
datafluxRum.init({
  applicationId'guance',//应用id
  site'https://rum-openway.guance.com',
  clientToken:"***" // 请在3.1的第一步中创建的内容查看clientToken
  env'production',
  version'1.0.0',
  sessionSampleRate100,
  sessionReplaySampleRate70,
  trackInteractionstrue,
  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 的数据,则说明上报成功。

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

实践效果

用户会话、轨迹

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

页面性能、设备等信息

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

录制回放效果

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

概览信息

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

性能看板

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

资源分析

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

关于 OpenTiny

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

OpenTiny 是一套企业级 Web 前端开发解决方案,提供跨端、跨框架、跨版本的 TinyVue 组件库,包含基于 Angular+TypeScript 的 TinyNG 组件库,拥有灵活扩展的低代码引擎 TinyEngine,具备主题配置系统TinyTheme / 中后台模板 TinyPro/ TinyCLI 命令行等丰富的效率提升工具,可帮助开发者高效开发 Web 应用。


欢迎加入 OpenTiny 开源社区。添加微信小助手:opentiny-official 一起参与交流前端技术~

OpenTiny 官网:opentiny.design/ OpenTiny 代码仓库:github.com/opentiny/ TinyVue 源码:github.com/opentiny/ti… TinyEngine 源码: github.com/opentiny/ti…

欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~

如果你也想要共建,可以进入代码仓库,找到 good first issue标签,一起参与开源贡献~