Поделиться через

Включение мониторинга реального пользователя Azure Monitor Application Insights

Пакет SDK JavaScript для Microsoft Azure Monitor Application Insights собирает данные об использовании, что позволяет отслеживать и анализировать производительность веб-приложений JavaScript. Обычно это называется реальным мониторингом пользователей или RUM.

Пакет SDK JavaScript для Application Insights содержит базовый пакет SDK и несколько подключаемых модулей для получения дополнительных возможностей.

Концептуальная схема, показывающая пакет SDK JavaScript Application Insights, его подключаемые модули и расширения и их связь друг с другом.

По умолчанию мы собираем представления страниц. Но если вы хотите также автоматически собирать щелчки, рассмотрите возможность добавления плагина автоматического сбора Click Analytics:

Мы предоставляем плагин для отладки и плагин для производительности для отладки и тестирования. В редких случаях можно создать собственное расширение, добавив пользовательский плагин.

Необходимые компоненты

Начало работы

Выполните действия, описанные в этом разделе, чтобы инструментировать приложение с помощью пакета SDK JavaScript для Application Insights.

Совет

Отличная новость! Мы упрощаем внедрение скрипта загрузчика пакета SDK JavaScript (Web) javaScript с помощью конфигурации.

Добавление кода JavaScript

Существуют два метода для добавления кода, чтобы активировать Application Insights с помощью пакета JavaScript SDK для Application Insights.

Способ Когда бы я использовал этот метод?
Скрипт загрузчика пакета SDK для JavaScript (Web) Для большинства клиентов рекомендуется скрипт загрузчика пакета SDK JavaScript (Web), так как вам никогда не нужно обновлять пакет SDK и автоматически получать последние обновления. Кроме того, вы можете контролировать, к каким страницам добавляется пакет SDK JavaScript Application Insights.
Пакет npm Вы хотите интегрировать SDK в ваш код и включить IntelliSense. Этот параметр необходим только для разработчиков, которым требуется больше пользовательских событий и конфигурации. Этот метод необходим, если планируется использовать расширение React, React Native или Angular Framework.

  1. Вставьте скрипт загрузчика пакета SDK JavaScript (Web) в верхней части каждой страницы, для которой требуется включить Application Insights.

    Желательно добавить его в качестве первого скрипта в <head> разделе, чтобы он смог отслеживать любые потенциальные проблемы со всеми зависимостями.

    Если обнаружен Internet Explorer 8, пакет SDK JavaScript версии 2.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>

  2. (Необязательно) Добавьте или обновите необязательную конфигурацию скрипта загрузчика пакета SDK JavaScript (Web), если необходимо оптимизировать загрузку веб-страницы или устранить ошибки загрузки.

    Снимок экрана: скрипт загрузчика пакета SDK для JavaScript (Web) Выделены параметры настройки скрипта загрузчика пакета SDK Для JavaScript (Web).

Настройка скрипта загрузчика пакета SDK для JavaScript (Web)

Имя. Тип Обязательное? Описание
src строка Обязательное поле Полный URL-адрес для загрузки пакета SDK. Это значение используется в качестве атрибута src динамически добавляемого тега <script />. Вы можете использовать общедоступное расположение CDN или собственное частное размещение.
имя строка Необязательно Глобальное имя инициализированного пакета SDK. Используйте этот параметр, если необходимо инициализировать два разных пакета SDK одновременно.

Значением по умолчанию является appInsights, поэтому window.appInsights является ссылкой на инициализированный экземпляр.

Примечание. Если вы назначите значение имени или предыдущий экземпляр назначен глобальному имени appInsightsSDK, код инициализации пакета SDK требует наличия этого в глобальном пространстве имен в виде window.appInsightsSDK=<name value>, чтобы обеспечить правильную инициализацию и обновление скелета скрипта загрузчика SDK для JavaScript (Web), а также методов проксирования.
ИД число в мс Необязательно Определяет задержку перед попыткой загрузить набор SDK. Используйте этот параметр, если HTML-страница не загружается, так как скрипт загрузчика пакета SDK JavaScript (Web) загружается в неправильное время.

Значение по умолчанию — 0 мс после истечения тайм-аута. Если вы используете отрицательное значение, тег скрипта немедленно добавляется в область страницы <head> и блокирует событие загрузки страницы до тех пор, пока скрипт не будет загружен или произойдет его сбой.
useXhr булевый Необязательно Этот параметр используется только для регистрации сбоев загрузки SDK. Например, этот параметр полезен, если скрипт загрузчика SDK JavaScript (Web) мешает загрузке HTML страницы, вследствие чего функция fetch() становится недоступной.

Отчет сначала пытается использовать fetch(), если доступен, а затем использует XHR. Установите этот параметр на true, чтобы обойти проверку получения. Этот параметр необходим только в средах, где получение не может передавать события сбоя, например, если скрипт загрузчика пакета SDK JavaScript (Web) не удалось загрузить.
crossOrigin строка Необязательно Включив этот параметр, тег скрипта, добавленный для скачивания пакета SDK, включает атрибут crossOrigin с этим строковым значением. Используйте этот параметр, если необходимо предоставить поддержку CORS. Если он не определен (вариант по умолчанию), атрибут crossOrigin не добавляется. Рекомендуемые значения не определены (значение по умолчанию), "" или "анонимный". Все допустимые значения см. в документации по атрибутам HTML между источниками.
onInit function(aiSdk) { ... } Необязательно Эта функция обратного вызова вызывается после успешной загрузки и инициализации основного скрипта SDK из CDN (на основе значения src). Эта функция обратного вызова полезна при вставке инициализатора телеметрии. Он передает один аргумент, который является ссылкой на экземпляр пакета SDK, который вызывается и также вызывается перед первым начальным представлением страницы. Если пакет SDK уже загружен и инициализирован, этот обратный вызов по-прежнему вызывается. ПРИМЕЧАНИЕ. Во время обработки массива sdk.queue вызывается обратный вызов. Вы не можете добавлять в очередь больше элементов, так как они игнорируются и удаляются. (Добавлено в составе скрипта загрузчика пакета SDK JavaScript (Web) версии 5—значение sv:"5" в скрипте).
cr булевый Необязательно Если пакет SDK не удается загрузить, и значением конечной точки, определенным для src, является общедоступное расположение CDN, то этот параметр конфигурации пытается немедленно загрузить пакет SDK из одной из следующих резервных конечных точек CDN.
  • 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
ПРИМЕЧАНИЕ. az416426.vo.msecnd.net частично поддерживается, поэтому не рекомендуется.

Если пакет SDK успешно загружается из резервной конечной точки CDN, он загружается из первой доступной, которая определяется, когда сервер выполняет успешную проверку загрузки. Если пакет SDK не удается загрузить из любой из конечных точек CDN резервной копии, появится сообщение об ошибке пакета SDK.

Если значение не определено, то используется значение true по умолчанию. Если вы не хотите загрузить пакет SDK из конечных точек CDN резервного копирования, задайте для этого параметра конфигурации значение false.

Если вы загружаете пакет SDK из собственной частной конечной точки CDN, этот параметр конфигурации не применяется.

Вставьте строку подключения в вашу среду

Чтобы вставить строку подключения в вашу среду, выполните следующие действия.

  1. Перейдите в область обзора ресурса Application Insights.

  2. Найдите строку подключения.

  3. Нажмите на значок Копировать в буфер обмена, чтобы скопировать строку подключения в буфер обмена.

    Снимок экрана: обзор Application Insights и строка подключения.

  4. Замените заполнитель "YOUR_CONNECTION_STRING" в коде JavaScript строкой подключения , скопированной в буфер обмена.

    Формат connectionString должен соответствовать "InstrumentationKey=xxxx;....". Если указанная строка не соответствует этому формату, процесс загрузки пакета SDK завершается сбоем.

    Строка подключения не считается маркером безопасности или ключом. Дополнительные сведения см. в статье о том, требуют ли новые регионы Azure использовать строки подключения?.

    Примечание.

    Пакет SDK JavaScript для Application Insights требует предоставления строка подключения во время инициализации и настройки. Эта строка подключения отображается в виде обычного текста в клиентских браузерах, и нет простого способа использовать проверку подлинности на основе идентификатора Microsoft Entra для телеметрии браузера. Рекомендуется создать отдельный ресурс Application Insights с поддержкой локальной проверки подлинности для телеметрии на основе браузера JavaScript, если необходимо защитить данные телеметрии службы отдельно с помощью проверки подлинности на основе идентификатора Microsoft Entra.

(Необязательно) Добавление конфигурации пакета SDK

Необязательная конфигурация SDK передается SDK Application Insights JavaScript во время инициализации.

Чтобы добавить конфигурацию пакета SDK, добавьте каждый параметр конфигурации непосредственно в connectionString. Например:

Снимок экрана: код JavaScript с параметрами конфигурации пакета SDK, добавленными и выделенными.

(Необязательно) Добавление расширенной конфигурации пакета SDK

Если вы хотите использовать дополнительные функции, предоставляемые подключаемыми модулями для конкретных платформ, и при необходимости включите подключаемый модуль Click Analytics, см. следующие сведения:

Подтверждение передачи данных

  1. Перейдите к ресурсу Application Insights, для которому включен пакет SDK.

  2. В меню ресурсов Application Insights слева в разделе "Исследование" выберите область поиска транзакций .

  3. Откройте раскрывающееся меню "Типы событий " и выберите все , чтобы снять флажки в меню.

  4. В раскрывающемся меню типов событий выберите:

    • Просмотр страницы для Application Insights Azure Monitor для мониторинга реальных пользователей
    • Настраиваемое событие для плагина автоматического сбора Click Analytics.

    Отображение данных на портале может занять несколько минут. Если единственные данные, которые вы видите, это исключение сбоя загрузки, см. статью "Устранение неполадок с загрузкой пакета SDK для веб-приложений JavaScript".

    В некоторых случаях, если на одной странице запущено несколько экземпляров разных версий Application Insights, во время инициализации могут возникать ошибки. В этих случаях и появившемся сообщении об ошибке см. статью "Запуск нескольких версий пакета SDK JavaScript для Application Insights" в одном сеансе. При возникновении одной из этих ошибок попробуйте изменить пространство имен с помощью name параметра. Дополнительные сведения см. в статье о конфигурации скрипта загрузчика пакета SDK Для JavaScript (Web).

    Снимок экрана: область поиска транзакций Application Insights на портале Azure с выбранным параметром

  5. Если вы хотите запросить данные для подтверждения потока данных:

    1. Выберите Журналы в левой области.

      При выборе журналов откроется диалоговое окно "Запросы ", содержащее примеры запросов, относящихся к данным.

    2. Выберите "Выполнить " для примера запроса, который требуется запустить.

    3. При необходимости можно обновить пример запроса или написать новый запрос с помощью языка запросов Kusto (KQL).

      Основные операторы KQL см. в разделе «Изучите общие операторы KQL».

Поддержка

Следующие шаги