Network Error

[Nader-CS]

Summary

Network Error shown randomly when hit my endpoints

Additional information

i have this code ''use client';
import {ANALYTICS_CUSTOM_EVENTS} from '@/lib';
import {defaultLocale} from '@/lib';
import {createApi, fetchBaseQuery} from '@reduxjs/toolkit/query/react';
import {getCookie} from 'cookies-next';
import mixpanel from 'mixpanel-browser';

const baseQuery = fetchBaseQuery({
  baseUrl: process.env.NEXT_PUBLIC_API_URL,
});

const baseQueryWithInterceptor = async (args, api, extraOptions) => {
  const userAgent = navigator.userAgent || 'Unknown';
  const publicToken = getCookie('token');
  const locale = getCookie('NEXT_LOCALE') || defaultLocale;
  const orderId = getCookie('orderId');
  const endpoint = args?.url;
  let isConnected;
  let isServerReachable;

  args.headers = {
    ...args.headers,
    'Accept-Language': locale,
    'User-Agent': userAgent,
    ...(publicToken && {Authorization: `Bearer ${publicToken}`}),
  };

  const result = await baseQuery(args, api, extraOptions);
  const headers = Object.fromEntries(
    result?.meta?.response?.headers?.entries(),
  );
  const requestId = headers?.['x-request-id'];

  if (result?.error) {
    const isNetworkError = result?.error?.status === 'FETCH_ERROR';
    if (isNetworkError) {
      const [serverRes, cloudflareRes] = await Promise.all([
        fetch(`${process.env.NEXT_PUBLIC_API_URL}/up`,).catch(() => null),
        fetch(`https://1.1.1.1/cdn-cgi/trace`).catch(() => null),
      ]);

      isServerReachable = serverRes?.ok || false;
      isConnected = cloudflareRes?.ok || false;
    }

    const props = {
      description:
        result?.error?.error ||
        result?.error?.errors?.[0] ||
        result?.error?.data?.error ||
        result?.error?.data?.errors?.[0],
      ...(orderId && {orderId}),
      ...(isNetworkError && {isServerReachable, isConnected}),
      ...(requestId && {requestId}),
      ...(endpoint && {endpoint}),
      publicToken,
    };

    mixpanel.track(ANALYTICS_CUSTOM_EVENTS.EXCEPTION, props);

    return {
      error: {
        ...(result?.error?.data || result?.error),
        headers,
        status: result.meta?.response?.status,
      },
    };
  }
  return {
    data: {
      ...result?.data,
      headers,
    },
  };
};

export const api = createApi({
  baseQuery: baseQueryWithInterceptor,
  endpoints: () => ({}),
  tagTypes: ['Order', 'CrossSales'],
});
' and 

'use server';

import {cookies} from 'next/headers';
import {defaultLocale} from './constants';

const baseFetch = async ({
  endPoint,
  method = 'GET',
  options = {},
  queryParams = {},
  body,
  url,
  headers = {},
}) => {
  try {
    const appCookies = await cookies();
    const publicToken = appCookies.get('token')?.value;
    const locale = appCookies.get('NEXT_LOCALE')?.value || defaultLocale;

    const queryString = new URLSearchParams(queryParams).toString();
    const fullUrl =
      url ||
      `${process.env.NEXT_PUBLIC_API_URL}${endPoint}${
        queryString ? `?${queryString}` : ''
      }`;

    const response = await fetch(fullUrl, {
      method,
      headers: {
        ...(publicToken && {Authorization: `Bearer ${publicToken}`}),
        'Content-Type': 'application/json',
        'Accept-Language': locale,
        ...headers,
      },
      ...(body && {body: JSON.stringify(body)}),
      ...options,
    });

    const text = await response.text();
    const json = text ? JSON.parse(text) : null;

    if (!response.ok) {
      return {
        ...json,
        status: response?.status,
        headers: Object.fromEntries(response.headers.entries()),
        endPoint,
      };
    }

    return {
      data: json,
      headers: Object.fromEntries(response.headers.entries()),
    };
  } catch (err) {
    return {
      error: err?.message || 'Unexpected error occurred',
    };
  }
};

export default baseFetch;

the problem is my endpoints fails randomly but my backend url/up can be accessed in the same time
this issue also happen in my react native app , so i don't know what excactly the issue

Example

No response

[Nader-CS]

any solution ?

[icyJoseph]

Could you explain a bit more how's this failing? If I understand correctly, both the browser and server action hitting NEXT_PUBLIC_API_URL give you Network Error, at random?

[Nader-CS]

i used Mixpanel to log website errors. This particular error — TypeError: Network request failed — appears randomly for some users. However, during these occurrences, users can still access the /up endpoint on my server, which means the backend is running and there is internet connectivity. So, I'm not sure why this error occurs.