Browser Extensions Development (Chrome & Edge) · درس

التسجيل والإبلاغ عن الأخطاء والتشخيص

أنشئ طبقة للتسجيل والإبلاغ عن الأخطاء لتتمكن من تشخيص المشكلات في الإضافات التي تعمل على أجهزة المستخدمين الفعلية.

الدرس 4 من 413 خطوة

التسجيل والإبلاغ عن الأخطاء والتشخيص درس مجاني في 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 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.

البدء مجانًا

تعلم 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) يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Browser Extensions Development (Chrome & Edge)