Logowanie, raportowanie błędów i diagnostyka
Zbudują Państwo warstwę logowania i raportowania błędów, aby diagnozować problemy w rozszerzeniach działających na komputerach rzeczywistych użytkowników.
Logowanie, raportowanie błędów i diagnostyka to bezpłatna lekcja Browser Extensions Development (Chrome & Edge) na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Browser Extensions Development (Chrome & Edge), a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Browser Extensions Development (Chrome & Edge) zawiera 4 lekcji w sumie.
Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.
You Cannot Watch Every Console
Once your extension ships, you cannot open dev tools on every user's browser. A deliberate logging and error-reporting strategy is how you learn what is going wrong in the wild.
A Central Log Function
Wrap logging in one function so you can change behavior in a single place, add timestamps, and silence output in production.
function log(level, msg) {
console[level]('[MyExt] ' + new Date().toISOString() + ' ' + msg)
}Log Levels
Use distinct levels so you can filter noise. Common ones: debug, info, warn, and error.
log('warn', 'Quota nearly full')
log('error', 'Sync failed')Catching Uncaught Errors
Add a global error handler in each context to capture exceptions you did not anticipate.
self.addEventListener('error', (e) => {
log('error', e.message + ' @ ' + e.filename)
})Catching Rejected Promises
Unhandled promise rejections are a common silent failure. Listen for unhandledrejection too.
self.addEventListener('unhandledrejection', (e) => {
log('error', 'Unhandled: ' + e.reason)
})Persisting a Log Ring Buffer
Keep the last N log entries in storage so users can export them when reporting a bug. Cap the size to avoid filling the quota.
async function persist(entry) {
const { logs = [] } = await chrome.storage.local.get('logs')
logs.push(entry)
if (logs.length > 200) logs.shift()
await chrome.storage.local.set({ logs })
}Letting Users Export Logs
Add an options-page button that dumps stored logs to a downloadable file, making support requests far more useful.
const blob = new Blob([JSON.stringify(logs, null, 2)], { type: 'application/json' })
const url = URL.createObjectURL(blob)
chrome.downloads.download({ url, filename: 'myext-logs.json' })Remote Error Reporting
For aggregate insight, POST anonymized error reports to your own endpoint. Always make this opt-in and strip personal data.
fetch('https://errors.example.com', {
method: 'POST',
body: JSON.stringify({ msg, version })
})Respecting Privacy
Never log page contents, URLs with tokens, or anything sensitive. Disclose any remote reporting in your privacy policy and store listing.
Silencing Logs in Production
Gate verbose logging behind a debug flag so release builds stay quiet and fast, while you can flip it on when investigating.
const DEBUG = false
function debug(msg) { if (DEBUG) log('debug', msg) }Correlating Across Contexts
Tag each log with its source (popup, content, worker) so you can trace a bug that spans contexts and messaging.
log('info', '[worker] received PING')Quick Check
Test your diagnostics knowledge.
Recap
You built a diagnostics layer:
- Central log function with levels
- Global
errorandunhandledrejectionhandlers - A capped log buffer in storage with export
- Opt-in, privacy-safe remote reporting
- A debug flag and per-context tagging
Good diagnostics turn mysterious field bugs into fixable reports.
Często zadawane pytania
Czy lekcja „Logowanie, raportowanie błędów i diagnostyka” jest bezpłatna?
Tak — pełny tekst „Logowanie, raportowanie błędów i diagnostyka” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Browser Extensions Development (Chrome & Edge), przejdź na CoddyKit PRO. Kurs Browser Extensions Development (Chrome & Edge) zawiera 4 lekcji w sumie.
Co nauczysz się w „Logowanie, raportowanie błędów i diagnostyka”?
Zbudują Państwo warstwę logowania i raportowania błędów, aby diagnozować problemy w rozszerzeniach działających na komputerach rzeczywistych użytkowników. Ćwiczysz Browser Extensions Development (Chrome & Edge) z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Browser Extensions Development (Chrome & Edge)?
Nie wymagamy żadnego doświadczenia. Browser Extensions Development (Chrome & Edge) w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Logowanie, raportowanie błędów i diagnostyka”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Browser Extensions Development (Chrome & Edge)?
Tak. Każda lekcja Browser Extensions Development (Chrome & Edge) zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Debugowanie komponentów rozszerzenia
- Pisanie testów jednostkowych rozszerzeń
- Strategie optymalizacji wydajności
- Logowanie, raportowanie błędów i diagnostyka