error pages not translated when accessed in browser for the first time

[jitterbux]

Browser: Chrome 115.0.5790.170 os: macOS 13.2.1

If you try to visit https://locale-router-advanced.netlify.app/about/asdfasdfasdfasfdasdf

you will get:

error.shit.happens (404)
error.default

only after you reload the page manually again, you will then get the correct text:

Oh, dear... (404)
Page not found.

The same is true for the /cs/ and /de/ version.

UPDATE: It seems that not only for the first time but also if you leave the page open in the browser for a certain amount of time a few minutes and you refresh it, you get the error.shit.happens instead of Oh, dear... translation again. At least, for me it behaves like that. I noticed it when I tried to refreshed older tab I opened some time ago in Chrome.

[MarilorV]

Same for me. Did you or anyone found a solution ?

[twoends]

I got the same error. I fixed it adding the translations in the error object inside the hooks.server.ts

export const handleError: HandleServerError = async ({ event }) => {
    const errorId = crypto.randomUUID();
    const { locals } = event;
    const { lang } = locals;

    await loadTranslations(lang, 'error');

    return {
        message: 'Whoops!',
        errorId,
        translations: translations.get()  // <--- here
    };
};

and then using it to load the translation inside the error page

<script>
    import '../app.pcss';
    import { page } from '$app/stores';
    import { t, locale, addTranslations } from '$lib/i18n/translations';

    const { status } = $page;
    addTranslations($page.error?.translations);  // <--- here
</script>

<main>
    <h1>{$t('error.shit.happens')} ({status})</h1>
    <p>{$t(`error.${status}`, { default: $t('error.default') })}</p>
    <br />
    <br />
    {$locale} – {$t(`lang.${$locale}`)}
</main>

Remember to add the translations field into the app.d.ts to avoid typescript errors