ทดสอบการติดตั้งใช้งาน Crashlytics (เว็บ)

เลือกแพลตฟอร์ม iOS+ Android เว็บ Flutter Unity


ใช้คู่มือนี้หากคุณทำตามคู่มือเริ่มต้นใช้งานแล้ว แต่ยังไม่เห็นข้อขัดข้องในแดชบอร์ด Crashlytics

บังคับให้เกิดข้อขัดข้องเพื่อทดสอบการติดตั้งใช้งาน

  1. เพิ่มโค้ดลงในแอปที่คุณใช้เพื่อบังคับให้เกิดข้อขัดข้องในการทดสอบได้

    เพิ่มปุ่มทดสอบหรือทริกเกอร์เส้นทางลงในแอป React, Next.js หรือ Angular ที่แสดงข้อผิดพลาดขณะรันไทม์เมื่อคลิก

    // Trigger an unhandled exception on button click or route load
function handleTestCrash() {
  throw new Error("Crashlytics Web SDK Test Unhandled Error!");
}

    หากคุณกำหนดค่าการบันทึกข้อผิดพลาดอัตโนมัติด้วย <FirebaseCrashlytics> (React หรือ Next.js), provideCrashlytics (Angular) หรือ <CrashlyticsRoutes> (React Router) การแสดงข้อผิดพลาดนี้จะบันทึกข้อยกเว้นโดยอัตโนมัติและกำหนดเวลาสำหรับการอัปโหลด

  2. สร้างและเรียกใช้แอป จากนั้นทริกเกอร์ข้อผิดพลาดในการทดสอบเพื่อให้แอปส่งรายงานข้อขัดข้องแรกไปยัง Firebase

  3. ในคอนโซล Firebase ให้ไปที่DevOps และการมีส่วนร่วม > แดชบอร์ด Crashlytics เพื่อตรวจสอบรายงานข้อขัดข้องทดสอบ โดยทำดังนี้

    1. เลือกเว็บแอปจากตัวเลือกแบบเลื่อนลงที่ด้านบนของหน้า

    2. รีเฟรชหน้าเว็บ ข้อยกเว้นการทดสอบควรปรากฏในตารางปัญหาภายในไม่กี่นาที

หากรีเฟรชคอนโซลแล้วและยังไม่เห็นข้อขัดข้องทดสอบหลังจากผ่านไป 5-10 นาที โปรดดูส่วนถัดไปเกี่ยวกับการแก้ปัญหาการตั้งค่า

แก้ปัญหาการตั้งค่า

หากคุณทริกเกอร์การทดสอบข้อขัดข้องแล้ว แต่ยังไม่เห็นรายงานในแดชบอร์ด Crashlytics หลังจากผ่านไป 5-10 นาที ให้ลองเรียกใช้ขั้นตอนการตั้งค่าอีกครั้งหรือยืนยันการกำหนดค่าโปรเจ็กต์ต่อไปนี้ในคอนโซล

  • เรียกใช้ขั้นตอนการตั้งค่า Crashlytics อีกครั้ง: คุณสามารถเรียกใช้คำสั่งการตั้งค่า CLI ของ Firebase (firebase crashlytics:setup) อีกครั้งได้อย่างปลอดภัย หรือตั้งค่าให้เสร็จสมบูรณ์ในคอนโซล Firebase ตามที่อธิบายไว้ในขั้นตอนที่ 1 ของคู่มือเริ่มต้นใช้งาน การเรียกใช้การตั้งค่าอีกครั้งจะเปิดใช้ API ที่ขาดหายไปโดยอัตโนมัติ และซ่อมแซมที่เก็บข้อมูล firebase-telemetry Cloud Logging และซิงก์การกำหนดเส้นทาง

  • ตรวจสอบสิทธิ์การเรียกเก็บเงินและ IAM: ตรวจสอบว่าโปรเจ็กต์ Firebase ใช้แพ็กเกจราคา Blaze แบบจ่ายเมื่อใช้ และบัญชีของคุณมีสิทธิ์เป็นเจ้าของในโปรเจ็กต์เมื่อทำตามขั้นตอนการตั้งค่า

  • ยืนยันข้อจำกัดของคีย์ API firebasetelemetry.googleapis.com: ในหน้าข้อมูลเข้าสู่ระบบของคอนโซล Google Cloud ให้เลือกคีย์ API ที่กำหนดค่าไว้ในออบเจ็กต์ firebaseConfig (เช่น Browser key (auto created by Firebase)) หากคีย์เปิดใช้ข้อจำกัด API ไว้ ให้ยืนยันว่า Firebase Telemetry API (firebasetelemetry.googleapis.com) รวมอยู่ในรายการ API ที่อนุญาต หากเป้าหมายนี้หายไปจากคีย์ API ที่ถูกจำกัด คำขออัปโหลดเครือข่ายจะล้มเหลวพร้อมข้อผิดพลาด HTTP 403 (ไม่อนุญาต) ในคอนโซลเบราว์เซอร์

  • ตรวจสอบ API ของ Google Cloud ที่เปิดใช้: ในหน้าAPI และบริการที่เปิดใช้ของคอนโซล Google Cloud ให้ยืนยันว่า Firebase Telemetry API (firebasetelemetry.googleapis.com), Firebase Telemetry Admin API (firebasetelemetryadmin.googleapis.com), API ของ Cloud Logging (logging.googleapis.com) และ Cloud Storage (storage.googleapis.com) เปิดใช้สำหรับโปรเจ็กต์ของคุณ

  • ยืนยัน Log Analytics ในที่เก็บข้อมูลการบันทึก: ในคอนโซล Google Cloud หน้าพื้นที่เก็บข้อมูลบันทึก ให้ยืนยันว่ามีที่เก็บข้อมูล firebase-telemetry (ตำแหน่ง global) และเปิดใช้ Log Analytics แล้ว และตรวจสอบ หน้าเราเตอร์บันทึก เพื่อยืนยันว่ามีซิงก์ firebase-telemetry-routing

บันทึกและล้างข้อยกเว้นการทดสอบด้วยตนเอง

หากต้องการยืนยันการส่งแบบต้นทางถึงปลายทางทันทีโดยไม่ต้องรอการรวมกลุ่มหน่วยความจำหรือการยกเลิกการโหลดหน้าเว็บ ให้ใช้ recordError ร่วมกับ flush ดังนี้

import { recordError, flush, getCrashlytics } from '@firebase/crashlytics';
import { app } from './lib/firebase'; // Shared initialization script

const crashlytics = getCrashlytics(app);

async function triggerImmediateTestCrash() {
  const error = new Error("Crashlytics Web SDK Test Handled Error!");
  // Capture the error with immediate priority and custom diagnostic metadata
  recordError(crashlytics, error, {
    priority: 'IMMEDIATE',
    testEvent: true,
    environment: 'staging_verification'
  });
  // Force an immediate upload before the browser terminates or reloads
  await flush(crashlytics);
  console.log("Test error flushed to Crashlytics successfully.");
}

ขั้นตอนถัดไป

  • รับรายงานข้อขัดข้องที่อ่านได้ - ตั้งค่าการอัปโหลดแผนที่แหล่งที่มา (.js.map) โดยอัตโนมัติเพื่อให้สแต็กเทรซเวอร์ชันที่ใช้งานจริงแสดงชื่อไฟล์และหมายเลขบรรทัดต้นฉบับ

  • ปรับแต่งรายงานข้อขัดข้อง - ดูวิธีรายงานข้อยกเว้นที่จัดการ เพิ่มคีย์ที่กำหนดเอง บังคับล้างบันทึกการวัดและส่งข้อมูลทางไกล และกำหนดค่าการสุ่มตัวอย่าง