تقرير الشوائب

وصف الخطأ

عندما يتم طرح استثناء في getServerSideProps في بيئة بدون خادم ، يتم إرجاع الاستجابة برمز الحالة 502 (Bad Gateway) ، وهو بالتأكيد ليس ما هو عليه. بالإضافة إلى ذلك ، لا يتم عرض 500 صفحة مخصصة أو افتراضية في هذه الحالة ، لذلك قد يرى المستخدم تتبع مكدس بناءً على كيفية أو مكان نشر التطبيق في الإنتاج. يبدو أن هذه مشكلة Next 9.5+ ، حيث إنها أعادت رمز الحالة 500 وصفحة خطأ مناسبة بنفس الرمز في 9.4.x.

لإعادة إنتاج

سيحدث هذا مع أي صفحة تواجه خطأ في getServerSideProps. لقد قمت بإنشاء نموذج ريبو هنا مع صفحة "مشكلة":

https://github.com/spencewood/throw-app

هذا يشمل ببساطة:

import React from "react";

export default function Problem() {
  return (
    <>
      <h1>Problem!</h1>
    </>
  );
}

export const getServerSideProps = () => {
  throw new Error("error");
};

تم نشر هذه الصفحة على vercel: https://throw-app.vercel.app/problem

وحليقة:

❯ curl -I "https://throw-app.vercel.app/problem"
HTTP/2 502 
date: Fri, 07 Aug 2020 18:20:24 GMT
content-type: text/plain; charset=utf-8
x-nextjs-page: /problem
content-length: 68
server: Vercel
x-vercel-id: cle1::2cxmx-1596824424449-1d2c09ffce13
strict-transport-security: max-age=63072000; includeSubDomains; preload
cache-control: s-maxage=0

سلوك متوقع

ما عليك سوى الرجوع إلى إصدار سابق من التطبيق أعلاه إلى Next 9.4 سيعرض بشكل صحيح صفحة 500 الافتراضية لـ Next وسيعيد رمز الحالة 500. هذا ما يجب أن يحدث ، حيث يشير 500 ببساطة إلى "خطأ في الخادم" بينما يشير الرقم 502 إلى "خطأ / عدم وجود استجابة".

لقطات

فيما يلي لقطات شاشة من https://throw-app.vercel.app/problem مع المصدر هنا: https://github.com/spencewood/throw-app

التالي 9.4

التالي 9.5

أفكار أخرى

من الواضح أنك لن تقوم بإلقاء خطأ مثل هذا ، ولكن أي استثناءات يتم طرحها أثناء إنشاء جانب الخادم للبيانات الديناميكية ليتم تسليمها إلى التطبيق سيؤدي إلى ظهور الخطأ 502.