Memantau Aplikasi Pelayar dengan OpenTelemetry

Banyak pasukan pembangunan memanfaatkan OpenTelemetry (OTeL) pada bahagian pelayan untuk mengumpulkan isyarat seperti log, jejak dan metrik daripada aplikasi mereka. Walau bagaimanapun, perkara yang sering diabaikan ialah kuasa instrumentasi penyemak imbas OTeL. Data pemerhatian pihak pelanggan ini boleh memberikan cerapan yang bermakna dan mencipta pandangan menyeluruh tentang prestasi aplikasi dengan menyambungkan jejak antara klien dan pelayan.

Apakah OpenTelemetry?

OpenTelemetry ialah koleksi alatan, API dan SDK yang digunakan untuk menginstrumen, menjana, mengumpul dan mengeksport data telemetri (metrik, log dan surih) untuk analisis bagi memahami prestasi dan gelagat perisian anda.

Jika anda berminat untuk menyelam lebih mendalam tentang OTeL, lihat artikel terbaru kami: Apakah OpenTelemetry dan Mengapa Saya Perlu Prihatin?.

OpenTelemetry dalam Aplikasi Pelayar

Mengenai apl penyemak imbas, OpenTelemetry boleh memberikan cerapan berharga tentang:

1. Prestasi Pemuatan Dokumen
2. Interaksi Pengguna
3. Permintaan Rangkaian (XMLHttpRequest dan Ambil)

Cerapan ini membolehkan pembangun mengenal pasti kesesakan, menjejak interaksi pengguna dan memantau permintaan rangkaian tanpa instrumentasi manual. Perkara yang dinyatakan di atas ialah data yang anda perolehi dengan agak mudah dengan memanfaatkan instrumentasi auto OTeL tetapi anda juga boleh menambah instrumentasi manual untuk mengumpul jejak pada mana-mana kod lain dalam apl sebelah pelanggan anda.

Sorotan dan OpenTelemetry

SDK JavaScript Highlight menawarkan sokongan terbina dalam untuk mengumpul data OpenTelemetry daripada aplikasi pihak pelanggan. Penyepaduan ini membolehkan anda memasukkan pengesanan OpenTelemetry dengan lancar ke dalam aplikasi web anda.

Mendayakan OpenTelemetry dengan Sorotan

Pengumpulan data OTeL masih dalam versi beta, jadi anda perlu mendayakannya secara eksplisit dengan menetapkan pilihan konfigurasi enableOtelTracing apabila memulakan SDK:

H.init({
  // ...
  enableOtelTracing: true
})

Dengan konfigurasi mudah ini, Highlight secara automatik mengumpulkan kebanyakan data OpenTelemetry yang anda perlukan dengan memanfaatkan instrumentasi auto dan melakukan beberapa pemprosesan tambahan untuk menjadikan data lebih berguna dalam Highlight.

Menyambung Jejak Pelanggan dan Pelayan

Salah satu ciri OpenTelemetry yang paling berkuasa ialah keupayaan untuk menyambungkan jejak merentasi perkhidmatan dan persekitaran yang berbeza. SDK Highlight memudahkan perkara ini melalui penyebaran konteks, membolehkan anda membuat jejak hujung ke hujung yang merangkumi interaksi pengguna dalam penyemak imbas sehingga ke perkhidmatan hujung belakang anda.

Begini cara ia berfungsi:

1. Permulaan Jejak: Apabila interaksi pengguna atau permintaan rangkaian dimulakan dalam penyemak imbas, SDK mencipta rentang baharu atau meneruskan jejak sedia ada.
2. Suntikan Pengepala: Untuk permintaan HTTP keluar (kedua-dua XHR dan Ambil), SDK secara automatik menyuntik pengepala konteks surih ke dalam permintaan. Pengepala ini biasanya termasuk:
   • traceparent: Mengandungi ID surih, ID rentang induk dan bendera surih.
   • keadaan surih: Membawa maklumat surih khusus vendor.
3. Penerimaan Sebelah Pelayan: SDK sebelah pelayan Serlahkan mengekstrak pengepala ini dan meneruskan jejak, memautkan rentang sebelah pelayan ke surih sebelah klien.
4. Penyelesaian Jejak: Apabila permintaan selesai dan dikembalikan kepada pelanggan, jejak penuh, termasuk kedua-dua rentang pelanggan dan pelayan, boleh divisualisasikan dalam UI Highlight.

Sambungan antara jejak pelanggan dan pelayan ini menyediakan keterlihatan hujung ke hujung dan merupakan pautan yang diperlukan untuk cerapan kelajuan halaman dan korelasi ralat klien/pelayan.

Untuk pemaparan sebelah pelayan di mana kod dilaksanakan pada pelayan sebelum HTML dihantar ke penyemak imbas, konteks jejak disebarkan melalui teg yang ditambahkan pada HTML.

Contoh Kitaran Hayat Surih Pelanggan-Pelayan

Berikut ialah contoh ringkas tentang cara ini berfungsi dalam amalan:

1. Seorang pengguna mengklik butang dalam aplikasi web anda.
2. SDK Sorotan mencipta tempoh untuk interaksi pengguna ini.
3. Interaksi ini mencetuskan panggilan API ke bahagian belakang anda.
4. SDK secara automatik menyuntik pengepala surih ke dalam panggilan API ini.
5. Halaman belakang anda menerima permintaan, mengekstrak konteks jejak dan meneruskan jejak.
6. Halaman belakang memproses permintaan dan menghantar respons.
7. Pelanggan menerima respons dan melengkapkan rentang.

Hasilnya ialah jejak tunggal yang menunjukkan perjalanan lengkap permintaan, daripada interaksi pengguna awal dalam penyemak imbas, melalui perkhidmatan bahagian belakang anda dan kembali kepada pelanggan.

Faedah

Sambungan antara jejak pelanggan dan pelayan ini memberikan beberapa faedah:

• End-to-End Visibility: You can trace a user's action all the way through your system, making it easier to diagnose issues and understand performance bottlenecks.
• Performance Optimization: By seeing the complete picture, you can identify whether performance issues are occurring on the client-side, server-side, or in the network communication between them.
• Error Correlation: If an error occurs, you can see the full context of what led to that error, including any relevant client-side actions or server-side processing.

By leveraging Highlight's OpenTelemetry integration, you can gain these insights with minimal configuration, allowing you to focus on improving your application's performance and user experience.

Handling Server-Initiated Traces

When a request for a page is made by fetching a new URL in the browser we don't have the JS SDK initialized in the browser until the server returns the HTML and renders the page, then fetches all the JS assets to render the app. In this case you pass the trace ID from the server to the client in a tag to handoff the trace initiated on the server to the client.

Here is an example of what the meta tag looks like in the browser:

<meta
  name="traceparent"
  content="00-ab42124a3c573678d4d8b21ba52df3bf-d21f7bc17caa5aba-01"
>

Note that the Highlight server SDKs often have helpers to create this tag. Here's an example using the Highlight Ruby SDK

<%= highlight_traceparent_meta %>

The browser OTeL instrumentation gathers timing information from window.performance.timing and creates spans for all the different timing events in the browser. This instrumentation parses the tag and associates all the spans it creates with trace data from the tag. This is illustrated in the screenshot of the flame graph below.

Here's how to parse what's going on in this flame graph:

1. The documentLoad span shows the full timing from submitting the URL in the browser to be loaded to having all the assets loaded and the page being fully interactive. The timing data for this span is gathered from window.performance.timing since we can't actually initiate a span before the JS loads.
2. The PagesController#home is the first span created on the server. You can trace the server code execution required to render the HTML that will be returned to the browser. When the HTML is returned to the browser the documentFetch span finishes.
3. After the HTML is loaded int he browser you can see the requests for the page's resources (all the JS and CSS files), these are the resourceFetch spans.

These resource timings provide a full picture of your app's load time, making it clear where the opportunities are to improve performance and provide a better UX.

Leveraging OpenTelemetry Data in Highlight

Collecting OpenTelemetry data is one thing, but gleaning actionable insights is another. You need some way of visualizing the data (like the flame graph shown above) in order to get actionable insights. Highlight exposes this data a few ways.

Viewing Traces in Highlight

When you open Highlight's UI, you'll find a dedicated section for traces. Here, you can see a list of all the traces collected from your application, including those that span from the browser to your backend services.

1. Trace List: This view provides an overview of all traces, typically sorted by timestamp. You can filter and search for specific traces based on various criteria such as duration, error status, or custom attributes.

2. Trace Detail View: Clicking on a specific trace opens a detailed view, showing the full journey of a request or user interaction. This view includes:

   • A flame graph visualization of the trace, showing the hierarchy and timing of spans.
   • Detailed information about each span, including start time, duration, and any custom attributes or events.
   • For spans representing network requests, you can see details like HTTP method, status code, and headers.

3. Cross-Service Tracing: For traces that span from the browser to your backend services, you'll see a seamless view of the entire request lifecycle. This makes it easy to identify whether performance issues are occurring on the client-side, server-side, or in the network communication between them.

Analyzing Resource Timings and Web Vitals

Highlight's metrics product provides powerful tools for analyzing resource timings and Web Vitals, which are crucial for understanding and optimizing your application's performance.

1. Papan Pemuka Masa Sumber: Papan pemuka ini memberikan gambaran keseluruhan tentang tempoh masa yang diambil untuk memuatkan pelbagai sumber pada halaman web anda. Anda boleh lihat:

   • Masa muat untuk pelbagai jenis sumber (JS, CSS, imej, dll.)
   • Masa yang diluangkan untuk carian DNS, sambungan TCP, rundingan TLS dan banyak lagi untuk setiap sumber
   • Visualisasi yang membantu mengenal pasti sumber pemuatan perlahan atau kesesakan dalam proses pemuatan

2. Metrik Vitals Web: Serlahkan runut dan paparkan metrik Web Vitals utama, termasuk:

   • Cat Kandungan Terbesar (LCP): Mengukur prestasi pemuatan
   • Kelewatan Input Pertama (FID): Mengukur interaktiviti
   • Anjakan Reka Letak Kumulatif (CLS): Mengukur kestabilan visual
   • First Contentful Paint (FCP): Mengukur masa dari navigasi hingga apabila penyemak imbas memaparkan bit pertama kandungan

3. Aliran Prestasi: Sorotan membolehkan anda menjejaki metrik ini dari semasa ke semasa, membantu anda mengenal pasti:

   • Kesan perubahan kod atau penggunaan pada prestasi
   • Degradasi beransur-ansur yang mungkin tidak disedari
   • Peningkatan hasil daripada usaha pengoptimuman

4. Segmentasi dan Penapisan: Anda boleh membahagikan dan menapis metrik ini berdasarkan pelbagai faktor seperti:

   • Jenis peranti (mudah alih, desktop, tablet)
   • Pelayar
   • Lokasi geografi
   • Atribut tersuai yang telah anda tentukan

Dengan menggabungkan data surih terperinci dengan metrik prestasi peringkat tinggi ini, anda boleh mendapatkan paparan menyeluruh tentang prestasi aplikasi anda. Ini membolehkan anda mengenal pasti isu dengan cepat, memahami puncanya dan mengukur kesan usaha pengoptimuman anda.

Kesimpulan

OpenTelemetry menawarkan alat yang berkuasa untuk memantau dan mengoptimumkan aplikasi penyemak imbas. Dengan memanfaatkan integrasi OpenTelemetry Highlight, pembangun boleh mengumpul cerapan yang boleh diambil tindakan dengan konfigurasi yang minimum.

Sama ada anda berhadapan dengan isu prestasi pihak pelanggan, kesesakan sebelah pelayan atau perjalanan pengguna yang kompleks yang merangkumi pelbagai perkhidmatan, OpenTelemetry dan Highlight memberikan keterlihatan yang anda perlukan untuk menyampaikan aplikasi web yang luar biasa.

Atas ialah kandungan terperinci Memantau Aplikasi Pelayar dengan OpenTelemetry. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!