Исправљање грешке Нект.јс 500 у апликацијама за е-трговину приликом додавања нових производа

Када се прекине беспрекорни ток рада е-трговине

Развој платформе за е-трговину доноси сопствени скуп изазова, посебно када се интегришу модерни оквири као што су Нект.јс са робусним бацкендовима као што је Ларавел. Беспрекорно искуство које замислите може бити поремећено када се појаве неочекиване грешке. Интерна грешка сервера 500 је једна таква ноћна мора која може изазвати панику и конфузију. 😟

Недавно сам се суочио са овим проблемом у пројекту који је хостован на Дигитал Оцеан. У почетку је све изгледало у реду — почетна страница је приказивала нове производе без проблема. Али у тренутку када сам покушао да дођем до странице са детаљима о производу или да пређем преко производа користећи компоненту Линк, страшна грешка 500 се појавила.

Оно што је ово питање збунило јесте његова недоследност. Локално, апликација је функционисала беспрекорно, чак и када је опонашала окружење за производњу и постављање. Постављање на сцену је такође добро функционисало, али производња? Ту је пропало. Ове мистерије могу тестирати стрпљење програмера и вештине решавања проблема.

То ме је подсетило на време када се мој ауто необјашњиво покварио након што је савршено ишао током путовања. Попут отклањања грешака у апликацији, проверавате све — гориво, гуме, па чак и нејасне проблеме као што су зачепљени филтери. Слично томе, решавање ове грешке захтевало је методичан приступ и много покушаја и грешака. 🚗💻

Разумевање решења: разбијање кода

Достављене скрипте се баве уобичајеним проблемом у Нект.јс апликације: динамичко рутирање и изазови ИСР (Инкрементална статичка регенерација). Прва скрипта користи Реацт Куери префетцхКуери метод за преузимање и кеширање података пре приказивања страница. Ово осигурава да су детаљи о производу доступни када корисник дође до странице са детаљима о производу, спречавајући кашњења преузимања током извршавања. То је као да унапред наручите карту за биоскоп да бисте избегли чекање у реду. 🎟 Ово проактивно преузимање смањује време учитавања странице и побољшава корисничко искуство.

У другом сценарију, гетСтатицПатхс функција динамички генерише руте за производе користећи бацкенд АПИ. Одређивањем резервни: 'блокирање', обезбеђује да се нови производи испоручују на захтев када им се први пут приступи. Овај метод је кључан за платформе за е-трговину са хиљадама производа, јер избегава претходно приказивање свих могућих страница током времена израде. Замислите то као само печење колачића када их неко наручи уместо да унапред испуните своју кухињу свим укусима. 🍪

Интеграција трећег скрипта од дехидрирати ин гетСтатицПропс омогућава да се подаци на страни сервера прослеђују фронтенду као серијализовано стање. Ово је посебно корисно за СЕО, јер осигурава да странице приказане преко ИСР-а и даље садрже неопходне метаподатке које претраживачи могу претраживати. Слично је припремити јело код куће и савршено га паковати за испоруку тако да изгледа привлачно и спремно за јело по доласку. 🥡 Ово побољшава видљивост и перформансе апликације у претраживачима.

Коначно, руковање грешкама игра кључну улогу. Команде попут нотФоунд: истина обезбедите да неважеће руте грациозно преусмеравају кориснике на страницу 404 уместо да руше апликацију. У међувремену, постављање кеш: 'без кеша' за АПИ позиве гарантује да се најновији подаци увек преузимају. Ове карактеристике чине апликацију робусном и једноставном за употребу. Замислите да ажурирате листу хотела, али и даље видите застареле информације — то би фрустрирало кориснике! Ове скрипте спречавају такве сценарије, обезбеђујући да се најновији детаљи о производу увек приказују.

const axios = require('axios');
const baseURL = 'https://your-backend-api.com';

async function fetchProductDetails(slug) {
  try {
    const response = await axios.get(`${baseURL}/api/product/${slug}`);
    return response.data;
  } catch (error) {
    console.error('Error fetching product details:', error.message);
    throw new Error('Could not fetch product details');
  }
}

module.exports = fetchProductDetails;
// Unit Test Example
const fetchProductDetails = require('./fetchProductDetails');
test('Should fetch valid product details', async () => {
  const data = await fetchProductDetails('test-product');
  expect(data).toHaveProperty('name');
});

export async function getStaticPaths() {
  try {
    const res = await fetch(`${baseURL}/api/all-product`, { cache: 'no-cache' });
    const { data } = await res.json();
    const paths = data.map(product => ({
      params: { product_slug: product.slug },
    }));
    return { paths, fallback: 'blocking' };
  } catch (error) {
    console.error('Error fetching paths:', error.message);
    return { paths: [], fallback: 'blocking' };
  }
}
// Add additional error handling for 500 responses

import { dehydrate, QueryClient } from '@tanstack/react-query';
import { fetchProductDetails } from './api/fetchProductDetails';

export async function getStaticProps(context) {
  const { product_slug } = context.params;
  const queryClient = new QueryClient();
  try {
    await queryClient.prefetchQuery(['productDetails', { product_slug }], () => fetchProductDetails(product_slug));
    return {
      props: { dehydratedState: dehydrate(queryClient) },
      revalidate: 10,
    };
  } catch (error) {
    console.error('Error prefetching product data:', error.message);
    return {
      notFound: true,
    };
  }
}
// Modularized prefetching ensures maintainability

Детаљно истражујући инкременталну статичку регенерацију (ИСР).

Инкрементална статичка регенерација (ИСР) је моћна карактеристика у Нект.јс који вам омогућава да ажурирате постојеће странице без обнављања целе апликације. Ова могућност је од суштинског значаја за апликације великих размера, посебно за платформе за е-трговину где се подаци често мењају, као што су листе производа или ажурирања цена. Постављањем поново валидирати имовине у getStaticProps, програмери могу да одреде колико често се страница поново генерише у позадини. Замислите књижару која свакодневно додаје нове наслове—ИСР осигурава да сајт остане ажуриран без потпуног поновног постављања. 📚

Један кључни аспект ИСР-а је ефикасно руковање резервним стањима. Коришћење fallback: 'blocking', као што је приказано у претходном примеру, осигурава да се нове или ретке руте генеришу на захтев када се приступи први пут. Ово смањује почетно време израде и посебно је корисно за апликације са хиљадама страница. Пример из стварног света може бити веб локација за путовања која динамички креира странице за мање позната одредишта само када их корисници траже, штедећи ресурсе и обезбеђујући ефикасност. ✈

Још један изазов са ИСР-ом је управљање грешкама. Ако бацкенд АПИ не успе да врати податке, ИСР може потенцијално да генерише неисправну страницу. Укључујући правилно руковање грешкама у функције као што су fetch и враћање notFound: true у таквим случајевима, програмери могу спречити овај сценарио. Овај приступ не само да штити корисничко искуство, већ и избегава СЕО казне од претраживача који индексирају покварене странице. Ове праксе чине ИСР виталним алатом за скалирање апликација уз одржавање перформанси и поузданости.