Client side global error handling in SvelteKit

Question

I cannot figure out how to catch and handle unhandled exceptions globally on the client side in SvelteKit. I have created a very quick demo app below to show what I am seeing:

https://github.com/Jabronironi/SvelteKitErrorHandleExample

What I have noticed is:

• SSR On and Server Error = Routed to Error Page
• SSR On and Client Error = Requested page rendered on the server successfully, Requested page logs error in console when trying to render locally, and displays the prerendered server page to user.
• SSR Off and Server OR Client Error = White Page of Death, error is logged in console.

My goal is to catch errors that occur client side (not on the server) smoothly and globally to improve client experience. My current solution is creating an error component and putting it on every page and wrapping most of my logic in try/catch that utilize the component when an error occurs. The issue with this approach is it is repetitive, and not truly global error handling. It is better than nothing, but I hate it. Has anyone else solved this in a better way? Is it possible for the framework to help solve this better?

I have also created a branch that shows one attempt at handling errors on client side better, but I hate it as it requires actually handling them on pages to pass up the data to the layout, and it actually doesn't catch all client errors. Regardless, you can see that here:

https://github.com/Jabronironi/SvelteKitErrorHandleExample/tree/CatchAndHandleInLayoutThroughStore

Maybellmaybelle

Answer 1

It seems like you need the

<svelte:window on:error={handleError}/>

If you place it in the +layout.svelte it will be called every time an error occurs.

• Please note this will not prevent the error from being thrown, it just gives you a global place to react to it.

Nasa

Awesome. This sounds like it has potential. I will test that today and report back. – Maybellmaybelle

Tried your suggestion - but cannot get that to work. See: github.com/Jabronironi/SvelteKitErrorHandleExample/tree/… Do you have a working example? – Maybellmaybelle

@JeremyArmstrong I took a look at your repo, and it works but I think we have a misunderstanding... The <svelte:window on:error={handleError}/> will handle errors related to the window object in your browser. I assumed that's what you meant by "client errors". so let's say an exception is thrown in the onMount function will not trigger this but an exception thrown in an on-button click function will trigger it. I will start searching for a method that handle both and update my answer if I found something. – Nasa

Yeah, the complication is that all my errors are in the browser since I am doing a SPA. I am not doing any server side stuff in my SvelteKit app. Would just be amazing if SvelteKit provided an opinionated way to globally handle client side errors. I appreciate you looking! – Maybellmaybelle

So we ended up solving this by using a combination of window.onerror and window.onunhandledrejection to handle the error and show a fallback. It feels janky, but is working well enough for us to move forward. I was also pointed to a github discussion about the lack of framework support and considerations to improve @ github.com/sveltejs/rfcs/pull/46. At this point I will use this setup until the framework provides a better path. – Maybellmaybelle