商城小程序项目实现监控的可观测性最佳实践

前言

微信小程序是一种轻量级的应用程序,用户可以在微信内直接使用,无需下载安装。它具有独立的开发框架和生态系统,支持丰富的功能和交互,包括社交、购物、服务等。

观测云对微信小程序的监控能够实时收集性能指标、错误日志和资源请求数据,利用可视化分析提升小程序的用户体验,优化性能,快速定位问题,提高开发效率。

今天以一个商城项目为例子,github地址:GitHub - lin-xin/wxapp-mall: 微信小程序 商城demo ,以下以该项目为例来接入如何实现微信小程序商城项目的可观测性。

环境信息

  • Node 版本 > 8

接入方案

准备工作

  • 注册观测云账号( Guance )
  • 注册微信小程序账号( 微信小程序 )、安装了微信开发者工具( 微信开放平台 )、下载了商城项目( GitHub - lin-xin/wxapp-mall: 微信小程序 商城demo )
  • 需配置域名白名单,域名配置文档( 网络 | 微信开放文档 )
第一步:在观测云创建应用

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

第二步:下载商城项目
git clone https://github.com/lin-xin/wxapp-mall.git

项目结构如下:

接入观测云 SDK

接入观测云 SDK 有多种方式:npm、cdn 和 uniapp ,选择其中一种即可,本文推荐使用 cdn 的方式引入。

npm 方式接入

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

npm install @cloudcare/rum-miniapp

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

//引入观测云rum的sdk
const { datafluxRum } = require('@cloudcare/rum-miniapp')
cdn 方式接入

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

配置启动参数

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

cdn 方式接入

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

npm 方式接入

// 初始化 Rum
datafluxRum.init({
  site: 'https://rum-openway.guance.com',
  clientToken: '**',
  applicationId: 'wechat_shopcenter', // 必填,dataflux 平台生成的应用ID
  env: 'testing', // 选填,小程序的环境
  version: '1.0.0', // 选填,小程序版本
  service: 'miniapp', //当前应用的服务名称
  trackInteractions: true,
  traceType: 'ddtrace', // 非必填,默认为ddtrace,目前支持 ddtrace、zipkin、skywalking_v3、jaeger、zipkin_single_header、w3c_traceparent 6种类型,
  sampleRate: 100, //指标数据收集的百分比,100 表示全收集,0 表示不收集
  allowedTracingOrigins: ['https://api.example.com',/https:\/\/.*\.my-api-domain\.com/],  // 非必填,允许注入trace采集器所需header头部的所有请求列表。可以是请求的origin,也可以是是正则
})

启动项目

打开微信开发者项目,编译,项目运行情况如下:

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

特别注意

如果出现上报失败的情况,需要配置域名白名单,见下图,更详细内容可以参见:域名配置文档( 网络 | 微信开放文档 )。

实践效果

  • 用户会话、轨迹

  • 页面性能、设备、错误等信息

  • 概览信息

  • 性能分析

  • 错误分析

总结

观测云对微信小程序的监控能够实时收集性能指标、错误日志和资源请求数据,利用可视化分析提升小程序的用户体验,优化性能,快速定位问题,提高开发效率。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

su怎么做展厅模型---模大狮模型网

要在SketchUp中创建展厅模型,你可以按照以下基本步骤进行: 绘制基本结构: 使用SketchUp的绘图工具(线条、矩形、圆形等)来创建展厅的基本结构,包括墙壁、地板和天花板等。确保按照实际尺寸和比例进行绘制。 添加家具和展品&…

Mysql新建数据库报错1044

mysql创建数据库报错 1044 - Access denied for user ‘root‘%‘ to database ‘XXX‘ 解决参考:MySQL新建表:1044 - Access denied for user ‘root‘%‘ to database ‘XXX‘终极解决方案_cannot create table [sheet]: 1044 - access denied -CSDN博…

windows允许指定IP段访问本地端口

虚拟机内部应用有时候需要访问windows的一些端口,例如数据库或Redis等,默认情况下,需关闭windows上的防火墙才可正常访问。本文通过在防火墙设置允许指定IP段进行访问来处理,不用每次操作都关闭防火墙。 入站规则-》新建规则 完成…

【Python】输出一个 Python 项目下需要哪些第三方包

方法一 pycharm 方法二 要分析一个 Python 项目下需要哪些第三方包并生成 requirements.txt 文件,你可以使用 pipreqs 工具。以下是具体的步骤: 首先,确保你已经安装了 pipreqs 工具。如果未安装,可以使用以下命令进行安装&a…

ArcGIS二次开发(一)——搭建开发环境以及第一个简单的ArcGIS Engine 程序

Arcgis10.2、Arcgis Engine10.2与Microsoft Visual Studio 2012的版本进行安装 1、推荐教程与安装包2、安装顺序3、安装成功测试VS新建项目可以创建ArcGIS项目,并且在VS中拖拽ArcGIS工具 4、搭建第一个简单的ArcGIS Engine 程序 ArcEngine和VS版本是有对应的&#x…

【已解决】Vue 3+TS项目,无法找到模块“XXX”的声明文件,项目报错无法找到声明文件

前言 最近在做vue 3 TS项目,创建项目时需要引入vue-router 4,在main根文件中引入路由时出现了无法找到引入文件的报错。 解决 最后发现是创建router文件中的index文件时错误的创建为了.js文件,但是在创建框架时默认使用的是TS。将文件类型…

Nginx log文件写入失败?log文件权限设置问题

首先,请确保在Nginx配置文件nginx.conf里允许日志写入,就是如下面这句(样例),把句前的#号去掉: access_log /home/wwwlogs/access.log;或者 access_log /home/wwwlogs/www.mysite.com/access.log;下面是log文件夹及文件权限设置。 1、wwwlogs文件夹权限设置 wwwlogs文…

【嵌入式——QT】多语言界面

【嵌入式——QT】多语言界面 多语言页面开发步骤tr()函数 多语言页面开发步骤 第一步 在你编写的代码中添加tr()函数,方便之后可以精准的定位到你所需要翻译的部分。 第二步 在.pro文件中添加以下代码,这样会让你生成相应的.ts文件,ts文件是…

一身素衣凭栏观景,携几缕清风伴皓月入梦

这个国风两件套真的很难不爱一套上身简直就是梦中的白月光素净优雅又不失清冷气质波浪型门襟绣加上花枝缠绕的绣花图案增添了设计感的同时又不失美感半裙做的是A摆小伞裙的版型裙摆的分割和收褶处理增加了层次感半裙里布很贴心的做了裤里,不易走光夏天穿上这套出街一…

宜搭低代码高级认证实操题1 todolist

进行中待办 已完成待办 待办事项 待办事项远程api和变量配置 回调函数 function didFetch(content) {//console.log(content.data);// content.b 1; 修改返回数据结构中的 b 字段为1let res content.data;let todoList [];for(let i in res){todoList.push(res[i]);}consol…

基于Springboot Vue医院管理系统+数据库脚本+文档(万字)

项目效果视频: 基于Springboot Vue医院管理系统 一、 项目介绍 角色:管理员、患者、医生 基于springboot vue实现的医院管理系统,有管理员、医生和患者三种角色。系统拥有丰富的功能,能够满足各类用户的需求,系统提供了登录和注册…

Reactor设计模式和Reactor模型

Reactor设计模式 翻译过来就是反应堆,所以Reactor设计模式本质是基于事件驱动。 角色 Handle(事件)EventHandler(事件处理器)ConcreteEventHandler(具体事件处理器)Synchronous Event Demult…

day07-缓存商品、购物车

1. 缓存菜品 1.1 问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得,如果用户端访问量比较大,数据库访问压力随之增大。 结果: 系统响应慢、用户体验差 1.2 实现思路 通过Redis来缓存菜品数据,减少数据库查询操作。 缓…

分享全栈开发医疗小程序 -带源码课件(课件无解压密码),自行速度保存

课程介绍 分享全栈开发医疗小程序 -带源码课件(课件无解压密码),自行速度保存!看到好多坛友都在求SpringBoot2.X Vue UniAPP,全栈开发医疗小程序 - 带源码课件,我看了一下,要么链接过期&…

Docker 容器编排利器 Docker Compose

文章目录 一、Docker Compose 简介二、Docker Compose 安装2.1 Mac、Windows 平台默认支持2.2 Linux 安装(通过包管理)2.2.1 安装2.2.2 测试2.2.3 卸载 2.3 使用PIP 安装与卸载2.3.1 PIP安装2.3.2 PIP 卸载 三、基本使用3.1 术语3.2 部署Flask 应用 四、Compose 常用命令4.1 命…

【Java程序设计】【C00351】基于Springboot的疫情居家办公系统(有论文)

基于Springboot的疫情居家办公系统(有论文) 项目简介项目获取开发环境项目技术运行截图 项目简介 项目获取 🍅文末点击卡片获取源码🍅 开发环境 运行环境:推荐jdk1.8; 开发工具:eclipse以及i…

windows环境安装,GOPATH设置,编写Go代码:

目录 windows环境安装 GOPATH设置: 开始编写Go代码: Go Hello World 实例 执行 Go 程序 注意 使用编译器:Sublime Text - 先进的代码编辑器 windows环境安装 windows环境下,go安装包安装成功后,会自动将go添加到…

cad不用插件怎么批量打印?分享2种轻松的方法!

在工程设计、建筑制图等领域,CAD软件是不可或缺的工具。然而,对于很多用户来说,批量打印CAD文件却是一个让人头疼的问题。难道每次都需要安装繁琐的插件才能实现吗?其实不然,今天我们就来介绍几种无需插件,…

Python爬虫学习完整版

一、什么是爬虫 网络爬虫,是一种按照一定规则,自动抓取互联网信息的程序或者脚本。由于互联网数据的多样性和资源的有限性,根据用户需求定向抓取相关网页并分析也成为如今主流的爬取策略。 1 爬虫可以做什么 你可以爬取网络上的的图片&#…

WPF —— Expander折叠栏 、菜单标签 menu

Expander 1 :Expander折叠栏 简介 Expander控件有一个箭头按钮。单击箭头时,Expander中的子元素将显示或隐藏。箭头“展开”控件,使其子控件可见。 2 :Expander常用的属性 IsEnabled 默认是打开或者折叠起来,true就…