Search code examples
sveltekit

SvelteKit error handling not working as expected

I am following the documentation here. Accordingly I have created a src/routes/+error.svelte component. However when an error occurs SvelteKit does not render the error component and instead I see an unhandled exception in the console log. e.g., I have this code:

export const call_backend = async (path, options = {}) => {
 ...
  try {
    const res = await fetch(url, options)
    if (res.ok) {
      data = await res.json()
      return data
    } else {
      error(res.status, { message: res.statusText })
    }
  } catch (e) {
    error(500, { message: messages.internal_server_error })
  }  
}

and when error(500, { message: messages.internal_server_error }) gets called I see:

enter image description here

so SvelteKit is not catching the error. How can I fix this? The doc says:

This throws an exception that SvelteKit catches, causing it to set the response status code to 404 and render an +error.svelte component,

clearly that is not what is happening here.

Additional Info: The component from where the error is originating is src/routes/some-routes/some-component.svelte. I am on "svelte": "^5.0.0", and "@sveltejs/kit": "^2.16.0",

Solution

  • error is for load errors (see docs example), which allows SvelteKit to return an error response. This cannot happen in your own client-side code. More info on this in the docs for +error.

    You will have to handle errors like this manually or move your logic to a load function. For handling errors during rendering of a component <svelte:boundary> can be used, this will not catch async code like the given request, though.

    Not sure what the best approach for replacing the page with an error would be. I am not aware of a simple method of just showing the +error page. One could probably introduce a layout that can toggle between page and error content which could be controlled via a shared context.

    Most of the time I handle async logic errors on the page via toasts, inline error notifications or dialogs instead.