Giám sát hiệu suất Firebase cho web

1. Khái quát chung

Trong lớp học lập trình này, bạn sẽ tìm hiểu cách sử dụng Giám sát hiệu suất Firebase để đo lường hiệu suất của ứng dụng web trò chuyện. Truy cập https://fireperf-friendchat.web.app/ để xem bản demo trực tiếp.

3b1284f5144b54f6.png

Bạn sẽ học được gì

  • Cách thêm Giám sát hiệu suất Firebase vào ứng dụng web của bạn để nhận các số liệu sẵn có (tải trang và yêu cầu mạng).
  • Cách đo một đoạn mã cụ thể bằng dấu vết tùy chỉnh.
  • Cách ghi lại số liệu tùy chỉnh, bổ sung được gắn với dấu vết tùy chỉnh.
  • Cách phân đoạn sâu hơn dữ liệu hiệu suất của bạn bằng các thuộc tính tùy chỉnh.
  • Cách sử dụng bảng điều khiển giám sát hiệu suất để hiểu hiệu suất ứng dụng web của bạn.

Những gì bạn cần

  • IDE hoặc trình soạn thảo văn bản bạn chọn, chẳng hạn như WebStorm , Atom , Sublime hoặc VS Code
  • Một thiết bị đầu cuối/bảng điều khiển
  • Trình duyệt bạn chọn, chẳng hạn như Chrome
  • Mã mẫu của lớp học lập trình (Xem phần tiếp theo của lớp học lập trình này để biết cách lấy mã.)

2. Lấy mã mẫu

Sao chép kho lưu trữ GitHub của lớp học lập trình từ dòng lệnh:

git clone https://github.com/firebase/codelab-friendlychat-web

Ngoài ra, nếu bạn chưa cài đặt git, bạn có thể tải xuống repo dưới dạng tệp zip .

Nhập ứng dụng khởi đầu

Sử dụng IDE của bạn, mở hoặc nhập thư mục 📁 performance-monitoring-start từ ​​kho lưu trữ nhân bản. 📁 Thư mục performance-monitoring-start này chứa mã bắt đầu cho lớp học lập trình, một ứng dụng web trò chuyện.

3. Tạo và thiết lập dự án Firebase

Tạo dự án Firebase

  1. Trong bảng điều khiển Firebase , nhấp vào Thêm dự án .
  2. Đặt tên cho dự án Firebase của bạn FriendlyChat .

Hãy nhớ ID dự án cho dự án Firebase của bạn.

  1. Nhấp vào Tạo dự án .

Thêm ứng dụng web Firebase vào dự án

  1. Nhấp vào biểu tượng trang web 58d6543a156e56f9.png để tạo một ứng dụng web Firebase mới.
  2. Đăng ký ứng dụng với biệt hiệu Friendly Chat , sau đó chọn hộp bên cạnh Đồng thời thiết lập Firebase Hosting cho ứng dụng này .
  3. Nhấn vào Đăng ký ứng dụng .
  4. Nhấp qua các bước còn lại. Bây giờ bạn không cần phải làm theo hướng dẫn trên màn hình; những điều này sẽ được đề cập trong các bước sau của lớp học lập trình này.

ea9ab0db531a104c.png

Cho phép đăng nhập Google để xác thực Firebase

Để cho phép người dùng đăng nhập vào ứng dụng trò chuyện bằng tài khoản Google của họ, chúng tôi sẽ sử dụng phương thức đăng nhập Google .

Bạn sẽ cần kích hoạt đăng nhập bằng Google :

  1. Trong bảng điều khiển Firebase, tìm phần Phát triển ở bảng điều khiển bên trái.
  2. Nhấp vào Xác thực , sau đó nhấp vào tab Phương thức đăng nhập ( đi tới bảng điều khiển ).
  3. Kích hoạt nhà cung cấp dịch vụ đăng nhập Google rồi nhấp vào Lưu .

7f3040a646c2e502.png

Kích hoạt Cloud Firestore

Ứng dụng web sử dụng Cloud Firestore để lưu tin nhắn trò chuyện và nhận tin nhắn trò chuyện mới.

Bạn sẽ cần kích hoạt Cloud Firestore:

  1. Trong phần Phát triển của bảng điều khiển Firebase, hãy nhấp vào Cơ sở dữ liệu .
  2. Nhấp vào Tạo cơ sở dữ liệu trong ngăn Cloud Firestore.
  3. Chọn tùy chọn Bắt đầu ở chế độ thử nghiệm , sau đó nhấp vào Bật sau khi đọc tuyên bố từ chối trách nhiệm về các quy tắc bảo mật.

Mã khởi đầu cho lớp học lập trình này bao gồm các quy tắc an toàn hơn. Chúng tôi sẽ triển khai chúng sau trong lớp học lập trình.

24bd1a097492eac6.png

Kích hoạt bộ nhớ đám mây

Ứng dụng web sử dụng Cloud Storage cho Firebase để lưu trữ, tải lên và chia sẻ hình ảnh.

Bạn sẽ cần bật Cloud Storage:

  1. Trong phần Phát triển của bảng điều khiển Firebase, hãy nhấp vào Bộ nhớ .
  2. Nhấp vào Bắt đầu .
  3. Đọc tuyên bố từ chối trách nhiệm về các quy tắc bảo mật cho dự án Firebase của bạn rồi nhấp vào Hiểu rồi .

Mã bắt đầu bao gồm một quy tắc bảo mật cơ bản mà chúng tôi sẽ triển khai sau trong lớp học lập trình.

4. Cài đặt giao diện dòng lệnh Firebase

Giao diện dòng lệnh Firebase (CLI) cho phép bạn sử dụng Firebase Hosting để phân phát ứng dụng web cục bộ cũng như triển khai ứng dụng web cho dự án Firebase của bạn.

  1. Cài đặt CLI bằng cách làm theo các hướng dẫn sau trong tài liệu Firebase.
  2. Xác minh rằng CLI đã được cài đặt chính xác bằng cách chạy lệnh sau trong thiết bị đầu cuối:
firebase --version

Đảm bảo rằng phiên bản Firebase CLI của bạn là v8.0.0 trở lên.

  1. Cho phép Firebase CLI bằng cách chạy lệnh sau:
firebase login

Chúng tôi đã thiết lập mẫu ứng dụng web để lấy cấu hình ứng dụng của bạn cho Firebase Hosting từ thư mục cục bộ của ứng dụng (kho lưu trữ mà bạn đã sao chép trước đó trong lớp học lập trình). Nhưng để lấy cấu hình, chúng tôi cần liên kết ứng dụng của bạn với dự án Firebase.

  1. Đảm bảo rằng dòng lệnh của bạn đang truy cập vào thư mục performance-monitoring-start của ứng dụng.
  2. Liên kết ứng dụng của bạn với dự án Firebase bằng cách chạy lệnh sau:
firebase use --add
  1. Khi được nhắc, hãy chọn ID dự án của bạn rồi đặt bí danh cho dự án Firebase của bạn.

Bí danh rất hữu ích nếu bạn có nhiều môi trường (sản xuất, dàn dựng, v.v.). Tuy nhiên, đối với lớp học lập trình này, chúng ta hãy chỉ sử dụng bí danh default .

  1. Thực hiện theo các hướng dẫn còn lại trong dòng lệnh của bạn.

5. Tích hợp với Giám sát hiệu suất Firebase

Có nhiều cách khác nhau để tích hợp với SDK giám sát hiệu suất Firebase dành cho web (tham khảo tài liệu để biết chi tiết). Trong lớp học lập trình này, chúng tôi sẽ kích hoạt tính năng giám sát hiệu suất từ ​​URL lưu trữ .

Thêm giám sát hiệu suất và khởi tạo Firebase

  1. Mở tệp src/index.js , sau đó thêm dòng sau bên dưới TODO để bao gồm SDK giám sát hiệu suất Firebase.

chỉ mục.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';
  1. Chúng tôi cũng cần khởi tạo SDK Firebase với đối tượng cấu hình chứa thông tin về dự án Firebase và ứng dụng web mà chúng tôi muốn sử dụng. Vì chúng tôi đang sử dụng Firebase Hosting nên bạn có thể nhập một tập lệnh đặc biệt sẽ thực hiện cấu hình này cho bạn. Đối với lớp học lập trình này, chúng tôi đã thêm dòng sau cho bạn vào cuối tệp public/index.html nhưng hãy kiểm tra kỹ xem nó có ở đó không.

chỉ mục.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
  1. Trong tệp src/index.js , hãy thêm dòng sau bên dưới TODO để khởi tạo giám sát hiệu suất.

chỉ mục.js

// TODO: Initialize Firebase Performance Monitoring.
getPerformance();

Giám sát hiệu suất giờ đây sẽ tự động thu thập số liệu yêu cầu mạng và tải trang cho bạn khi người dùng sử dụng trang web của bạn! Tham khảo tài liệu để tìm hiểu thêm về dấu vết tải trang tự động.

Thêm thư viện polyfill độ trễ đầu vào đầu tiên

Độ trễ đầu vào đầu tiên rất hữu ích vì trình duyệt phản hồi tương tác của người dùng mang lại cho người dùng ấn tượng đầu tiên về khả năng phản hồi của ứng dụng của bạn.

Độ trễ đầu vào đầu tiên bắt đầu khi người dùng tương tác lần đầu với một thành phần trên trang, chẳng hạn như nhấp vào nút hoặc siêu liên kết. Quá trình này dừng ngay sau khi trình duyệt có thể phản hồi thông tin đầu vào, nghĩa là trình duyệt không bận tải hoặc phân tích cú pháp nội dung của bạn.

Thư viện polyfill này là tùy chọn để tích hợp giám sát hiệu suất.

Mở tệp public/index.html , sau đó bỏ ghi chú dòng sau.

chỉ mục.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

Tại thời điểm này, bạn đã hoàn tất quá trình tích hợp với Giám sát hiệu suất Firebase trong mã của mình!

Trong các bước sau, bạn tìm hiểu về cách thêm dấu vết tùy chỉnh bằng cách sử dụng Giám sát hiệu suất Firebase. Nếu bạn chỉ muốn thu thập dấu vết tự động, hãy chuyển đến phần "Triển khai và bắt đầu gửi hình ảnh".

6. Thêm dấu vết tùy chỉnh vào ứng dụng của bạn

Giám sát hiệu suất cho phép bạn tạo dấu vết tùy chỉnh . Dấu vết tùy chỉnh là một báo cáo về khoảng thời gian của một khối thực thi trong ứng dụng của bạn. Bạn xác định điểm bắt đầu và kết thúc của dấu vết tùy chỉnh bằng cách sử dụng API do SDK cung cấp.

  1. Trong tệp src/index.js , lấy một đối tượng hiệu suất, sau đó tạo dấu vết tùy chỉnh để tải lên thông báo hình ảnh.

chỉ mục.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
  1. Để ghi lại một dấu vết tùy chỉnh, bạn cần chỉ định điểm bắt đầu và điểm kết thúc cho dấu vết. Bạn có thể coi dấu vết như một bộ đếm thời gian.

chỉ mục.js

// TODO: Start the "timer" for the custom trace.
t.start();

 ...

    // TODO: Stop the "timer" for the custom trace.
    t.stop();

Bạn đã xác định thành công dấu vết tùy chỉnh! Sau khi triển khai mã của bạn, thời lượng của dấu vết tùy chỉnh sẽ được ghi lại nếu người dùng gửi tin nhắn hình ảnh. Điều này sẽ cho bạn ý tưởng về việc người dùng trong thế giới thực sẽ mất bao lâu để gửi hình ảnh trong ứng dụng trò chuyện của bạn.

7. Thêm số liệu tùy chỉnh vào ứng dụng của bạn.

Bạn có thể định cấu hình thêm dấu vết tùy chỉnh để ghi lại số liệu tùy chỉnh cho các sự kiện liên quan đến hiệu suất xảy ra trong phạm vi của nó. Ví dụ: bạn có thể sử dụng số liệu để điều tra xem thời gian tải lên có bị ảnh hưởng bởi kích thước của hình ảnh đối với dấu vết tùy chỉnh mà chúng tôi đã xác định ở bước trước hay không.

  1. Xác định vị trí dấu vết tùy chỉnh từ bước trước (được xác định trong tệp src/index.js của bạn).
  2. Thêm dòng sau bên dưới TODO để ghi lại kích thước của hình ảnh được tải lên.

chỉ mục.js

 ...

// TODO: Record image size.
t.putMetric('imageSize', file.size);

 ...

Số liệu này cho phép giám sát hiệu suất để ghi lại thời lượng theo dõi tùy chỉnh cũng như kích thước hình ảnh được tải lên.

8. Thêm thuộc tính tùy chỉnh vào ứng dụng của bạn

Dựa trên các bước trước đó, bạn cũng có thể thu thập các thuộc tính tùy chỉnh trên dấu vết tùy chỉnh của mình. Thuộc tính tùy chỉnh có thể giúp phân chia dữ liệu theo danh mục dành riêng cho ứng dụng của bạn. Ví dụ: bạn có thể thu thập loại MIME của tệp hình ảnh để điều tra xem loại MIME có thể ảnh hưởng đến hiệu suất như thế nào.

  1. Sử dụng dấu vết tùy chỉnh được xác định trong tệp src/index.js của bạn.
  2. Thêm dòng sau bên dưới TODO để ghi lại loại MIME của hình ảnh được tải lên.

chỉ mục.js

 ...

// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);

 ...

Thuộc tính này cho phép giám sát hiệu suất để phân loại thời lượng theo dõi tùy chỉnh dựa trên loại hình ảnh được tải lên.

9. [Mở rộng] Thêm dấu vết tùy chỉnh với API thời gian của người dùng

SDK giám sát hiệu suất Firebase được thiết kế để có thể tải không đồng bộ và do đó, SDK này sẽ không ảnh hưởng tiêu cực đến hiệu suất của ứng dụng web trong quá trình tải trang. Trước khi SDK được tải, API giám sát hiệu suất Firebase không khả dụng. Trong trường hợp này, bạn vẫn có thể thêm dấu vết tùy chỉnh bằng cách sử dụng API định giờ của người dùng . SDK hiệu suất Firebase sẽ chọn thời lượng từ số đo() và ghi lại chúng dưới dạng dấu vết tùy chỉnh.

Chúng tôi sẽ đo thời lượng tải tập lệnh tạo kiểu ứng dụng bằng API định giờ của người dùng.

  1. Trong tệp public/index.html , hãy thêm dòng sau để đánh dấu thời điểm bắt đầu tải tập lệnh tạo kiểu ứng dụng.

chỉ mục.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>
  1. Thêm các dòng sau để đánh dấu sự kết thúc của quá trình tải tập lệnh tạo kiểu ứng dụng và để đo khoảng thời gian từ khi bắt đầu đến khi kết thúc.

chỉ mục.html

<!-- TODO: Mark the ending of `timer` for loading App Styling script. Measure the duration from start to end. -->
<script type="text/javascript">
  performance && performance.mark('loadStylingEnd');
  performance && performance.measure('loadStyling', 'loadStylingStart', 'loadStylingEnd');
</script>

Mục bạn đã tạo ở đây sẽ được Giám sát hiệu suất Firebase tự động thu thập. Sau này, bạn sẽ có thể tìm thấy dấu vết tùy chỉnh có tên là loadStyling trong bảng điều khiển Hiệu suất Firebase.

10. Triển khai và bắt đầu gửi hình ảnh

Triển khai lên dịch vụ lưu trữ Firebase

Sau khi thêm Giám sát hiệu suất Firebase vào mã của bạn, hãy làm theo các bước sau để triển khai mã của bạn lên Dịch vụ lưu trữ Firebase:

  1. Đảm bảo rằng dòng lệnh của bạn đang truy cập vào thư mục performance-monitoring-start của ứng dụng.
  2. Triển khai các tệp của bạn vào dự án Firebase bằng cách chạy lệnh sau:
firebase deploy
  1. Bảng điều khiển sẽ hiển thị như sau:
=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com
  1. Truy cập ứng dụng web hiện được lưu trữ đầy đủ bằng Firebase Hosting tại hai tên miền phụ Firebase của riêng bạn: https://<projectId>.firebaseapp.comhttps://<projectId>.web.app .

Xác minh rằng giám sát hiệu suất đã được bật

Mở bảng điều khiển Firebase và chuyển đến tab Hiệu suất . Nếu bạn thấy thông báo chào mừng hiển thị "Đã phát hiện SDK" thì bạn đã tích hợp thành công tính năng Giám sát hiệu suất Firebase!

30df67e5a07d03b0.png

Gửi tin nhắn hình ảnh

Tạo một số dữ liệu hiệu suất bằng cách gửi hình ảnh trong ứng dụng trò chuyện của bạn.

  1. Sau khi đăng nhập vào ứng dụng trò chuyện của bạn, hãy nhấp vào nút tải lên hình ảnh 13734cb66773e5a3.png .
  2. Chọn một tập tin hình ảnh bằng cách sử dụng bộ chọn tập tin.
  3. Hãy thử gửi nhiều hình ảnh (một vài mẫu được lưu trữ ở public/images/ ) để bạn có thể kiểm tra việc phân phối số liệu tùy chỉnh và thuộc tính tùy chỉnh.

Tin nhắn mới sẽ hiển thị trong giao diện người dùng của ứng dụng cùng với các hình ảnh bạn đã chọn.

11. Giám sát bảng điều khiển

Sau khi triển khai ứng dụng web của bạn và gửi thông báo hình ảnh với tư cách người dùng, bạn có thể xem lại dữ liệu hiệu suất trong trang tổng quan giám sát hiệu suất (trong bảng điều khiển Firebase).

Truy cập trang tổng quan của bạn

  1. Trong bảng điều khiển Firebase , hãy chọn dự án có ứng dụng Friendly Chat của bạn.
  2. Trong bảng điều khiển bên trái, tìm phần Chất lượng và nhấp vào Hiệu suất .

Xem lại dữ liệu trên thiết bị

Sau khi giám sát hiệu suất xử lý dữ liệu ứng dụng của bạn, bạn sẽ thấy các tab dọc đầu trang tổng quan. Hãy nhớ kiểm tra lại sau nếu bạn chưa thấy bất kỳ dữ liệu hoặc tab nào.

  1. Nhấp vào tab Trên thiết bị .
  • Bảng Tải trang hiển thị các số liệu hiệu suất khác nhau mà giám sát hiệu suất tự động thu thập trong khi trang của bạn đang tải.
  • Bảng Thời lượng hiển thị mọi dấu vết tùy chỉnh mà bạn đã xác định trong mã ứng dụng của mình.
  1. Nhấp vào saveImageMessage trong bảng Thời lượng để xem lại các số liệu cụ thể cho dấu vết.

e28758fd02d9ffac.png

  1. Nhấp vào Tổng hợp để xem lại việc phân bổ kích thước hình ảnh. Bạn có thể xem số liệu bạn đã thêm để đo kích thước hình ảnh cho dấu vết tùy chỉnh này.

c3cbccf0c739a0a8.png

  1. Nhấp vào Theo thời gian bên cạnh Tổng hợp ở bước trước. Bạn cũng có thể xem Khoảng thời gian của dấu vết tùy chỉnh. Bấm vào Xem thêm để xem lại dữ liệu đã thu thập chi tiết hơn.

16983baa31e05732.png

  1. Trong trang mở ra, bạn có thể phân đoạn dữ liệu thời lượng theo loại MIME hình ảnh bằng cách nhấp vào imageType . Dữ liệu cụ thể này đã được ghi lại do thuộc tính imageType mà bạn đã thêm vào dấu vết tùy chỉnh của mình.

8e5c9f32f42a1ca1.png

Xem lại dữ liệu mạng

Yêu cầu mạng HTTP/S là một báo cáo ghi lại thời gian phản hồi và kích thước tải trọng của các cuộc gọi mạng.

  1. Quay lại màn hình chính của bảng điều khiển giám sát hiệu suất.
  2. Nhấp vào tab Mạng để xem danh sách các mục yêu cầu mạng cho ứng dụng web của bạn.
  3. Duyệt qua chúng để xác định các yêu cầu chậm và bắt đầu khắc phục để cải thiện hiệu suất ứng dụng của bạn!

26a2be152a77ffb9.png

12. Xin chúc mừng!

Bạn đã bật SDK Firebase để theo dõi hiệu suất và thu thập dấu vết tự động cũng như dấu vết tùy chỉnh để đo lường hiệu suất trong thế giới thực của ứng dụng trò chuyện của bạn!

Những gì chúng tôi đã đề cập:

  • Thêm SDK giám sát hiệu suất Firebase vào ứng dụng web của bạn.
  • Thêm dấu vết tùy chỉnh vào mã của bạn.
  • Ghi lại số liệu tùy chỉnh được gắn với dấu vết tùy chỉnh.
  • Phân đoạn dữ liệu hiệu suất bằng cách sử dụng các thuộc tính tùy chỉnh.
  • Hiểu cách sử dụng trang tổng quan theo dõi hiệu suất để hiểu rõ hơn về hiệu suất ứng dụng của bạn.

Tìm hiểu thêm: