Bắt đầu sử dụng tính năng Giám sát hiệu suất cho web

Trước khi bắt đầu

Nếu bạn chưa truy cập, hãy truy cập Thêm Firebase vào dự án JavaScript của bạn để tìm hiểu cách:

  • Tạo một dự án Firebase

  • Đăng ký ứng dụng web của bạn với Firebase

Lưu ý rằng khi thêm Firebase vào ứng dụng của mình, bạn có thể hoàn tất một số các bước được mô tả sau trên trang này (ví dụ: thêm SDK và khởi chạy Firebase).

Bước 1: Thêm và khởi chạy tính năng Giám sát hiệu suất

  1. Nếu bạn chưa thực hiện, cài đặt Firebase JS SDK và khởi chạy Firebase.

  2. Thêm SDK JS của Giám sát hiệu suất và khởi chạy tính năng Giám sát hiệu suất:

Web 

import { initializeApp } from "firebase/app";
import { getPerformance } from "firebase/performance";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Performance Monitoring and get a reference to the service
const perf = getPerformance(app);

Web 

import firebase from "firebase/compat/app";
import "firebase/compat/performance";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Performance Monitoring and get a reference to the service
const perf = firebase.performance();

Bước 2: Thêm thư viện polyfill độ trễ đầu vào đầu tiên

Để đo lường chỉ số độ trễ đầu vào đầu tiên, bạn cần thêm thư viện polyfill cho chỉ số này. Để lắp đặt hãy tham khảo hướng dẫn của thư viện tài liệu.

Bạn không bắt buộc phải thêm thư viện polyfill này để Giám sát hiệu suất báo cáo thư viện khác chỉ số liên quan đến ứng dụng web.

Bước 3: Tạo sự kiện hiệu suất để hiển thị dữ liệu ban đầu

Firebase bắt đầu xử lý các sự kiện khi bạn thêm thành công SDK vào . Nếu bạn vẫn đang phát triển cục bộ, hãy tương tác với ứng dụng của bạn để tạo các sự kiện để thu thập và xử lý dữ liệu ban đầu.

  1. Phân phát và xem ứng dụng web của bạn trong môi trường cục bộ.

  2. Tạo sự kiện bằng cách tải các trang con của trang web, tương tác với ứng dụng và/hoặc kích hoạt các yêu cầu mạng. Hãy nhớ giữ lại thẻ trình duyệt mở trong ít nhất 10 giây sau khi tải trang.

  3. Chuyển đến trang tổng quan Hiệu suất bảng điều khiển của Firebase. Bạn sẽ thấy dữ liệu ban đầu của mình hiển thị trong trong vài phút.

    Nếu bạn không thấy dữ liệu ban đầu của mình hiển thị, hãy xem phần khắc phục sự cố .

Bước 4: (Không bắt buộc) Xem thông điệp nhật ký cho sự kiện hiệu suất

  1. Mở công cụ cho nhà phát triển trên trình duyệt (ví dụ: Thẻ Mạng cho Công cụ dành cho nhà phát triển Chrome hoặc trong Network Monitor for Firefox).

  2. Làm mới ứng dụng web của bạn trong trình duyệt.

  3. Kiểm tra thông điệp nhật ký của bạn để xem có thông báo lỗi nào không.

  4. Sau vài giây, hãy tìm cuộc gọi mạng đến firebaselogging.googleapis.com trong công cụ cho nhà phát triển của trình duyệt. Chiến lược phát hành đĩa đơn sự hiện diện của cuộc gọi mạng đó cho thấy trình duyệt đang gửi hiệu suất dữ liệu sang Firebase.

Nếu ứng dụng của bạn không ghi lại các sự kiện về hiệu suất, hãy xem phần khắc phục sự cố .

Bước 5: (Không bắt buộc) Thêm tính năng giám sát tuỳ chỉnh cho mã cụ thể

Để theo dõi dữ liệu hiệu suất được liên kết với mã cụ thể trong ứng dụng của mình, bạn có thể dấu vết mã tuỳ chỉnh của công cụ đó.

Với tính năng theo dõi mã tuỳ chỉnh, bạn có thể đo lường thời gian cần để hoàn tất ứng dụng một nhiệm vụ cụ thể hoặc một nhóm nhiệm vụ (chẳng hạn như tải một tập hợp hình ảnh hoặc truy vấn) cơ sở dữ liệu của bạn. Chỉ số mặc định cho dấu vết mã tùy chỉnh là thời lượng, nhưng bạn cũng có thể thêm chỉ số tuỳ chỉnh, chẳng hạn như lượt truy cập vào bộ nhớ đệm và cảnh báo về bộ nhớ.

Trong mã, bạn xác định điểm bắt đầu và kết thúc của dấu vết mã tuỳ chỉnh (và thêm bất kỳ chỉ số tuỳ chỉnh mong muốn nào) bằng cách sử dụng API do SDK giám sát hiệu suất cung cấp.

Hãy xem bài viết Thêm tính năng giám sát cho một mã cụ thể để tìm hiểu thêm về các tính năng này và cách thêm chúng vào ứng dụng của bạn.

Bước 6: Triển khai ứng dụng sau đó xem xét kết quả

Sau khi xác thực giải pháp Giám sát hiệu suất, bạn có thể triển khai phiên bản đã cập nhật của tính năng Giám sát hiệu suất ứng dụng của bạn cho người dùng.

Bạn có thể theo dõi dữ liệu hiệu suất trong phần Hiệu suất trang tổng quan của bảng điều khiển của Firebase.

Các bước tiếp theo