Custom 404 page/logic when story does not exist in Storyblok

[thebspin]

Describe the issue you're facing

I'm using the SDK only setting the version to published.
Inside my page.ts file i'm calling the storyblokAPi.get function to get a page that does not exist.
I would like to check if this page exists or not and be able to return my own 404 (that i want to call from Storyblok aswell).

Currently in my terminal i do see this:

{
  message: 'Not Found',
  status: 404,
  response: 'This record could not be found'
}

But my frontend itself shows:

500
Internal Error

I tried debugging and placing breakpoints after calling the storyblokApi.get function but it seems it does not even get passed that.

Reproduction

https://github.com/storyblok/storyblok-svelte/tree/main/playground-sveltekit

Steps to reproduce

Follow the tutorial that results in this: https://github.com/storyblok/storyblok-svelte/tree/main/playground-sveltekit
Call a not existing page in Storyblok

System Info

System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 361.98 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.9.0 - ~/Library/Caches/fnm_multishells/30950_1714475534857/bin/node
    npm: 10.1.0 - ~/Library/Caches/fnm_multishells/30950_1714475534857/bin/npm
    pnpm: 8.15.4 - /opt/homebrew/bin/pnpm
    bun: 1.0.30 - /opt/homebrew/bin/bun

Used Package Manager

npm

Error logs (Optional)

No response

Validations

• Follow our Code of Conduct

[roberto-butti]

Hi @thebspin , the example you are following is very simple, and doesn't manage any kind of errors (like story not found etc).
The idea you can follow is essentially managing the errors. In the official svelte doc you see an example where there is a condition that checks the objects is empty and then the error helper is called: https://kit.svelte.dev/docs/errors#expected-errors

Here because the storyblokAPi.get raise an exception you can catch the exception and then manage the error.
In this example, I'm catching the error and filling an object with some information useful for my case in the .svelte template file

Example:

    return storyblokApi
        .get("cdn/stories/home", {
            version: "draft",
            resolve_relations: resolveRelations,
        })
        .then((dataStory) => {
            return {
                story: dataStory.data.story,
                siteConfig: siteConfig.data.story,
                error: false,
            };
        })
        .catch((error) => {
            return {
                story: {},
                siteConfig: siteConfig.data.story,
                error: error,
            };
        });