تمكين Azure Monitor Application Insights Real User Monitoring
يجمع Microsoft Azure Monitor Application Insights JavaScript SDK بيانات الاستخدام، والتي تسمح لك بمراقبة وتحليل أداء تطبيقات الويب JavaScript. يشار إلى هذا عادة باسم Real User Monitoring أو RUM.
يحتوي Application Insights JavaScript SDK على SDK أساسي والعديد من المكونات الإضافية لمزيد من القدرات.
نقوم بتجميع طرق عرض الصفحة بشكل افتراضي. ولكن إذا كنت تريد أيضا جمع النقرات بشكل افتراضي، ففكر في إضافة المكون الإضافي Click Analytics Auto-Collection:
- إذا كنت تقوم بإضافة ملحق إطار عمل، والذي يمكنك إضافته بعد اتباع الخطوات للبدء، يمكنك اختياريا إضافة Click Analytics عند إضافة ملحق إطار العمل.
- إذا كنت لا تضيف ملحق إطار عمل، فقم بإضافة المكون الإضافي Click Analytics بعد اتباع الخطوات للبدء.
نحن نقدم المكون الإضافي لتتبع الأخطاء والمكون الإضافي للأداء لتصحيح الأخطاء/الاختبار. في حالات نادرة، من الممكن إنشاء ملحق خاص بك عن طريق إضافة مكون إضافي مخصص.
المتطلبات الأساسية
- اشتراك Azure: إنشاء اشتراك Azure مجانًا
- مورد Application Insights: إنشاء مورد Application Insights
- تطبيق يستخدم JavaScript
الشروع في العمل
اتبع الخطوات الواردة في هذا القسم لوضع علامة على تطبيقك باستخدام Application Insights JavaScript SDK.
تلميح
أخبار طيبة! نحن نسهل تمكين JavaScript باستخدام حقن برنامج JavaScript (Web) SDK Loader Script عن طريق التكوين.
إضافة التعليمات البرمجية ل JavaScript
تتوفر طريقتان لإضافة التعليمات البرمجية لتمكين Application Insights عبر Application Insights JavaScript SDK:
الأسلوب | متى يمكنني استخدام هذا الأسلوب؟ |
---|---|
JavaScript (Web) SDK Loader Script | بالنسبة لمعظم العملاء، نوصي باستخدام برنامج JavaScript (Web) SDK Loader Script لأنك لن تضطر أبدا إلى تحديث SDK والحصول على آخر التحديثات تلقائيا. أيضا، لديك التحكم في الصفحات التي تضيف إليها Application Insights JavaScript SDK. |
حزمة NPM | تريد إحضار SDK إلى التعليمات البرمجية الخاصة بك وتمكين IntelliSense. هذا الخيار مطلوب فقط للمطورين الذين يحتاجون إلى المزيد من الأحداث المخصصة والتكوين. هذا الأسلوب مطلوب إذا كنت تخطط لاستخدام React أو React Native أو Angular Framework Extension. |
الصق برنامج JavaScript (Web) SDK Loader Script في أعلى كل صفحة تريد تمكين Application Insights لها.
يفضل أن تقوم بإضافته كأول برنامج نصي في القسم الخاص بك
<head>
بحيث يمكنه مراقبة أي مشكلات محتملة مع جميع تبعياتك.إذا تم الكشف عن Internet Explorer 8، يتم تحميل JavaScript SDK v2.x تلقائيا.
<script type="text/javascript"> !(function (cfg){function e(){cfg.onInit&&cfg.onInit(n)}var x,w,D,t,E,n,C=window,O=document,b=C.location,q="script",I="ingestionendpoint",L="disableExceptionTracking",j="ai.device.";"instrumentationKey"[x="toLowerCase"](),w="crossOrigin",D="POST",t="appInsightsSDK",E=cfg.name||"appInsights",(cfg.name||C[t])&&(C[t]=E),n=C[E]||function(g){var f=!1,m=!1,h={initialize:!0,queue:[],sv:"8",version:2,config:g};function v(e,t){var n={},i="Browser";function a(e){e=""+e;return 1===e.length?"0"+e:e}return n[j+"id"]=i[x](),n[j+"type"]=i,n["ai.operation.name"]=b&&b.pathname||"_unknown_",n["ai.internal.sdkVersion"]="javascript:snippet_"+(h.sv||h.version),{time:(i=new Date).getUTCFullYear()+"-"+a(1+i.getUTCMonth())+"-"+a(i.getUTCDate())+"T"+a(i.getUTCHours())+":"+a(i.getUTCMinutes())+":"+a(i.getUTCSeconds())+"."+(i.getUTCMilliseconds()/1e3).toFixed(3).slice(2,5)+"Z",iKey:e,name:"Microsoft.ApplicationInsights."+e.replace(/-/g,"")+"."+t,sampleRate:100,tags:n,data:{baseData:{ver:2}},ver:undefined,seq:"1",aiDataContract:undefined}}var n,i,t,a,y=-1,T=0,S=["js.monitor.azure.com","js.cdn.applicationinsights.io","js.cdn.monitor.azure.com","js0.cdn.applicationinsights.io","js0.cdn.monitor.azure.com","js2.cdn.applicationinsights.io","js2.cdn.monitor.azure.com","az416426.vo.msecnd.net"],o=g.url||cfg.src,r=function(){return s(o,null)};function s(d,t){if((n=navigator)&&(~(n=(n.userAgent||"").toLowerCase()).indexOf("msie")||~n.indexOf("trident/"))&&~d.indexOf("ai.3")&&(d=d.replace(/(\/)(ai\.3\.)([^\d]*)$/,function(e,t,n){return t+"ai.2"+n})),!1!==cfg.cr)for(var e=0;e<S.length;e++)if(0<d.indexOf(S[e])){y=e;break}var n,i=function(e){var a,t,n,i,o,r,s,c,u,l;h.queue=[],m||(0<=y&&T+1<S.length?(a=(y+T+1)%S.length,p(d.replace(/^(.*\/\/)([\w\.]*)(\/.*)$/,function(e,t,n,i){return t+S[a]+i})),T+=1):(f=m=!0,s=d,!0!==cfg.dle&&(c=(t=function(){var e,t={},n=g.connectionString;if(n)for(var i=n.split(";"),a=0;a<i.length;a++){var o=i[a].split("=");2===o.length&&(t[o[0][x]()]=o[1])}return t[I]||(e=(n=t.endpointsuffix)?t.location:null,t[I]="https://"+(e?e+".":"")+"dc."+(n||"services.visualstudio.com")),t}()).instrumentationkey||g.instrumentationKey||"",t=(t=(t=t[I])&&"/"===t.slice(-1)?t.slice(0,-1):t)?t+"/v2/track":g.endpointUrl,t=g.userOverrideEndpointUrl||t,(n=[]).push((i="SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details)",o=s,u=t,(l=(r=v(c,"Exception")).data).baseType="ExceptionData",l.baseData.exceptions=[{typeName:"SDKLoadFailed",message:i.replace(/\./g,"-"),hasFullStack:!1,stack:i+"\nSnippet failed to load ["+o+"] -- Telemetry is disabled\nHelp Link: https://go.microsoft.com/fwlink/?linkid=2128109\nHost: "+(b&&b.pathname||"_unknown_")+"\nEndpoint: "+u,parsedStack:[]}],r)),n.push((l=s,i=t,(u=(o=v(c,"Message")).data).baseType="MessageData",(r=u.baseData).message='AI (Internal): 99 message:"'+("SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details) ("+l+")").replace(/\"/g,"")+'"',r.properties={endpoint:i},o)),s=n,c=t,JSON&&((u=C.fetch)&&!cfg.useXhr?u(c,{method:D,body:JSON.stringify(s),mode:"cors"}):XMLHttpRequest&&((l=new XMLHttpRequest).open(D,c),l.setRequestHeader("Content-type","application/json"),l.send(JSON.stringify(s)))))))},a=function(e,t){m||setTimeout(function(){!t&&h.core||i()},500),f=!1},p=function(e){var n=O.createElement(q),e=(n.src=e,t&&(n.integrity=t),n.setAttribute("data-ai-name",E),cfg[w]);return!e&&""!==e||"undefined"==n[w]||(n[w]=e),n.onload=a,n.onerror=i,n.onreadystatechange=function(e,t){"loaded"!==n.readyState&&"complete"!==n.readyState||a(0,t)},cfg.ld&&cfg.ld<0?O.getElementsByTagName("head")[0].appendChild(n):setTimeout(function(){O.getElementsByTagName(q)[0].parentNode.appendChild(n)},cfg.ld||0),n};p(d)}cfg.sri&&(n=o.match(/^((http[s]?:\/\/.*\/)\w+(\.\d+){1,5})\.(([\w]+\.){0,2}js)$/))&&6===n.length?(d="".concat(n[1],".integrity.json"),i="@".concat(n[4]),l=window.fetch,t=function(e){if(!e.ext||!e.ext[i]||!e.ext[i].file)throw Error("Error Loading JSON response");var t=e.ext[i].integrity||null;s(o=n[2]+e.ext[i].file,t)},l&&!cfg.useXhr?l(d,{method:"GET",mode:"cors"}).then(function(e){return e.json()["catch"](function(){return{}})}).then(t)["catch"](r):XMLHttpRequest&&((a=new XMLHttpRequest).open("GET",d),a.onreadystatechange=function(){if(a.readyState===XMLHttpRequest.DONE)if(200===a.status)try{t(JSON.parse(a.responseText))}catch(e){r()}else r()},a.send())):o&&r();try{h.cookie=O.cookie}catch(k){}function e(e){for(;e.length;)!function(t){h[t]=function(){var e=arguments;f||h.queue.push(function(){h[t].apply(h,e)})}}(e.pop())}var c,u,l="track",d="TrackPage",p="TrackEvent",l=(e([l+"Event",l+"PageView",l+"Exception",l+"Trace",l+"DependencyData",l+"Metric",l+"PageViewPerformance","start"+d,"stop"+d,"start"+p,"stop"+p,"addTelemetryInitializer","setAuthenticatedUserContext","clearAuthenticatedUserContext","flush"]),h.SeverityLevel={Verbose:0,Information:1,Warning:2,Error:3,Critical:4},(g.extensionConfig||{}).ApplicationInsightsAnalytics||{});return!0!==g[L]&&!0!==l[L]&&(e(["_"+(c="onerror")]),u=C[c],C[c]=function(e,t,n,i,a){var o=u&&u(e,t,n,i,a);return!0!==o&&h["_"+c]({message:e,url:t,lineNumber:n,columnNumber:i,error:a,evt:C.event}),o},g.autoExceptionInstrumented=!0),h}(cfg.cfg),(C[E]=n).queue&&0===n.queue.length?(n.queue.push(e),n.trackPageView({})):e();})({ src: "https://js.monitor.azure.com/scripts/b/ai.3.gbl.min.js", // name: "appInsights", // Global SDK Instance name defaults to "appInsights" when not supplied // ld: 0, // Defines the load delay (in ms) before attempting to load the sdk. -1 = block page load and add to head. (default) = 0ms load after timeout, // useXhr: 1, // Use XHR instead of fetch to report failures (if available), // dle: true, // Prevent the SDK from reporting load failure log crossOrigin: "anonymous", // When supplied this will add the provided value as the cross origin attribute on the script tag // onInit: null, // Once the application insights instance has loaded and initialized this callback function will be called with 1 argument -- the sdk instance (DON'T ADD anything to the sdk.queue -- As they won't get called) // sri: false, // Custom optional value to specify whether fetching the snippet from integrity file and do integrity check cfg: { // Application Insights Configuration connectionString: "YOUR_CONNECTION_STRING" }}); </script>
(اختياري) إضافة أو تحديث تكوين برنامج JavaScript (Web) SDK Loader Script الاختياري، إذا كنت بحاجة إلى تحسين تحميل صفحة الويب الخاصة بك أو حل أخطاء التحميل.
تكوين برنامج JavaScript (Web) SDK Loader Script
لصق سلسلة الاتصال في بيئتك
للصق سلسلة الاتصال في بيئتك، اتبع الخطوات التالية:
انتقل إلى جزء Overview لمورد Application Insights.
حدد موقع سلسلة الاتصال.
حدد أيقونة نسخ إلى الحافظة لنسخ سلسلة الاتصال إلى الحافظة.
استبدل العنصر النائب
"YOUR_CONNECTION_STRING"
في تعليمة JavaScript البرمجية سلسلة الاتصال نسخها إلى الحافظة.connectionString
يجب أن يتبع التنسيق "InstrumentationKey=xxxx;....". إذا لم تتوافق السلسلة المتوفرة مع هذا التنسيق، تفشل عملية تحميل SDK.لا يعتبر سلسلة الاتصال رمزا مميزا للأمان أو مفتاحا. لمزيد من المعلومات، راجع هل تتطلب مناطق Azure الجديدة استخدام سلسلة الاتصال؟.
إشعار
يتطلب Application Insights JavaScript SDK توفير سلسلة الاتصال أثناء التهيئة والتكوين. هذه سلسلة الاتصال مرئية في نص عادي في مستعرضات العميل، ولا توجد طريقة مباشرة لاستخدام المصادقة المستندة إلى معرف Microsoft Entra لبيانات تتبع استخدام المستعرض. نوصيك بإنشاء مورد Application Insights منفصل مع تمكين المصادقة المحلية لبيانات تتبع الاستخدام المستندة إلى متصفح JavaScript إذا كنت بحاجة إلى تأمين بيانات تتبع الاستخدام للخدمة بشكل منفصل باستخدام المصادقة المستندة إلى معرف Microsoft Entra.
(اختياري) إضافة تكوين SDK
يتم تمرير تكوين SDK الاختياري إلى Application Insights JavaScript SDK أثناء التهيئة.
لإضافة تكوين SDK، أضف كل خيار تكوين مباشرة ضمن connectionString
. على سبيل المثال:
(اختياري) إضافة تكوين SDK متقدم
إذا كنت ترغب في استخدام الميزات الإضافية التي توفرها المكونات الإضافية لأطر عمل معينة وتمكين المكون الإضافي Click Analytics اختياريا، راجع:
تأكيد أن البيانات تتدفق
انتقل إلى مورد Application Insights الذي قمت بتمكين SDK له.
في قائمة مورد Application Insights على اليسار، ضمن Investigate، حدد جزء Transaction search.
افتح القائمة المنسدلة أنواع الأحداث وحدد تحديد الكل لمسح خانات الاختيار في القائمة.
من القائمة المنسدلة أنواع الأحداث، حدد:
- عرض الصفحة ل Azure Monitor Application Insights Real User Monitoring
- حدث مخصص للمكون الإضافي Click Analytics Auto-Collection.
قد يستغرق الأمر بضع دقائق حتى تظهر البيانات في المدخل. إذا كانت البيانات الوحيدة التي تراها تظهر هي استثناء فشل التحميل، فراجع استكشاف أخطاء فشل تحميل SDK وإصلاحها لتطبيقات الويب JavaScript.
في بعض الحالات، إذا كانت مثيلات متعددة من إصدارات مختلفة من Application Insights تعمل على نفس الصفحة، يمكن أن تحدث أخطاء أثناء التهيئة. لهذه الحالات ورسالة الخطأ التي تظهر، راجع تشغيل إصدارات متعددة من Application Insights JavaScript SDK في جلسة عمل واحدة. إذا واجهت أحد هذه الأخطاء، فحاول تغيير مساحة الاسم باستخدام
name
الإعداد . لمزيد من المعلومات، راجع تكوين برنامج JavaScript (Web) SDK Loader Script.إذا كنت تريد الاستعلام عن البيانات لتأكيد تدفق البيانات:
حدد Logs في الجزء الأيمن.
عند تحديد Logs، يفتح مربع الحوار Queries، والذي يحتوي على عينة من الاستعلامات ذات الصلة ببياناتك.
حدد تشغيل لنموذج الاستعلام الذي تريد تشغيله.
إذا لزم الأمر، يمكنك تحديث نموذج الاستعلام أو كتابة استعلام جديد باستخدام Kusto Query Language (KQL).
بالنسبة لمشغلي KQL الأساسيين، راجع التعرف على عوامل تشغيل KQL الشائعة.
الأسئلة الشائعة
يقدم هذا القسم إجابات للأسئلة الشائعة.
ما عدد المستخدمين وجلسات العمل؟
- تقوم حزمة تطوير برامج JavaScript بتعيين ملف تعريف ارتباط مستخدم على عميل الويب، لتحديد المستخدمين العائدين، وملف تعريف ارتباط جلسة عمل إلى أنشطة المجموعة.
- إذا لم يكن هناك برنامج نصي من جانب العميل، يمكنك تعيين ملفات تعريف الارتباط على الخادم.
- إذا كان مستخدم حقيقي واحد يستخدم موقعك في مستعرضات مختلفة، أو باستخدام استعراض خاص/متخفي، أو أجهزة مختلفة، يتم حسابها أكثر من مرة.
- لتعريف مستخدم سجل الدخول عبر الأجهزة والمستعرضات، أضف استدعاء لتعيينAuthenticatedUserContext ().
ما هو أداء/حمل JavaScript SDK؟
يحتوي Application Insights JavaScript SDK على الحد الأدنى من النفقات العامة على موقع الويب الخاص بك. في 36 كيلوبايت فقط gzipped، وأخذ فقط ~15 مللي ثانية للتهيئة، يضيف SDK مقدارا ضئيلا من وقت التحميل إلى موقع الويب الخاص بك. يتم تحميل الحد الأدنى من مكونات المكتبة بسرعة عند استخدام SDK، ويتم تنزيل البرنامج النصي الكامل في الخلفية.
بالإضافة إلى ذلك، أثناء تنزيل البرنامج النصي من CDN، يتم وضع كل تعقب صفحتك في قائمة الانتظار، لذلك لا تفقد أي بيانات تتبع عن بعد خلال دورة حياة الصفحة بأكملها. توفر عملية الإعداد هذه لصفحتك نظام تحليلات سلس وغير مرئي لمستخدميك.
ما هي المستعرضات التي يدعمها JavaScript SDK؟
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
Chrome أحدث ✔ | Firefox أحدث ✔ | v3.x: IE 9+ وMicrosoft Edge ✔ v2.x: IE 8+ Compatible وMicrosoft Edge ✔ |
Opera أحدث ✔ | Safari أحدث ✔ |
أين يمكنني العثور على أمثلة التعليمات البرمجية ل JavaScript SDK؟
للحصول على أمثلة قابلة للتنفيذ، راجع عينات Application Insights JavaScript SDK.
ما هو توافق ES3/Internet Explorer 8 مع JavaScript SDK؟
نحن بحاجة إلى اتخاذ التدابير اللازمة لضمان استمرار SDK في "العمل" ولا يكسر تنفيذ JavaScript عند تحميله بواسطة مستعرض قديم. سيكون من المثالي عدم دعم المتصفحات القديمة، لكن العديد من العملاء الكبار لا يمكنهم التحكم في المتصفح الذي يختار مستخدموهم استخدامه.
لا يعني هذا البيان أننا ندعم فقط أقل مجموعة شائعة من الميزات. نحن بحاجة إلى الحفاظ على توافق التعليمة البرمجية ES3. يجب إضافة ميزات جديدة بطريقة لا تؤدي إلى تعطيل تحليل ES3 JavaScript وإضافتها كميزة اختيارية.
راجع GitHub للحصول على تفاصيل كاملة حول دعم Internet Explorer 8.
هل JavaScript SDK مفتوح المصدر؟
نعم، يتم مصدر مفتوح Application Insights JavaScript SDK. لعرض التعليمة البرمجية المصدرية أو للمساهمة في المشروع، راجع مستودع GitHub الرسمي.
الدعم
- إذا لم تتمكن من تشغيل التطبيق أو لم تحصل على البيانات كما هو متوقع، فراجع مقالة استكشاف الأخطاء وإصلاحها المخصصة.
- للسؤال الشائع حول JavaScript SDK، راجع الأسئلة المتداولة.
- بالنسبة إلى مشكلات دعم Azure، افتح تذكرة دعم Azure.
- للحصول على قائمة بالمشكلات المفتوحة المتعلقة ب Application Insights JavaScript SDK، راجع صفحة مشكلات GitHub.
- استخدم ملحق عارض بيانات تتبع الاستخدام لسرد الأحداث الفردية في حمولة الشبكة ومراقبة المكالمات الداخلية داخل Application Insights.
الخطوات التالية
- استكشاف تجارب استخدام Application Insights
- تعقب طرق عرض الصفحة
- تعقب الأحداث والمقاييس المخصصة
- إدراج مهيئ بيانات تتبع استخدام JavaScript
- إضافة تكوين JavaScript SDK
- راجع ملاحظات الإصدار التفصيلية على GitHub للحصول على التحديثات وإصلاحات الأخطاء.
- بيانات الاستعلام في Log Analytics.