开发者学堂课程【网站性能前端监控课程：前端监控合集】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/1243/detail/18441
前段监控合集
内容介绍
一、演示前端监控的接入以及如何使用【会话追踪】功能
二、演示前端监控的接入及如何使用【访问速度】功能
三、演示如何完成前端监控的接入以及如何诊断白屏问题
随着互联网成为生活必需品，网站、小程序成为人们最常接触到的产品，了解用户使用产品是否满意、流畅，是否遇到卡顿报错问题成为非常重要的事情。接下来，我们详解多个前端监控场景。
场景一，如何识别单个用户在应用程序中的性能体验。
一直以来大部分人对前端监控印象还停留在PV\UV、错误数等宏观监控数据上,以此判断用户体验与应用性能，但具体到单体用户故障上报时，却无法进行根因分析，比如订单支付成功率只有30%，我们却不知道七成用户为什么支付失败,对此，我们可以使用前端监控【会话追踪】功能，【会话追踪】把用户基本属性与行为记录统计出来，便于定位或复现用户遇到的问题。
接下来，我们按步骤演示前端监控的接入以及如何使用【会话追踪】功能。
一、演示前端监控的接入以及如何使用【会话追踪】功能
第一步，接入前端监控。
1. 登录阿里云账号，在控制台选择应用实时监控服务
2. 点击前端监控，在前端监控列表右上角点击【创建应用站点】
3. 命名所需监控的站点应用。点击创建，生成与该站点唯一绑定的站点标识pid并根据自身需求配置SDK扩展配置项。
4. 进行JS插码，目前提供异步加载、同步加载、NPM包三种方式。这里演示最常用的异步加载和同步加载的安装流程，两种安装方式相似只需要复制相关代码，并粘贴至页面HTML的<body>中，即可完成探针安装。粘贴保存后返回数据台查看数据上报情况，我们看到数据正常上报，前端监控安装完成。
第二步，根据用户ID查询会话详情
1. 登录应用实时监控服务控制台。选择前端监控的应用列表，单击目标应用并在左侧导航栏选择应用>会话追踪
2. 输入用户名或用户ID，搜索对应会话
3. 在会话列表单击目标会话ID，查看会话追踪详情页面。可以看到会话轨迹存在慢加载，点击相应详情查看具体慢调用情况。此外，还可以查看访客速度、JS错误判断、API详情、访问明细，定位用户无法完成服务的原因
随着互联网成为生活必需品，网站、小程序成为人们最常接触到的产品，同时，用户对于卡顿、白屏的忍受度越来越低，了解用户是否遇到卡顿成为性能优化第一步，接下来，我们详解多个典型前端监控场景。
场景二，如何找到加载白屏时间过长的页面并定位根因？对于使用网站、小程序的用户而言，打开新页面或点击服务后，出现较长时间白屏，都会让其觉得网站有问题或服务已经停止，这就会导致用户直接关闭页面或者推出小程序。可以看到，过长的白屏时间会造成用户体验以及转化率受损。对此，可以使用前端监控【访问速度】功能，【访问速度】将页面首次渲染耗时进行排名，便于发现渲染耗时最长的页面并结合页面加载瀑布图、慢页面会话追踪进行定位。接下来，按步骤演示前端监控的接入及如何使用【访问速度】功能。
二、演示前端监控的接入及如何使用【访问速度】功能
第一步，接入前端监控
1. 登录阿里云账号，在控制台选择应用实时监控服务
2. 点击前端监控，在前端监控列表右上角点击【创建应用站点】
3. 命名所需监控的站点应用。点击创建，生成与该站点唯一绑定的站点标识pid并根据自身需求配置SDK扩展配置项。
4. 进行JS插码，目前提供异步加载、同步加载、NPM包三种方式。这里演示最常用的异步加载和同步加载的安装流程，两种安装方式相似只需要复制相关代码，并粘贴至页面HTML的<body>中，即可完成探针安装。粘贴保存后返回数据台查看数据上报情况，我们看到数据正常上报，前端监控安装完成。
第二步，根据【访问速度】确定缓慢页面
通过【访问速度】功能可以找到加载速度最慢的页面，并根据网页基本指标、页面加载瀑布、慢页面会话追踪，找到相关根因。点击其中一条缓慢加载的会话追踪，可以看到其中的页面详情以及触发的相关资源及API耗时情况。可以看到造成当前页面加载缓慢的是由于4条CSS加载耗时较长，然后进行后续优化。
随着互联网成为生活必需品，网站、小程序成为人们最常接触到的产品，用户使用产品经常需要填写表单或其他信息，是否能够成功提交成为非常关键的环节。接下来，我们详解多个前端监控场景。
场景三，如何分析多个业务请求失败导致的用户业务操作失败？
以电商、社交场景举例，用户打开表单页面，填写相关信息后提交表单，但直接提示失败，用户在此时就会选择重试或关闭相关订单，表单提交失败背后是多个业务请求失败，我们该如何分析呢？
对此，我们可以使用前端监控【API详情】功能，【API详情】按照API错误率排序，并通过绘画追踪链路追踪定位相应问题。接下来，我们按步骤演示前端监控的接入以及如何使用API详情功能。
1.登录阿里云账号，在控制台选择应用实时监控服务
2.点击前端监控，在前端监控列表右上角点击【创建应用站点】
3.命名所需监控的站点应用。点击创建，生成与该站点唯一绑定的站点标识pid并根据自身需求配置SDK扩展配置项。
4.进行JS插码，目前提供异步加载、同步加载、NPM包三种方式。这里演示最常用的异步加载和同步加载的安装流程，两种安装方式相似只需要复制相关代码，并粘贴至页面HTML的<body>中，即可完成探针安装。粘贴保存后返回数据台查看数据上报情况，我们看到数据正常上报，前端监控安装完成。
第二步，根据JS状态码与API详情确认服务状态
登录应用实时监控服务控制台。选择前端监控的应用列表，单击目标应用并在左侧导航栏选择应用>API详情，除了基础概览图表，API详情还提供请求列表、返回信息、状态码、分布情况等信息，选择请求状态码的分析，可以看到请求的具体情况，点击会话追踪，可以看到问题的根源在于后端而非前端。我们可以使用调用链，进行后端的问题定位
随着互联网成为生活必需品，网站、小程序成为人们最常接触到的产品，同时，用户对于卡顿、白屏的忍受度越来越低，了解用户是否遇到卡顿成为性能优化第一步，接下来，我们详解多个典型前端监控场景。
场景四，某页面打开直接白屏如何定位问题？
对于使用网站、小程序的用户而言，直接白屏且没有任何提示会让用户不知所措，不仅影响用户体验，更会直接中断业务，这就会导致用户直接关闭网页或退出小程序，造成用户体验及业务受损，这背后可能是JS错误造成的直接白屏。对此，我们可以使用前端监控【资源错误】、【JS错误诊断】功能确认是否有关键资源报错以及是否存在JS错误堆栈。接下来，我们演示如何完成前端监控的接入以及如何诊断白屏问题
三、演示如何完成前端监控的接入以及如何诊断白屏问题
第一步，接入前端监控
1.登录阿里云账号，在控制台选择应用实时监控服务
2.点击前端监控，在前端监控列表右上角点击【创建应用站点】
3.命名所需监控的站点应用。点击创建，生成与该站点唯一绑定的站点标识pid并根据自身需求配置SDK扩展配置项。
4.进行JS插码，目前提供异步加载、同步加载、NPM包三种方式。这里演示最常用的异步加载和同步加载的安装流程，两种安装方式相似只需要复制相关代码，并粘贴至页面HTML的<body>中，即可完成探针安装。粘贴保存后返回数据台查看数据上报情况，我们看到数据正常上报，前端监控安装完成。
第二步，根据【资源错误】、【JS错误诊断】确定白屏根因
通过【JS错误诊断】功能可以查看高频错误情况并进行诊断，可以看到用户基本信息、堆栈信息、用户行为回溯，可以看到用户使用过程遇到多个JS错误，我们可以对此进行针对优化
目前，应用实时监控服务ARMS-前端监控15天免费试用，快来体验。
