Setup

• I have an express backend server running on localhost:8000
• My sveltekit frontend is running on localhost:5173

Problem

• I shut my backend server down to see what happens on the frontend
• I noticed that I keep crashing with an ECONNREFUSED when I am using promise streaming and everything is fine when I don't use

The one that works

+page.server.ts

import { REQUEST_TIMEOUT } from '$lib/config';
import { getPopularNewsListEndpoint } from '$lib/endpoints/backend';
import { handleFetchError } from '$lib/functions';
import type { PopularNewsListResponse } from '$lib/types/PopularNewsListResponse';
import { error } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';

async function fetchPopularNewsItems(
    endpoint: string,
    fetch: (input: RequestInfo | URL, init?: RequestInit) => Promise<Response>
) {
    const init: RequestInit = {
        credentials: 'include',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json'
        },
        method: 'GET',
        signal: AbortSignal.timeout(REQUEST_TIMEOUT)
    };
    try {
        const response = await fetch(endpoint, init);
        if (!response.ok) {
            throw new Error(`Error: something went wrong when fetching data from endpoint:${endpoint}`, {
                cause: { status: response.status, statusText: response.statusText }
            });
        }
        const result: PopularNewsListResponse = await response.json();
        return result.data;
    } catch (e) {
        const { status, message } = handleFetchError(e, endpoint);
        error(status, message);
    }
}

export const load: PageServerLoad = async ({ fetch }) => {
    const endpoint = getPopularNewsListEndpoint();
    return { popular: await fetchPopularNewsItems(endpoint, fetch) };
};

The one that crashes

import { REQUEST_TIMEOUT } from '$lib/config';
import { getPopularNewsListEndpoint } from '$lib/endpoints/backend';
import { handleFetchError } from '$lib/functions';
import type { PopularNewsListResponse } from '$lib/types/PopularNewsListResponse';
import { error } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';

async function fetchPopularNewsItems(
    endpoint: string,
    fetch: (input: RequestInfo | URL, init?: RequestInit) => Promise<Response>
) {
    const init: RequestInit = {
        credentials: 'include',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json'
        },
        method: 'GET',
        signal: AbortSignal.timeout(REQUEST_TIMEOUT)
    };
    try {
        const response = await fetch(endpoint, init);
        if (!response.ok) {
            throw new Error(`Error: something went wrong when fetching data from endpoint:${endpoint}`, {
                cause: { status: response.status, statusText: response.statusText }
            });
        }
        const result: PopularNewsListResponse = await response.json();
        return result.data;
    } catch (e) {
        const { status, message } = handleFetchError(e, endpoint);
        error(status, message);
    }
}

export const load: PageServerLoad = async ({ fetch }) => {
    const endpoint = getPopularNewsListEndpoint();
    return { popular: fetchPopularNewsItems(endpoint, fetch) };
};

• Inside my +page.svelte, I assign this one like

...
data.popular
  .then((items) => {
    popularNewsListItems.bearish = items[0];
    popularNewsListItems.bullish = items[1];
    popularNewsListItems.dislikes = items[2];
    popularNewsListItems.likes = items[3];
    popularNewsListItems.trending = items[4];
  })
  .catch(console.error);
...

• Here is the error

node:internal/process/promises:392
      new UnhandledPromiseRejection(reason);
      ^

UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "[object Object]".
    at throwUnhandledRejectionsMode (node:internal/process/promises:392:7)
    at processPromiseRejections (node:internal/process/promises:475:17)
    at process.processTicksAndRejections (node:internal/process/task_queues:106:32) {
  code: 'ERR_UNHANDLED_REJECTION'
}

Node.js v22.12.0

• The literal difference between the 2 snippets is an await

Question

• How do I stream a promise without crashing the sveltekit app when backend is unreachable?