0Pricing
Browser Extensions Development (Chrome & Edge) · レッスン

ロギング、エラー報告、診断

実際のユーザーのマシン上で動作する拡張機能の問題を診断できるよう、ロギングとエラー報告のレイヤーを構築します。

「ロギング、エラー報告、診断」はCoddyKit上の無料Browser Extensions Development (Chrome & Edge)レッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応の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時間対応のAIチューター）、Browser Extensions Development (Chrome & Edge)コースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Browser Extensions Development (Chrome & Edge)コースには全4レッスンが含まれています。

「ロギング、エラー報告、診断」で何を学びますか？

実際のユーザーのマシン上で動作する拡張機能の問題を診断できるよう、ロギングとエラー報告のレイヤーを構築します。 ブラウザで直接実行するハンズオンコードでBrowser Extensions Development (Chrome & Edge)を演習し、24時間対応の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フィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 拡張機能コンポーネントのデバッグ
  2. 拡張機能のユニットテスト作成
  3. パフォーマンス最適化の戦略
  4. ロギング、エラー報告、診断
← Browser Extensions Development (Chrome & Edge)に戻る