جافاسكريبت - خطأ من نوع TypeError: فشل الاستدعاء في عرض الخادم SvelteKit - إكسبرس لا يعرض أثر تتبع TypeScript بشكل صحيح

أنا أفحص سجلات خادم SvelteKit SSR باستخدام محول-node.

لقد قمت بتخصيص server.js لاستخدام Express بدلاً من Polka، رغم أنني لست متأكدًا مما إذا كان لهذا أهمية.

هناك أخطاء واضحة أعتقد أنها تحدث عندما تحاول fetch() قراءة البيانات من واجهة برمجة التطبيقات الخلفية وتفشل لسبب ما.

هذا هو مخرجات وحدة التحكم التي أحصل عليها باستخدام docker:

frontend  | TypeError: fetch failed
frontend  |     at fetch (file:///app/build/handler.js:17895:14)
frontend  |     at async Object.fetch (file:///app/build/server/index.js:2273:12)
frontend  |     at async fetch (file:///app/build/server/index.js:991:24)
frontend  |     at async Promise.all (index 0)
frontend  |     at async load (file:///app/build/server/chunks/6-0becfa88.js:8:56)
frontend  |     at async load_data (file:///app/build/server/index.js:1088:16)
frontend  |     at async file:///app/build/server/index.js:1887:18

هذا التتبع التراكمي غير قابل للاستخدام، لأنه يفتقر إلى معلومات حول ما كانت الدالة/الكود المصدري الذي استدعى fetch(). لست متأكدًا مما إذا كان ذلك بسبب طريقة عمل Node.js/Express، أو بسبب نقص دعم خريطة المصدر TypeScript في جزء ما من التتبع، أو شيء آخر. يحتوي مشروع SvelteKit على العشرات من الدوال المسماة load() لأن هذا ما يحتويه كل نقطة نهاية في الراوتر.

ما هي الطريقة لجعل هذه الأخطاء، ومعالجة الأخطاء في SvelteKit بشكل عام، أكثر وصفًا - على سبيل المثال لعرض المستدعي المناسب المرتبط بملف مصدر TypeScript الخاص به، واسم الصفحة الفاشلة، وعنوان URL الفاشل في fetch() وما إلى ذلك؟ هذا من شأنه بعد ذلك أن يساعد في تشخيص المشكلة الأساسية لما قد يكون خطأً في استدعاءات API التي تفشل.

الإجابة رقم 1

قد تكون المشكلة نقص في sourcemap.

عندما يقوم SvelteKit ببناء تطبيقك، سيقوم بتقسيم الكود الخاص بك إلى عدة أجزاء مما يجعل تتبع الأخطاء غير قابل للاستخدام.

هناك طريقة لتمكين خريطة المصدر مرة أخرى ويمكنك تجربة ذلك على مشروعك لمعرفة ما إذا كانت تعمل.

  1. قم بتعديل ملف vite.config.xx، وأضف الإعدادات التالية:
const config = {
  ...
  build:{
    sourcemap: true // Config vite to generate sourcemap when bundling.
  },
  ...
}
  1. أضف العلم sourcemap عند بدء node، على سبيل المثال:
node index.js --enable-source-maps

يجب أن يجعل تتبع الأكوام الخاص بك يشير إلى src بدلاً من build. يمكنك المحاولة والتحقق مما إذا كان مشروعك لا يزال يطبع تتبع أكوام غير مفيد.

الإجابة رقم 2

يمكنك تعريف handleFetch() داخل src/hooks.server.ts. ثم قم بتسجيل كل من عنوان URL المطلوب والصفحة من هناك:

// src/hooks.server.js

/** @type {import('@sveltejs/kit').HandleFetch} */
export function handleFetch({ event, request, fetch }) {

  let fetchResult;
  try {
      fetchResult = await fetch(request);
  } catch (error) {
      // Log info from event and request here.
  }

  return fetchResult;
}