How to handle the +error.svelte with Sveltekit and Paraglide-js?

[psntr]

Probably really newbie question but honestly I can't manage to make my traditional 404 not found error page with Paraglide-js adapter and Svetelkit.

Everytime I enter a route that doesn't exist, I'm facing the Internal error 500 page instead of my +error.svelte page. Anyone facing similar issue or how do you guys handle it?

[LorisSigrist]

hmm, that doesn't sound like it's supposed to happen. I'll turn this into an issue and investigate

[psntr]

Thanks, I'm adding in here my hook.server.js for further context, this hook help me redirect to the correct route depending on user preferred language. It's mainly useful when we a link to our global audience instead of splitting link for each languages. So for instance mywebite.com/about-us can be mywebsite.com/en/about-us if pref language is 'en' or mywebsite.com/ja/about-us if user's pref language is in japanese.

import { sequence } from "@sveltejs/kit/hooks";
import { determineUserLanguage } from "$lib/utils/i18nUtils";
import { availableLanguageTags } from "$paraglide/runtime";
import { i18n } from "$lib/i18n";
import { error } from "@sveltejs/kit";
export const i18nHandle = i18n.handle();

export async function customHandle({ event, resolve }) {
    const requestURL = new URL(event.request.url);
    const originalPathname = requestURL.pathname;
    let pathSegments = originalPathname.split('/').filter(Boolean);
    if (
		pathSegments.includes('api') ||
		pathSegments.includes('sitemap.xml') ||
		pathSegments.includes('robots.txt') ||
        originalPathname.startsWith('/sap-social_') // Social IMG
	) {
		return resolve(event);
	}
    else if(event.route.id === null) {
         return error(404, 'Not Found');
    }
    let potentialLangSegment = pathSegments[0];
    let matchedLang = availableLanguageTags.find(l => l.toLowerCase() === potentialLangSegment?.toLowerCase());

    let preferredLang = determineUserLanguage(event.request, availableLanguageTags);

    if (!matchedLang) {
        if (preferredLang !== 'ja') {
            preferredLang = 'en';
        }
    } else {
        preferredLang = matchedLang;
    }

    const newPathWithoutLang = matchedLang ? '/' + pathSegments.slice(1).join('/') : originalPathname;

    // Apply redirection only if the explicit language choice doesn't match the preferred language
    if (!matchedLang || (matchedLang && preferredLang !== matchedLang)) {
        // Directly redirect without checking page existence, relying on SvelteKit to handle potential 404s
        return new Response(undefined, {
            headers: { 'Location': `/${preferredLang}${newPathWithoutLang}${requestURL.search}` },
            status: 302
        });
    }

    // Set the language for use in server-side logic or components
    event.locals.lang = preferredLang;

    // Proceed with the request without redirection
    return resolve(event);
}

export const handle = sequence(i18nHandle, customHandle);