Журналирование, отчётность об ошибках и диагностика
Создайте слой журналирования и формирования отчётов об ошибках, чтобы диагностировать проблемы в расширениях, работающих на устройствах реальных пользователей.
«Журналирование, отчётность об ошибках и диагностика» — бесплатный урок Browser Extensions Development (Chrome & Edge) на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Browser Extensions Development (Chrome & Edge), и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Browser Extensions Development (Chrome & Edge) содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
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.
Изучай JavaScript с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 12
- Уроки
- 48
Часто задаваемые вопросы
Урок «Журналирование, отчётность об ошибках и диагностика» бесплатный?
Да — полный текст урока «Журналирование, отчётность об ошибках и диагностика» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Browser Extensions Development (Chrome & Edge), подпишись на CoddyKit PRO. Курс Browser Extensions Development (Chrome & Edge) содержит 4 уроков всего.
Чему я научусь в уроке «Журналирование, отчётность об ошибках и диагностика»?
Создайте слой журналирования и формирования отчётов об ошибках, чтобы диагностировать проблемы в расширениях, работающих на устройствах реальных пользователей. Ты практикуешь Browser Extensions Development (Chrome & Edge) с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Browser Extensions Development (Chrome & Edge)?
Предыдущий опыт не требуется. Browser Extensions Development (Chrome & Edge) на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Журналирование, отчётность об ошибках и диагностика»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Browser Extensions Development (Chrome & Edge)?
Да. Каждый урок Browser Extensions Development (Chrome & Edge) включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Отладка компонентов расширения
- Написание модульных тестов для расширений
- Стратегии оптимизации производительности
- Журналирование, отчётность об ошибках и диагностика