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

1. Tổng quan

Trong bảng mã này, bạn sẽ học 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. Thăm https://fireperf-friendlychat.web.app/ để xem một bản demo sống.

3b1284f5144b54f6.png

Những gì bạn sẽ học

  • 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 chỉ số hiệu quả (tải trang và yêu cầu mạng).
  • Cách đo một đoạn mã cụ thể với dấu vết tùy chỉnh.
  • Cách ghi lại các chỉ số tùy chỉnh, bổ sung gắn với một dấu vết tùy chỉnh.
  • Cách phân đoạn thêm dữ liệu hiệu suất của bạn với các thuộc tính tùy chỉnh.
  • Cách sử dụng trang tổng quan 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 soạn thảo văn bản mà bạn lựa chọn, chẳng hạn như WebStorm , Atom , Sublime , hoặc VS Mã
  • 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 codelab (Xem phần tiếp theo của codelab này để biết cách lấy mã.)

2. Lấy mã mẫu

Clone của codelab kho GitHub từ dòng lệnh:

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

Ngoài ra, nếu bạn không có cài đặt git, bạn có thể tải về repo như một tập tin zip .

Nhập ứng dụng dành cho người mới bắt đầu

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

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

Tạo dự án Firebase

  1. Trong căn cứ hỏa lực console , nhấp Thêm dự án.
  2. Đặt tên cho dự án căn cứ hỏa lực 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 web 58d6543a156e56f9.png để tạo ứng dụng web Firebase mới.
  2. Đăng ký ứng dụng với nickname Friendly Chat , và sau đó đánh dấu vào ô bên cạnh Ngoài ra thiết lập căn cứ hỏa lực Hosting cho ứng dụng này.
  3. Bấm vào Đăng ký ứng dụng.
  4. Nhấp qua các bước còn lại. Bạn không cần phải làm theo các hướng dẫn trên màn hình ngay bây giờ; những điều này sẽ được đề cập trong các bước sau của bộ mã này.

ea9ab0db531a104c.png

Bật đă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 với họ chiếm Google, chúng tôi sẽ sử dụng đăng nhập vào Google phương pháp.

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

  1. Trong căn cứ hỏa lực điều khiển, xác định vị trí phần Phát triển trong bảng điều khiển bên trái.
  2. Nhấn Xác thực, sau đó nhấp vào Sign-in tab phương pháp ( đi để an ủi ).
  3. Kích hoạt tính năng đăng nhập Google cung cấp dịch vụ, và sau đó nhấn Save.

7f3040a646c2e502.png

Bật Cloud Firestore

Các ứng dụng web sử dụng đám mây FireStore để lưu tin nhắn chat và nhận tin nhắn trò chuyện mới.

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

  1. Trong căn cứ hỏa lực console là phần Xây dựng, nhấp vào Cơ sở dữ liệu.
  2. Nhấp vào Tạo cơ sở dữ liệu trong cửa sổ Mây FireStore.
  3. Chọn Start trong tùy chọn chế độ kiểm tra, sau đó kích Enable sau khi đọc từ chối trách nhiệm về các quy tắc an ninh.

Mã khởi động cho codelab 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 codelab.

24bd1a097492eac6.png

Bật lưu trữ đám mây

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

Bạn sẽ cần bật Lưu trữ đám mây:

  1. Trong căn cứ hỏa lực console là phần Xây dựng, nhấp vào lưu trữ.
  2. Bấm Bắt đầu.
  3. Đọc từ chối trách nhiệm về quy tắc an ninh cho dự án căn cứ hỏa lực của bạn, và sau đó nhấp vào Got nó.

Mã bắt đầu bao gồm quy tắc bảo mật cơ bản, mà chúng tôi sẽ triển khai sau trong bảng mã.

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 Lưu trữ Firebase để cung cấp ứ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 trong tài liệu căn cứ hỏa lực.
  2. Xác minh rằng CLI đã được cài đặt đúng cách bằng cách chạy lệnh sau trong một 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. Cấp quyền cho 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 để kéo cấu hình ứng dụng của bạn cho Lưu trữ Firebase 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 bảng mã). Nhưng để kéo 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 của bạn.

  1. Hãy chắc chắn rằng dòng lệnh của bạn được truy cập vào địa phương của ứng dụng của bạn performance-monitoring-start thư mục.
  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, sau đó đặ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 codelab này, chúng ta hãy chỉ sử dụng bí danh của default .

  1. Làm 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 hiệu suất căn cứ hỏa lực giám sát SDK cho web (tham khảo các tài liệu hướng dẫn để biết chi tiết). Trong codelab này, chúng tôi sẽ cho phép thực hiện giám sát từ các URL Hosting.

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

  1. Mở src/index.js tập tin, sau đó thêm dòng sau dưới TODO để bao gồm các Giám sát SDK căn cứ hỏa lực Performance.

index.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 chạy SDK Firebase với một đố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 Lưu trữ Firebase 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 codelab này, chúng tôi đã thêm các dòng sau đây cho bạn ở dưới cùng của public/index.html tập tin, nhưng kiểm tra lại rằng nó là ở đó.

index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
  1. Trong src/index.js tập tin, thêm dòng sau dưới TODO để khởi tạo giám sát hoạt động.

index.js

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

Giám sát hiệu suất hiện sẽ tự động thu thập số liệu tải trang và yêu cầu mạng 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

Chậm trễ đầu vào đầu tiên là hữu ích vì các trình duyệt đối phó với một tương tác người dùng cung cấp cho người dùng ấn tượng đầu tiên của họ về tính hiệu quả của ứng dụng của bạn.

Độ trễ đầu vào đầu tiên bắt đầu khi người dùng lần đầu tiên tương tác với một phần tử trên trang, như nhấp vào nút hoặc siêu liên kết. Nó dừng ngay lập tức sau khi trình duyệt có thể phản hồi với đầu vào, có 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ở public/index.html tập tin, sau đó bỏ ghi chú dòng sau.

index.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 các 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

Theo dõi hiệu suất cho phép bạn tạo ra dấu vết tùy chỉnh. Theo dõi 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 một dấu vết tùy chỉnh bằng cách sử dụng các API do SDK cung cấp.

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

index.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 dừng cho dấu vết. Bạn có thể coi một dấu vết như một bộ đếm thời gian.

index.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 một 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ẽ cung cấp cho bạn ý tưởng về thời gian người dùng trong thế giới thực 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.

Thêm nữa, bạn có thể cấu hình một dấu vết tùy chỉnh để chỉ số tùy chỉnh kỷ lục cho các sự kiện hoạt động liên quan xảy ra trong phạm vi của nó. Ví dụ: bạn có thể sử dụng một 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 trong bước trước hay không.

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

index.js

 ...

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

 ...

Chỉ số này cho phép theo dõi 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 đã 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 tùy chỉnh các thuộc tính trên của bạn dấu vết tùy chỉnh . Thuộc tính tùy chỉnh có thể giúp phân đoạn dữ liệu theo danh mục cụ thể cho ứng dụng của bạn. Ví dụ: bạn có thể thu thập kiểu MIME của tệp hình ảnh để điều tra xem kiểu MIME có thể ảnh hưởng như thế nào đến hiệu suất.

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

index.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 theo dõi hiệu suất Firebase được thiết kế để nó có thể được tải không đồng bộ và vì vậy nó sẽ không ảnh hưởng tiêu cực đến hiệu suất của các ứng dụng web trong quá trình tải trang. Trước khi tải SDK, API giám sát hiệu suất Firebase không khả dụng. Trong kịch bản 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 các API Thời gian người dùng . Căn cứ hỏa lực hiệu suất SDK sẽ nhặt khoảng thời gian từ đo lường () và đăng chúng như dấu vết tùy chỉnh.

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

  1. Trong public/index.html tập tin, thêm dòng sau đây để đánh dấu sự bắt đầu của tải kịch bản phong cách ứng dụng.

index.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 thời điểm kết thúc quá trình tải tập lệnh tạo kiểu ứng dụng và để đo khoảng thời gian từ đầu đến cuối.

index.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 nhập bạn đã tạo tại đây sẽ được Giám sát hiệu suất Firebase tự động thu thập. Bạn sẽ có thể tìm thấy một dấu vết tùy chỉnh được gọi loadStyling trong căn cứ hỏa lực Performance console sau.

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

Triển khai tới 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 cho Lưu trữ Firebase:

  1. Hãy chắc chắn rằng dòng lệnh của bạn được truy cập vào địa phương của ứng dụng của bạn performance-monitoring-start thư mục.
  2. Triển khai tệp của bạn cho 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. Thăm ứng dụng web của bạn đó là bây giờ tổ chức hoàn toàn sử dụng căn cứ hỏa lực Hosting tại hai trong số các tên miền phụ căn cứ hỏa lực rất riêng của 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ở căn cứ hỏa lực console và đi đến tab Performance. 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 với 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 hình ảnh lên 13734cb66773e5a3.png .
  2. Chọn tệp hình ảnh bằng công cụ chọn tệp.
  3. Hãy thử gửi nhiều hình ảnh (một vài mẫu được lưu trữ trong public/images/ ) để bạn có thể kiểm tra sự phân bố của chỉ số tùy chỉnh và các thuộc tính tùy chỉnh.

Các thông báo 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 đã chọn của bạ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 tin nhắn 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 căn cứ hỏa lực console , chọn dự án có bạn Friendly Chat ứng dụng.
  2. Trong bảng điều khiển bên trái, bạn tìm đến phần chất lượng, và nhấp vào Performance.

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

Sau khi quá trình 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 theo đầu trang tổng quan. Đảm bảo 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 thiết bị Bật.
  • Trang tải bảng hiển thị các số liệu hiệu suất khác nhau mà thực hiện giám sát tự động thu thập trong khi trang của bạn là tải.
  • Các Thời lượng bảng hiển thị bất kỳ dấu vết tùy chỉnh mà bạn đã xác định trong mã của ứng dụng.
  1. Nhấn saveImageMessage trong bảng Thời lượng xem xét các số liệu cụ thể cho các dấu vết.

e28758fd02d9ffac.png

  1. Nhấn tổng hợp để xem xét sự phân bố của 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.

c3cbcfc0c739a0a8.png

  1. Bấm Qua thời gian mà là bên cạnh tổng hợp trong bước trước. Bạn cũng có thể xem các Thời gian của các dấu vết tùy chỉnh. Nhấp vào Xem nhiều để xem xét các dữ liệu thu thập được một cách 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 gian bởi hình ảnh MIME loại bằng cách nhấp imageType. Dữ liệu cụ thể này đã được ghi lại do thuộc tính imageType 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

HTTP / S yêu cầu mạng là một báo cáo rằng ảnh chụp thời gian phản ứng 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 theo dõi 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 tìm cách 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 và 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 theo dõi 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 các chỉ số tùy chỉnh 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 giám sát 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: