Browser Extensions Development (Chrome & Edge) · 강의

로그 기록, 오류 보고와 진단

실제 사용자 컴퓨터에서 실행되는 확장 프로그램의 문제를 진단할 수 있도록 로그 기록 및 오류 보고 계층을 구축합니다.

로그 기록, 오류 보고와 진단은(는) CoddyKit의 무료 Browser Extensions Development (Chrome & Edge) 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 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 error and unhandledrejection handlers
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.

자주 묻는 질문

“로그 기록, 오류 보고와 진단” 강의는 무료인가요?

네 — “로그 기록, 오류 보고와 진단” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Browser Extensions Development (Chrome & Edge) 강의 전체를 잠금 해제할 수 있습니다. Browser Extensions Development (Chrome & Edge) 강의에는 총 4개의 강의가 포함되어 있습니다.

“로그 기록, 오류 보고와 진단”에서 뭘 배우나요?

실제 사용자 컴퓨터에서 실행되는 확장 프로그램의 문제를 진단할 수 있도록 로그 기록 및 오류 보고 계층을 구축합니다. 브라우저에서 직접 실행하는 실습 코드로 Browser Extensions Development (Chrome & Edge)을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Browser Extensions Development (Chrome & Edge)을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Browser Extensions Development (Chrome & Edge)은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“로그 기록, 오류 보고와 진단” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Browser Extensions Development (Chrome & Edge) 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Browser Extensions Development (Chrome & Edge) 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Browser Extensions Development (Chrome & Edge)(으)로 돌아가기