整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
eb应用程序是指独立且无需任何外部托管软件即可运行的软件。Web应用程序通常需要Web服务器将程序转换为HTML内容以供Web浏览器使用，这样Web应用程序就可以将服务直接提供给用户。
我们每天使用许多Web应用程序，例如会议工具，存储管理软件，源代码控制程序（例如GIT），照片编辑工具等。Web应用无处不在，灵活便捷 ，并且省去了维护和扩展中央服务器的麻烦，但对于开发人员来说，为各种环境（包括之前和当前的OS或框架）提供有效支撑是一个巨大挑战。而且向最终用户交付Web应用程序需要对所有支持的框架，操作系统和版本进行严格的测试。
在此文中，我们将重点关注监视托管独立应用程序（即使用.NET框架开发的Web应用程序）中遇到的挑战。
作为独立的应用程序开发人员，最大的挑战来自性能问题。如果您在应用程序中遇到高内存或高CPU消耗的情况，则可能需几天时间复现此问题，更不用说找到根本原因并加以解决了。最重要的是，很难鼓励面临这些问题的用户继续使用有问题的应用程序，因为他们倾向于不报告所遇到的问题，而是尝试重新启动该应用程序，直到其正常工作即可。如果无法实现，这些用户通常最终会放弃使用该应用。
使用应用程序监视工具，不仅使您能够在开发阶段解决这些问题，而且还可以帮助您发现有关不同测试方案下的应用程序行为的大量信息，并找到需要调整应用程序代码的区域。这是应用程序性能监视优势所在。
监视独立应用程序
使用应用程序性能监视（APM）解决方案，您可以监视功能级别的性能，跟踪最耗时的实例，甚至借助自定义工具来跟踪工作流。由于每个独立的应用程序都有其独特的方式，因此您的APM解决方案需要针对您的应用程序的特定需求进行定制。
以下是一些有关如何使用APM工具跟踪托管独立应用程序性能的准则：
1.执行应用程序的基本流程时，会自动捕获诸如Apdex得分，响应时间和流量之类的标准指标。这可以帮助您了解线程和事件在应用程序进程中所花费的时间，并指出哪些代码段消耗了更多的内存和CPU。
2.使用自定义工具定义工作流程的开始和结束部分。使用自定义工具，您还可以监视关键功能的性能。
3.使用异常和错误跟踪功能来跟踪问题的根本原因。APM工具通常会在发生错误时捕获整个堆栈，通过立即查找有问题的代码来节省开发人员宝贵的时间，因此开发人员可以专注于调试。
例如，如果您正在开发从后台不断从Web服务收集数据的报告软件，则监视工具可以帮助您跟踪应用程序何时关闭，从而提示您立即采取行动。对于所有类型的应用程序而言，无论它们是Web应用程序还是移动应用程序，性能监控都是必不可少的。使用Site24x7，您可以监视Web应用程序的性能，并定制监视方法以适合相关应用程序的特定需求。
在产品的开发和运营过程中我们经常会遇到一些问题，如用户反馈说无法对某某商品下单，而另一位负责运营的同事也提到某某广告在手机上打不开。
尽管这些问题被多次报告，但我们却难以复现这些故障，这让团队感到十分棘手。
如何有效地记录项目中的错误并能够重现这些问题，正是我们需要通过监控平台来解决的关键痛点之一。
WebTracing是一款专为前端项目量身定制的 JavaScript埋点 SDK，它提供了完善的前端监控手段和解决方案。通过集成行为追踪、性能监测、异常捕获、请求记录、资源管理、路由监控、曝光分析以及录屏功能，让数据驱动决策变得更加直观和高效。
作者的目标是减轻前端开发者在监控方面的工作负担。致力于为各种场景提供全面的解决方案，并希望开发者能从项目中获得一些启发。
// 核心实现包 - js
pnpm install @web-tracing/core
// vue2版本
pnpm install @web-tracing/vue2
// vue3版本
pnpm install @web-tracing/vue3html 安装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/@web-tracing/core"></script>
<script>
webtracing.init({
appName: 'cxh',
debug: true,
pv: true,
performance: true,
error: true,
event: true,
cacheMaxLength: 10,
cacheWatingTime: 1000,
userUuid: 'init_userUuid',
scopeError: true,
...
})
</script>
<body></body>
</html>Vue2 安装
import WebTracing from '@web-tracing/vue2'
Vue.use(WebTracing, {
dsn: '/trackweb',
appName: 'cxh',
...
})Vue3 安装
import WebTracing from '@web-tracing/vue3'
app.use(WebTracing, {
dsn: '/trackweb',
appName: 'cxh',
...
})这里以作者提供的 Vue2示例项目来演示：
地址：https://github.com/M-cheng-web/web-tracing-examples-vue2
将示例项目 clone到本地安装
pnpm install
pnpm run start开启 node服务
node server.js打开示例项目首页
image
该项目是一个前端监控解决方案，它使用 Monorepo + pnpm 的构建方式，支持多包联调和发版，并且提供钩子函数、批量如何错误（去重）、抽样发送、过滤等能力。
项目的基本原理包括自动和手动两种采集方式，自动采集通过劫持或监听浏览器事件来获取错误、性能和页面跳转等信息；手动采集则是通过调用 SDK暴露的方法来触发事件采集。
image
事件对象具体属性如下：
插件会根据 DOM元素上一些属性来获取需要采集该元素的事件,以及采集该元素事件时应该传递哪些参数
事件示例
<div
class="box-div"
data-warden-title="xxx"
data-warden-bigTitle="bigTitle"
width="100%"
>
示例div
</div>点击事件示例div产生如下对象
{
eventId: 'div',
eventType: 'click',
title: 'xxx',
triggerPageUrl: 'http://localhost:6656/#/event',
x: 280,
y: 20,
params: { bigtitle: "bigTitle" }
elementPath: 'div',
triggerTime: 1689726300399,
sendTime: 1689726301406
}页面错误自动收集,主要原理是 监听/劫持 error unhandledrejection console.error,采集这三类错误
资源加载错误,代码异常(error) promise调用链异常(reject) console.error异常
image
我们主动触发了代码错误，可以在控制台看到的报错，然后被 webTracing事件采集
触发错误事件时生成的对象
将配置项中的 scopeError 设置为 true 可对错误事件去重。
此外还包括资源监听、路由采集、请求采集、资源采集、曝光采集，由于篇幅原因这里就不一一展开介绍，大家感兴趣可以去官网自行查阅。
image
数据流向方面，监听到的事件会经过预处理并生成描述事件信息的对象，然后放入列表中等待统一发送。发送数据时，会根据最大缓存数和延迟发送事件时长的设置来决定何时发送数据，支持多种发送方式，包括 navigator.sendBeacon、image、XML，以及本地化存储和自定义发送方式。
SDK还提供了丰富的导出项，包括钩子函数和可动态更改的内部 options 对象，以方便开发人员自定义功能，如加密传输、发送事件后的提醒、配置项更改和获取基础数据等。
此外，项目还定义了事件类型和事件ID的枚举，以及用于标识用户和细分业务的特殊标识，如 pageId、sessionId、deviceId、appName 和 appCode。
作者提出会写一套服务端(nest) + 后台查看监控数据平台(vue)，有以下几点考量
提供服务端能力（目前只是在采集端发力） 可以在线体验此项目 提供更多示例代码给开发们，再次降低这一套代码在公司的推广难度 作者也想站在业务的角度多思考还能从哪些方面此项目还缺失哪些功能
附上github地址：https://github.com/M-cheng-web/web-tracing
我们了解到 WebTracing是一款优秀的埋点项目，并提供了多种监控手段，帮助我们对页面交互和用户操作进行分析。
WebTracing提供了原生、Vue2、Vue3等多种安装方式供我们使用。
它的主要功能包括事件采集、错误采集、路由采集、请求采集、资源采集、曝光采集等。
oySSL官网 注册码230918
实现网站的HTTPS安全访问涉及到几个关键步骤。HTTPS（超文本传输协议安全）通过SSL/TLS协议加密HTTP通信，确保数据在客户端和服务器之间的传输安全。以下是将网站从HTTP升级到HTTPS的详细步骤：
PC点此申请https证书：JoySSL_JoySSL SSL证书_JoySSL https证书-JoySSL
注册填写注册码230918（填写注册码获得免费技术支持）
请根据你使用的具体服务器和Web应用环境调整上述步骤。如果需要更详细的指导，可以查阅特定服务器软件的官方文档。
*请认真填写需求信息，我们会在24小时内与您取得联系。
