DejaVue #E035 - Error Handling in Vue

All of you have seen users do weird things with your application and running into strange scenarios - who can't relate to this? For this and many other reasons, the right way of error handling is important in you application. Join Michael and Alex on a discussion of the different ways one can handle errors in their application. That includes not always showing an error page, but also handling errors request-based or component-based! On that note, error messages and how to write decent ones that are helpful for the users are discussed, as well as how components like NuxtErrorBoundary work under the hood Enjoy the episode! --- Your Hosts * Michael Thiessen * Twitter - https://bsky.app/profile/michaelthiessen.bsky.social * YouTube - @michaelnthiessen * Web - https://michaelnthiessen.com/ * Alexander Lichter * YouTube - @TheAlexLichter * Bsky - https://bsky.app/profile/thealexlichter.com * Web - https://www.lichter.io/ -- Chaptermarks: 00:00 Welcome to DejaVue 01:22 The good old error page 01:58 Write good error messages! 03:11 The Vue global error handler 05:07 Server vs. Client Errors in Nuxt.js 08:34 The vue:error hook 09:05 Global error handling for $fetch and interceptors 11:10 Throw unhandled errors in Prod with Vue 3.5? 13:07 Component-level error handling 16:33 NuxtErrorBoundary 18:01 defineAsyncComponent 18:53 Request-based error handling 21:45 New default values in Nuxt 4 23:30 Error Tracking 26:33 Actually handling the errors 28:54 Wrapping up -- Links and Resources ▶ State of JS Survey https://survey.devographics.com/en-US/survey/state-of-js/2024?source=dejavue_e035 ▶ Sentry https://sentry.io/welcome/?utm_source=dejavue&utm_medium=description&utm_content=e035 ▶ Bugsnag https://www.bugsnag.com/ ▶ Rollbar https://rollbar.com/ ▶ Michael's talk on error handling in Nuxt https://www.youtube.com/watch?v=UBDVm8c7YoA ▶ Michael's article on error handling in Nuxt https://masteringnuxt.com/blog/handling-errors-in-nuxt3?friend=DEJAVUE ▶ And another deep dive into Nuxt 3 error handling https://masteringnuxt.com/blog/how-to-use-error-handling-to-create-rock-solid-apps?friend=DEJAVUE ▶ DejaVue #E034 - Data Fetching in Vue and Nuxt https://share.transistor.fm/s/422eae00 ▶ Vue Issue regarding throwing errors in production (low level) https://github.com/vuejs/core/issues/7876 ▶ Vike https://vike.dev/ ▶ NuxtErrorBoundary component Source Code uxt/src/app/components/nuxt-error-boundary.ts ▶ ofetch https://github.com/unjs/ofetch ▶ Zod https://github.com/colinhacks/zod ▶ Valibot https://github.com/fabian-hiller/valibot/ ▶ Nuxt 4 error and data will be undefined by default https://nuxt.com/docs/getting-started/upgrade#default-data-and-error-values-in-useasyncdata-and-usefetch ▶ Create abstractions for your headings and buttons https://www.youtube.com/watch?v=0u9iAy4t2K4&feature=youtu.be -- Follow DejaVue on ▶ The Web: https://dejavue.fm/ ▶ Bsky: https://bsky.app/profile/dejavue.fm ▶ Apple Podcast: https://podcasts.apple.com/us/podcast/dejavue/id1737631788 ▶ YouTube: https://www.youtube.com/@DejaVueFm ▶ Spotify: https://open.spotify.com/show/5VQ15QHkC7HSmwTYR7vCPF ▶ Deezer: https://www.deezer.com/show/1000792252 ▶ Amazon Music: https://music.amazon.com/podcasts/798ccbb2-4a8f-4d83-bff7-00cbc8730f56 ▶ Pocket Casts: https://pca.st/49qr8d1k -- Links marked with * are affiliate links. We get a small commission when you register for the service through our link. This helps us to keep the podcast running. We only include affiliate links for services mentioned in the episode or that we use ourselves.