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 thực hiện, hãy truy cập vào bài viết Thêm Firebase vào dự án JavaScript để 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, bạn có thể hoàn tất một số bước được mô tả ở phần sau của trang này (ví dụ: thêm SDK và khởi chạy Firebase).

Bước 1: Thêm và khởi chạy Performance Monitoring

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

  2. Thêm SDK JS Performance Monitoring và khởi chạy Performance Monitoring:

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();

SDK Performance Monitoring tự động ghi lại Core Web Vitals.

Bước 2: 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 ứng dụng. Nếu bạn vẫn đang phát triển ứng dụng trên thiết bị, hãy tương tác với ứng dụng để tạo sự kiện cho quá trình thu thập dữ liệu và xử lý 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 phụ cho trang web, tương tác với ứng dụng và/hoặc kích hoạt yêu cầu mạng. Hãy nhớ mở thẻ trình duyệt trong ít nhất 10 giây sau khi trang tải xong.

  3. Chuyển đến Trang tổng quan về hiệu suất của Firebase Console. Bạn sẽ thấy dữ liệu ban đầu xuất hiện trong vòng vài phút.

    Nếu bạn không thấy dữ liệu ban đầu, hãy xem mẹo khắc phục sự cố.

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

  1. Mở công cụ cho nhà phát triển của trình duyệt (ví dụ: Thẻ Mạng cho Công cụ cho nhà phát triển Chrome hoặc trong Trình giám sát mạng cho Firefox).

  2. Làm mới ứng dụng web trong trình duyệt.

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

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

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

Bước 4: (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 liên quan đến mã cụ thể trong ứng dụng, bạn có thể đo lường dấu vết mã tuỳ chỉnh.

Với dấu vết mã tuỳ chỉnh, bạn có thể đo lường thời gian ứng dụng hoàn thành một tác vụ hoặc một nhóm tác vụ cụ thể, chẳng hạn như tải một nhóm hình ảnh hoặc truy vấn cơ sở dữ liệu. Chỉ số mặc định cho dấu vết mã tuỳ chỉnh là thời lượng của dấu vết, nhưng bạn cũng có thể thêm các chỉ số tuỳ chỉnh, chẳng hạn như kết quả tìm kiếm trong bộ nhớ đệm và cảnh báo bộ nhớ.

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

Hãy truy cập vào phần Thêm tính năng giám sát cho 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 5: Triển khai ứng dụng rồi xem kết quả

Sau khi xác thực Performance Monitoring, bạn có thể triển khai phiên bản cập nhật của ứng dụng cho người dùng.

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

Các bước tiếp theo