Mengaktifkan Pemantauan Pengguna Nyata Azure Monitor Application Insights
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 ingin juga mengumpulkan klik secara default, pertimbangkan untuk menambahkan plug-in Koleksi Otomatis Click Analytics:
- Jika Anda menambahkan ekstensi kerangka kerja, yang dapat Anda tambahkan setelah mengikuti langkah-langkah untuk memulai, Anda dapat secara opsional menambahkan Click Analytics saat menambahkan ekstensi kerangka kerja.
- Jika Anda tidak menambahkan ekstensi kerangka kerja, tambahkan plug-in Click Analytics setelah Anda mengikuti langkah-langkah untuk memulai.
Kami menyediakan plugin Debug dan plugin Performa untuk penelusuran kesalahan/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.
Tip
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. |
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 | string | 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 | string | 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 namespace window.appInsightsSDK=<name value> layanan global untuk memastikan kerangka Skrip Pemuat JavaScript (Web) SDK yang benar, dan metode proksi diinisialisasi dan diperbarui. |
ld | angka dalam ms | 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 defaultnya adalah 0ms setelah batas waktu. 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 fallback ke XHR. Atur pengaturan ini ke true untuk melewati pemeriksaan pengambilan. Pengaturan ini hanya diperlukan di lingkungan di mana pengambilan tidak dapat mengirimkan peristiwa kegagalan, misalnya, ketika Skrip Pemuat SDK JavaScript (Web) gagal dimuat. |
crossOrigin | string | 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. Ini diteruskan satu argumen, yang merupakan referensi ke instans SDK yang sedang dipanggil dan juga dipanggil sebelum tampilan halaman awal pertama. Jika SDK telah 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:
Jika SDK berhasil dimuat dari titik akhir CDN cadangan, SDK dimuat dari yang pertama tersedia, yang ditentukan ketika server melakukan pemeriksaan beban 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. |
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 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?.
(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:
- Tampilan Halaman untuk Pemantauan Pengguna Nyata Azure Monitor Application Insights
- Peristiwa Kustom untuk plug-in Koleksi Otomatis Click Analytics.
Mungkin perlu waktu beberapa menit hingga data muncul di portal. Jika satu-satunya data yang Anda lihat muncul adalah pengecualian kegagalan beban, 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
name
pengaturan . Untuk informasi selengkapnya, lihat Konfigurasi Skrip Pemuat SDK JavaScript (Web).Jika Anda ingin mengkueri data untuk mengonfirmasi bahwa data mengalir:
Pilih Log di panel kiri.
Saat Anda memilih Log, dialog Kueri terbuka, yang berisi kueri sampel yang relevan dengan data Anda.
Pilih Jalankan untuk kueri sampel yang ingin Anda jalankan.
Jika diperlukan, Anda dapat memperbarui kueri sampel atau menulis kueri baru dengan menggunakan Bahasa Kueri Kusto (KQL).
Untuk operator KQL penting, lihat Mempelajari operator KQL umum.
Tanya jawab umum
Bagian ini menyediakan jawaban atas pertanyaan umum.
Apa saja jumlah pengguna dan sesi?
- JavaScript SDK menetapkan cookie pengguna di klien web, untuk mengidentifikasi pengguna yang kembali, dan cookie sesi ke aktivitas grup.
- Jika tidak ada skrip sisi klien, Anda dapat mengatur cookie di server.
- Jika satu pengguna nyata menggunakan situs Anda di browser yang berbeda, atau dengan menggunakan penjelajahan pribadi/penyamaran, atau komputer yang berbeda, mereka dihitung lebih dari sekali.
- Untuk mengidentifikasi pengguna yang masuk di seluruh komputer dan browser, tambahkan panggilan ke setAuthenticatedUserContext().
Apa itu performa/overhead JavaScript SDK?
Application Insights JavaScript SDK memiliki overhead minimal di situs web Anda. Hanya dengan 36 KB gzipped, dan hanya membutuhkan ~ 15 ms untuk diinisialisasi, SDK menambahkan jumlah waktu muat yang dapat diabaikan ke situs web Anda. Komponen minimal pustaka dengan cepat dimuat saat Anda menggunakan SDK, dan skrip lengkap diunduh di latar belakang.
Selain itu, saat skrip diunduh dari CDN, semua pelacakan halaman Anda diantrekan, sehingga Anda tidak kehilangan telemetri apa pun selama seluruh siklus hidup halaman Anda. Proses penyiapan ini memberi sistem analitik yang mulus bagi halaman Anda, sistem yang tidak terlihat oleh pengguna Anda.
Browser apa yang didukung oleh JavaScript SDK?
Chrome Terbaru ✔ | Firefox Terbaru ✔ | v3.x: IE 9+ & Microsoft Edge ✔ v2.x: Kompatibel IE 8+ & Microsoft Edge ✔ |
Opera Terbaru ✔ | Safari Terbaru ✔ |
Di mana saya dapat menemukan contoh kode untuk JavaScript SDK?
Untuk sampel yang dapat dijalankan, lihat Sampel SDK JavaScript Application Insights.
Apa kompatibilitas ES3/Internet Explorer 8 dengan JavaScript SDK?
Kita perlu mengambil langkah-langkah yang diperlukan untuk memastikan bahwa SDK ini terus "berfungsi" dan tidak merusak eksekusi JavaScript saat dimuat oleh browser yang lebih lama. Akan sangat ideal untuk tidak mendukung browser lama, tetapi banyak pelanggan besar tidak dapat mengontrol browser mana yang dipilih pengguna mereka untuk digunakan.
Pernyataan ini tidak berarti bahwa kami hanya mendukung serangkaian fitur umum terendah. Kita perlu mempertahankan kompatibilitas kode ES3. Fitur baru perlu ditambahkan dengan cara yang tidak akan merusak penguraian JavaScript ES3 dan ditambahkan sebagai fitur opsional.
Lihat GitHub untuk detail selengkapnya tentang dukungan Internet Explorer 8.
Apakah Sumber terbuka JavaScript SDK?
Ya, Application Insights JavaScript SDK sumber terbuka. Untuk melihat kode sumber atau berkontribusi dalam proyek, lihat repositori GitHub resmi.
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
- 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.