如何在Azure平台查看Azure Web App的用户操作活动记录

你要的浏览器侧按钮点击、选项选择这类交互行为的全量采集、路径还原，直接用Azure原生的 Application Insights 就能实现，和Web App无缝打通，不需要额外搭建独立日志服务。 #

1. 开通关联Application Insights资源 #

• 进入Azure Portal，打开你已经部署好的Web App实例，左侧菜单栏找到「Application Insights」选项
• 选择启用服务，可直接新建绑定专属的Application Insights资源，也可以关联现有资源，保存后平台会自动完成后端侧的请求、异常日志关联，不需要改动后端代码
• 注意：默认配置只会采集页面加载、后端接口请求、服务端异常，不会自动采集前端自定义交互，必须补前端SDK配置才能抓到你要的点击save按钮这类动作。

2. 前端接入SDK采集交互事件 #

把Application Insights的JS SDK引入到所有前端页面的<head>标签最顶部，替换成你自己资源的连接字符串（在Application Insights概览页就能直接复制），就能自定义采集需要的交互：

// 以下是SDK基础引入片段，connectionString替换为你自己的资源值
<script type="text/javascript">
!function(T,l,y){var S=T.location,k="script",D="connectionString",C="ingestionendpoint",I="disableExceptionTracking",E="ai.device.",b="toLowerCase",w="crossOrigin",N="POST",e="appInsightsSDK",t=y.name||"appInsights";(y.name||T[e])&&(T[e]=t);var n=T[t]||function(d){var g=!1,f=!1,m={initialize:!0,queue:[],sv:"5",version:2,config:d};function v(e,t){var n={},a="Browser";return n[E+"id"]=a[b](),n[E+"type"]=a,n["ai.operation.name"]=S&&S.pathname||"_unknown_",n["ai.internal.sdkVersion"]="javascript:snippet_"+m.sv,{time:()=>new Date,ikey:e,name:"Microsoft.ApplicationInsights."+e.replace(/-/g,"")+"."+t,sampleRate:100,tags:n,data:{baseData:{ver:2}}}}var h=d.url||y.src;if(!h){var e=(a=d[D])?a.split(";"):[];for(var t=0,a,n,r=0;t<e.length;t++)if((n=e[t].split("="))[0]===C){r=1;if(a=n[1],a.indexOf("https://")<0){var i=(a=S.location.protocol+"//"+a).split("/");a=i[0]+"//"+i[2]}h=a+"/v2/track";break}r||(h="https://dc.services.visualstudio.com/v2/track")}function p(e,t){f=g=!1,m.queue.push(()=>{var n=e(t);n&&m.core.track(n)})}function o(e,t){var n=d.extensionConfig||{};if(!n||!n.ApplicationInsightsAnalytics||!n.ApplicationInsightsAnalytics.disableFlushOnBeforeUnload){if("fetch"in T&&(t=N,"no-cors"in new Request(h,{method:t}))){var a=new Request(h,{method:t,body:e,mode:"no-cors"});fetch(a,{}).catch(()=>{})}else{var r=new XMLHttpRequest;r.open(t,h),r.send(e)}}}return m.core={config:m,track:(e)=>{if(f)return m.queue.push(e);f=!0;var t=e.iKey(),n=v(t,e.name);for(var a in e.data.baseData)n.data.baseData[a]=e.data.baseData[a];var r=JSON.stringify({ver:1,name:n.name,time:n.time(),sampleRate:n.sampleRate,iKey:t,tags:n.tags,data:n.data});if(!g){g=!0;try{if("sendBeacon"in navigator&&navigator.sendBeacon(h,r))return g=f=!1,void 0}catch(e){}o(r,N)}}},m.loadAppInsights=function(e,t){var n=d.extensions||[],a=!1,i=0;for(;i<n.length;i++)if(n[i].identifier==="ApplicationInsightsAnalytics"){a=!0;break}a||n.push(new ApplicationInsightsAnalytics),m.core=m.createCore(m.config,n),m.core.initialize()},m.trackPageView=(e)=>p(m.core.trackPageView,e),m.trackEvent=(e)=>p(m.core.trackEvent,e),m.trackException=(e)=>p(m.core.trackException,e),m.trackTrace=(e)=>p(m.core.trackTrace,e),m.flush=()=>{for(var e=0;e<m.queue.length;e++)m.queue[e]();m.queue=[]},m}(window,document,{
connectionString: "替换为你的Application Insights连接字符串"
});
window.appInsights=appInsights;
appInsights.loadAppInsights();

// 自定义监听采集save按钮点击事件，可按需扩展采集其他交互
document.addEventListener('click', (e) => {
  const clickTarget = e.target;
  // 过滤你要采集的目标元素，比如id为save、文本为save的按钮
  if(clickTarget.id === 'save' || clickTarget.innerText.trim() === 'save'){
    appInsights.trackEvent({
      name: "user_interaction",
      properties: {
        action: "click_save",
        selected_option: JSON.stringify(/* 这里读取用户当前选择的选项值 */),
        current_page: window.location.pathname
      }
    })
  }
}, true)
</script>

• 如果嫌手动写监听麻烦，可以直接启用官方的Click Analytics自动采集插件，只要给需要追踪的DOM元素加data-*标记，就能自动上报点击事件，不用逐个写监听逻辑。
• 如果你用的是React/Vue/Angular这类单页应用，记得额外开启SDK的路由变更监听，避免单页内跳转漏采，导致操作路径断档。

3. 查看操作数据、还原用户路径 #

数据上报后等待2-5分钟即可在Portal查询：

• 看交互事件统计：进入Application Insights左侧「使用情况」-「事件」，就能看到所有上报的点击、选项选择事件的触发次数、分布
• 还原全量用户路径：打开「用户流」功能，选择你关心的事件（比如click_save）作为节点，就能看到用户从进入页面、选择选项、点击save到后续操作的完整路径，和你在浏览器DevTools里抓到的动作维度完全一致
• 排查特定问题：进入「事务搜索」，可以按用户ID、会话ID筛选，查看单个用户/单次访问下的所有操作序列、关联的接口请求、报错信息，不需要复现就能定位问题。

注意事项 #

• 事件上报时不要携带密码、手机号、身份证号等用户敏感信息，避免合规风险
• 默认采样率为100%，如果用户量较大可以适当调低采样率控制成本，排查问题时可临时给指定测试用户开启全量采样
• 如果需要关联用户身份，可以在用户登录后调用appInsights.setAuthenticatedUserContext(用户ID)，后续所有事件都会自动绑定对应用户，方便排查特定用户的问题。

内容的提问来源于stack exchange，提问作者Phyxius