Mengaktifkan Pemantauan Penggunaan Nyata di Azure Monitor Application Insights

2025-05-24

SDK JavaScript Microsoft Azure Monitor Application Insights mengumpulkan data penggunaan, yang memungkinkan Anda memantau dan menganalisis performa aplikasi web JavaScript. Ini biasanya disebut sebagai Pemantauan Pengguna Nyata atau RUM.

Application Insights JavaScript SDK memiliki SDK dasar dan beberapa plugin untuk lebih banyak kemampuan.

Kami mengumpulkan tampilan halaman secara default. Tetapi jika Anda juga ingin mengumpulkan klik secara default, pertimbangkan untuk menambahkan plug-in Koleksi Otomatis Analitik Klik:

Jika Anda menambahkan ekstensi kerangka kerja, yang dapat Anda lakukan setelah mengikuti langkah-langkah untuk memulai, Anda secara opsional dapat menambahkan Click Analytics saat menambahkan ekstensi kerangka kerja tersebut.
Jika Anda tidak menambahkan ekstensi kerangka kerja, tambahkan plug-in Click Analytics setelah Anda mengikuti langkah-langkah untuk memulai.

Kami menyediakan Debug plugin dan Performance plugin untuk debugging/pengujian. Dalam kasus yang jarang terjadi, Dimungkinkan untuk membangun ekstensi Anda sendiri dengan menambahkan plugin kustom.

Prasyarat

Langganan Azure: Membuat langganan Azure secara gratis
Sumber daya Application Insights: Membuat sumber daya Application Insights
Aplikasi yang menggunakan JavaScript

Memulai

Ikuti langkah-langkah di bagian ini untuk melengkapi aplikasi Anda dengan Application Insights JavaScript SDK.

Petunjuk / Saran

Kabar baik! Kami membuatnya lebih mudah untuk mengaktifkan JavaScript dengan injeksi Skrip Pemuat SDK JavaScript (Web) berdasarkan konfigurasi.

Menambahkan kode JavaScript

Dua metode tersedia untuk menambahkan kode untuk mengaktifkan Application Insights melalui Application Insights JavaScript SDK:

Metode	Kapan saya akan menggunakan metode ini?
Skrip Pemuat SDK JavaScript (Web)	Untuk sebagian besar pelanggan, kami merekomendasikan Skrip Pemuat SDK JavaScript (Web) karena Anda tidak perlu memperbarui SDK dan Anda mendapatkan pembaruan terbaru secara otomatis. Selain itu, Anda memiliki kontrol atas halaman mana yang Anda tambahkan SDK JavaScript Application Insights.
paket npm	Anda ingin membawa SDK ke dalam kode Anda dan mengaktifkan IntelliSense. Opsi ini hanya diperlukan untuk pengembang yang memerlukan lebih banyak peristiwa dan konfigurasi kustom. Metode ini diperlukan jika Anda berencana untuk menggunakan React, React Native, atau Angular Framework Extension.

Skrip Pemuat SDK JavaScript (Web)
paket npm

Tempelkan Skrip Pemuat SDK JavaScript (Web) di bagian atas setiap halaman yang ingin Anda aktifkan Application Insights.

Sebaiknya, Anda harus menambahkannya sebagai skrip pertama di bagian Anda <head> sehingga dapat memantau potensi masalah dengan semua dependensi Anda.

Jika Internet Explorer 8 terdeteksi, JavaScript SDK v2.x dimuat secara otomatis.

<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>

(Opsional) Tambahkan atau perbarui konfigurasi Skrip Pemuat JavaScript (Web) opsional, jika Anda perlu mengoptimalkan pemuatan halaman web Anda atau mengatasi kesalahan pemuatan.

Konfigurasi Skrip Pemuat SDK JavaScript (Web)

Nama	Tipe	Wajib diisi?	Deskripsi
Src	benang	Wajib	URL lengkap tempat memuat SDK. Nilai ini digunakan untuk atribut "src" dari tag <script /> yang ditambahkan secara dinamis. Anda dapat menggunakan lokasi CDN publik atau lokasi Anda sendiri yang dihosting secara privat.
nama	benang	Opsional	Nama global untuk SDK yang diinisialisasi. Gunakan pengaturan ini jika Anda perlu menginisialisasi dua SDK yang berbeda secara bersamaan. Nilai defaultnya adalah appInsights, jadi `window.appInsights` adalah referensi ke instans yang diinisialisasi. Catatan: Jika Anda menetapkan nilai nama atau jika instans sebelumnya ditetapkan ke nama global appInsightsSDK, kode inisialisasi SDK mengharuskannya berada di ruang nama global sebagai `window.appInsightsSDK=<name value>` untuk memastikan kerangka Skrip Pemuat JavaScript (Web) SDK yang benar, dan metode proksi diinisialisasi dan diperbarui.
Ld	angka dalam milidetik	Opsional	Menentukan penundaan pemuatan yang akan ditunggu sebelum mencoba memuat SDK. Gunakan pengaturan ini ketika halaman HTML gagal dimuat karena Skrip Pemuat SDK JavaScript (Web) dimuat pada waktu yang salah. Nilai bawaan adalah 0ms setelah berakhirnya waktu tunggu. Jika Anda menggunakan nilai negatif, tag skrip segera ditambahkan ke `<head>` wilayah halaman dan memblokir peristiwa pemuatan halaman hingga skrip dimuat atau gagal.
useXhr	Boolean	Opsional	Pengaturan ini hanya digunakan untuk melaporkan kegagalan pemuatan SDK. Misalnya, pengaturan ini berguna ketika Skrip Pemuat SDK JavaScript (Web) mencegah halaman HTML dimuat, menyebabkan pengambilan() tidak tersedia. Melaporkan upaya pertama untuk menggunakan fetch() jika tersedia, lalu beralih ke XHR. Atur pengaturan ini ke `true` untuk melewati pemeriksaan pengambilan. Pengaturan ini hanya diperlukan di lingkungan di mana fetch tidak dapat mengirimkan kejadian kegagalan, misalnya, ketika Skrip Pemuatan SDK JavaScript (Web) gagal dimuat dengan sukses.
crossOrigin	benang	Opsional	Dengan menyertakan pengaturan ini, tag skrip yang ditambahkan untuk mengunduh SDK menyertakan atribut crossOrigin dengan nilai string ini. Gunakan pengaturan ini saat Anda perlu memberikan dukungan untuk CORS. Ketika tidak ditentukan (default), tidak ada atribut crossOrigin yang ditambahkan. Nilai yang direkomendasikan tidak ditentukan (default), "", atau "anonim". Untuk semua nilai yang valid, lihat dokumentasi atribut HTML lintas asal.
onInit	function(aiSdk) { ... }	Opsional	Fungsi panggilan balik ini dipanggil setelah skrip SDK utama berhasil dimuat dan diinisialisasi dari CDN (berdasarkan nilai src). Fungsi panggilan balik ini berguna ketika Anda perlu menyisipkan penginisialisasi telemetri. Diberikan satu argumen, yang merupakan referensi ke instansi SDK yang dimaksud dan juga dipanggil pula sebelum tampilan halaman awal pertama. Jika SDK sudah dimuat dan diinisialisasi, panggilan balik ini masih dipanggil. CATATAN: Selama pemrosesan array sdk.queue, panggilan balik ini dipanggil. Anda tidak dapat menambahkan item lagi ke antrean karena diabaikan dan dihilangkan. (Ditambahkan sebagai bagian dari Skrip Pemuat SDK JavaScript (Web) versi 5--nilai sv:"5" dalam skrip).
Cr	Boolean	Opsional	Jika SDK gagal dimuat dan nilai titik akhir yang ditentukan adalah `src` lokasi CDN publik, opsi konfigurasi ini mencoba untuk segera memuat SDK dari salah satu titik akhir CDN cadangan berikut: 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 Catatan: az416426.vo.msecnd.net hanya didukung sebagian, jadi tidak disarankan. Jika SDK berhasil dimuat dari endpoint CDN cadangan, SDK dimuat dari yang pertama tersedia, yang ditentukan ketika server melakukan pemeriksaan pemuatan yang berhasil. Jika SDK gagal dimuat dari salah satu titik akhir CDN cadangan, pesan kesalahan Kegagalan SDK muncul. Ketika tidak ditentukan, nilai defaultnya adalah `true`. Jika Anda tidak ingin memuat SDK dari titik akhir CDN cadangan, atur opsi konfigurasi ini ke `false`. Jika Anda memuat SDK dari titik akhir CDN yang dihosting secara privat, opsi konfigurasi ini tidak berlaku.

Gunakan perintah berikut untuk menginstal Microsoft Application Insights JavaScript SDK - Paket web.
```
npm i --save @microsoft/applicationinsights-web
```
Pengetikan disertakan dengan paket ini, sehingga Anda tidak perlu menginstal paket pengetikan terpisah.
Tambahkan JavaScript berikut ke kode aplikasi Anda.

Di mana dan juga cara Anda menambahkan kode JavaScript ini bergantung pada kode aplikasi Anda. Misalnya, Anda mungkin dapat menambahkannya persis seperti yang muncul di bawah ini atau Anda mungkin perlu membuat pembungkus di sekitarnya.
```
import { ApplicationInsights } from '@microsoft/applicationinsights-web'

const appInsights = new ApplicationInsights({ config: {
  connectionString: 'YOUR_CONNECTION_STRING'
  /* ...Other Configuration Options... */
} });
appInsights.loadAppInsights();
appInsights.trackPageView();
```

Tempelkan string koneksi di lingkungan Anda

Untuk menempelkan string koneksi di lingkungan Anda, ikuti langkah-langkah berikut:

Navigasi ke panel Gambaran Umum sumber daya Application Insights Anda.
Temukan String Koneksi.
Pilih ikon Salin ke clipboard untuk menyalin string koneksi ke clipboard.
Ganti tempat penampung "YOUR_CONNECTION_STRING" dalam kode JavaScript dengan string koneksi Anda yang sudah disalin ke clipboard.

connectionString Format harus mengikuti "InstrumentationKey=xxxx;....". Jika string yang disediakan tidak memenuhi format ini, proses pemuatan SDK gagal.

string koneksi tidak dianggap sebagai token atau kunci keamanan. Untuk informasi selengkapnya, lihat Apakah wilayah Azure baru memerlukan penggunaan string koneksi?.

Catatan

Application Insights JavaScript SDK mengharuskan string koneksi disediakan selama inisialisasi dan konfigurasi. String koneksi ini terlihat dalam teks biasa di browser klien, dan tidak ada cara mudah untuk menggunakan autentikasi berbasis ID Microsoft Entra untuk telemetri browser. Kami menyarankan agar Anda mempertimbangkan untuk membuat sumber daya Application Insights terpisah dengan autentikasi lokal yang diaktifkan untuk telemetri berbasis browser JavaScript jika Anda perlu mengamankan telemetri layanan secara terpisah menggunakan autentikasi berbasis ID Microsoft Entra.

(Opsional) Menambahkan konfigurasi SDK

Konfigurasi SDK opsional diteruskan ke Application Insights JavaScript SDK selama inisialisasi.

Untuk menambahkan konfigurasi SDK, tambahkan setiap opsi konfigurasi langsung di bawah connectionString. Contohnya:

(Opsional) Menambahkan konfigurasi SDK tingkat lanjut

Jika Anda ingin menggunakan fitur tambahan yang disediakan oleh plugin untuk kerangka kerja tertentu dan secara opsional mengaktifkan plug-in Click Analytics, lihat:

Mengonfirmasi data sedang mengalir

Buka sumber daya Application Insights tempat Anda mengaktifkan SDK.
Di menu sumber daya Application Insights di sebelah kiri, di bawah Selidiki, pilih panel Pencarian transaksi .
Buka menu dropdown Jenis peristiwa dan pilih Pilih semua untuk menghapus kotak centang di menu.
Dari menu dropdown 'Jenis Peristiwa', pilih:
- Penayangan Halaman untuk Pemantauan Pengguna Nyata dengan Azure Monitor Application Insights
- Event Kustom untuk plug-in Pengumpulan Otomatis Click Analytics.
Mungkin perlu waktu beberapa menit hingga data muncul di portal. Jika satu-satunya data yang Anda lihat muncul adalah pengecualian kegagalan pemuatan, lihat Memecahkan masalah kegagalan pemuatan SDK untuk aplikasi web JavaScript.

Dalam beberapa kasus, jika beberapa instans dari berbagai versi Application Insights berjalan di halaman yang sama, kesalahan dapat terjadi selama inisialisasi. Untuk kasus ini dan pesan kesalahan yang muncul, lihat Menjalankan beberapa versi SDK JavaScript Application Insights dalam satu sesi. Jika Anda mengalami salah satu kesalahan ini, coba ubah namespace dengan menggunakan pengaturan name. Untuk informasi selengkapnya, lihat Konfigurasi Skrip Pemuat SDK JavaScript (Web).
Jika Anda ingin meminta data untuk mengonfirmasi bahwa data sedang mengalir:
1. Pilih Log di panel kiri.
  
  Saat Anda memilih Log, dialog Kueri terbuka, yang berisi kueri sampel yang relevan dengan data Anda.
2. Pilih Jalankan untuk kueri sampel yang ingin Anda jalankan.
3. Jika diperlukan, Anda dapat memperbarui kueri sampel atau menulis kueri baru dengan menggunakan Bahasa Kueri Kusto (KQL).
  
  Untuk mempelajari operator KQL yang umum, lihat Pelajari operator KQL umum.

Dukungan

Jika Anda tidak dapat menjalankan aplikasi atau tidak mendapatkan data seperti yang diharapkan, lihat artikel pemecahan masalah khusus.
Untuk pertanyaan umum tentang JavaScript SDK, lihat FAQ.
Untuk masalah dukungan Azure, buka tiket dukungan Azure.
Untuk daftar masalah terbuka yang terkait dengan Application Insights JavaScript SDK, lihat Halaman Masalah GitHub.
Gunakan ekstensi Penampil Telemetri untuk mencantumkan peristiwa individual dalam payload jaringan dan memantau panggilan internal dalam Application Insights.

Langkah berikutnya

Untuk meninjau tanya jawab umum (FAQ), lihat Tanya Jawab Umum JavaScript SDK
Menjelajahi pengalaman penggunaan Application Insights
Lacak tampilan halaman
Melacak peristiwa dan metrik kustom
Menyisipkan penginisialisasi telemetri JavaScript
Menambahkan konfigurasi JavaScript SDK
Lihat catatan rilis terperinci di GitHub untuk pembaruan dan perbaikan bug
Mengkueri data di Analitik Log

Bagikan melalui