Logo
    Search

    Hasty Treat - Async + Await Error Handling Strategies

    enMay 06, 2019

    Podcast Summary

    • Effective error handling with SentryUse try and catch blocks for local error handling, send errors to Sentry for deeper analysis, and improve user experience and website stability.

      Effective error handling is crucial in web development, and Sentry is a powerful tool to help manage and understand errors. Wes and Scott discussed various error handling strategies, starting with the common approach of using a try and catch block. This method allows developers to handle errors gracefully and prevent crashes. However, they also highlighted the importance of sending errors to a service like Sentry for further analysis. Sentry automatically collects detailed information about errors, including stack traces, browser and device details, and user information. This data can help developers reproduce and fix issues more efficiently, even without direct user feedback. By using Sentry, developers can improve the user experience and ensure that their websites run smoothly. If you're interested in trying Sentry, use the coupon code "tasty treat" at century.io to get two months free.

    • Error handling in async functionsWrap async code in try-catch blocks to handle errors, but be aware of potential complexities with block scoping and variable access

      Error handling in async functions involves wrapping your code inside an async function, then using a try-catch block below it to handle any errors that may occur. While this method is simple and effective, it can add code bloat and create issues with block scoping. When converting synchronous code to async, you may need to wrap entire functions or calls in try-catch blocks, making the code less readable. Additionally, if you have a variable inside a try block that you need to access in the catch, you must either throw the error and define the variable in the catch or define the variable outside of the block or use a var variable. These complexities can make error handling in async functions a bit more challenging.

    • Handling errors with async-await using high-order functionsWrite error-free functions, then create a high-order function to handle errors and return a new function with error handling added

      When it comes to handling errors with async-await in JavaScript, there are different approaches. One of the more complex but elegant methods is using a high-order function. In this approach, you write your function, like fetchUsers, as if nothing could go wrong. Then, you create another function, like handleErrors, which takes in your fetchUsers function as an argument and returns a new function. This new function is essentially the original function with error handling added. High-order functions are common in React with components like withState or withApollo. They take a function and return a new function with added information or functionality. In the context of async-await, the new function that's returned calls the original function and attaches a dot catch at the end. This is necessary because async functions return promises, allowing you to catch specific errors using regular promise syntax. Ultimately, you can choose to use async-await with error handling or dot catch from regular promises, depending on your preference and the specific requirements of your project. In Node.js or Express, for instance, you might pass errors to an error page by calling next. Keep in mind that high-order functions can make your code more readable and maintainable by separating error handling from the main logic. However, they can also add complexity, so it's essential to understand the trade-offs before implementing them.

    • Simplifying error handling with middleware in Node.jsUsing error handling middleware in Node.js can help simplify the process of handling errors by passing them down the routing chain and rendering error pages, reducing redundancy and providing stack traces and error information in development mode.

      Using error handling middleware in Node.js can help simplify the process of handling errors by passing them down the routing chain and rendering error pages. This approach allows developers to write error handling logic in one place and reuse it across multiple routes, reducing redundancy. The error handling middleware can catch both intentional and unintentional errors, and in development mode, it can provide a stack trace and additional error information. However, this method may not be suitable for every situation, as some developers may prefer handling errors differently for each route. In such cases, multiple high-order functions may be required. Additionally, error handling in a synchronous function can be achieved by chaining a dot catch onto the end. Overall, error handling middleware can lead to a more concise and efficient error handling process in Node.js.

    • Error handling in async/await without try-catchAsync functions in JavaScript return promises, allowing for error handling using a dot catch at the end of the function, and Node.js provides an unhandledRejection event for unhandled errors.

      Using async/await syntax in JavaScript for handling asynchronous tasks doesn't require a try-catch block for error handling. Instead, you can simply chain a dot catch at the end of the async function to handle errors. This is because an async function always returns a promise. This syntax is often overlooked, but it offers a cleaner and more straightforward way to handle errors in asynchronous code. Additionally, Node.js provides an unhandledRejection event, which is important to listen for in Node.js applications to prevent the process from being terminated when an error is not handled. When handling errors, it's recommended to send them to a tracking service for further analysis and logging. Overall, this approach allows for more efficient and effective error handling in asynchronous JavaScript code.

    • Effective error handling improves user experienceImplementing error codes and using context API in React helps communicate issues to users and display error messages consistently, while tools like Sentry can track and manage errors for valuable insights.

      Effective error handling is crucial for providing a good user experience. The speaker discussed how they maintain a list of error codes and use them to communicate issues to users. These error codes can indicate malicious activity or issues caused by VPNs or other tools. By passing these errors along to users, developers can help them troubleshoot and improve their experience. The speaker also shared a use case of implementing an error handling component using React's context API. This component makes it easy to display error messages to users in a consistent way, regardless of where they occur in the application. The speaker also mentioned using a tool like Sentry to track and manage these errors. Overall, the key takeaway is that thoughtful error handling can help improve the user experience, prevent frustration, and provide valuable insights for developers.

    • Effective error handling with SyncawayUnderstand errors, retry requests, implement fallbacks, prioritize error handling, and regularly review logs for smooth functionality.

      Handling errors effectively in programming, specifically with the Syncaway tool, involves a few key options. First, understanding the nature of the error and its potential causes is crucial. Then, implementing appropriate error handling techniques such as retrying requests or implementing fallback mechanisms can help mitigate the impact of errors. Additionally, it's essential to prioritize error handling in the development process and regularly review logs to identify and address recurring errors. While the process may seem complex initially, with practice and experience, handling errors becomes a more manageable and routine part of programming. Remember, the ultimate goal is to ensure smooth and reliable functionality for users, and effective error handling is a crucial step towards achieving that. So, keep learning, experimenting, and refining your error handling skills. And for more insights and discussions on programming and related topics, tune in to Syntax.fm for a full archive of shows and don't forget to subscribe or leave a review if you enjoy the content.

    Recent Episodes from Syntax - Tasty Web Development Treats

    789: Do More With AI - LLMs With Big Token Counts

    789: Do More With AI - LLMs With Big Token Counts

    Join Scott and CJ as they dive into the fascinating world of AI, exploring topics from LLM token sizes and context windows to understanding input length. They discuss practical use cases and share insights on how web developers can leverage larger token counts to maximize the potential of AI and LLMs.

    Show Notes

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    CJ: X Instagram YouTube TwitchTV

    Randy: X Instagram YouTube Threads

    788: Supabase: Open Source Firebase for Fullstack JS Apps

    788: Supabase: Open Source Firebase for Fullstack JS Apps

    Scott and CJ chat with Paul Copplestone, CEO and co-founder of Supabase, about the journey of building an open source alternative to Firebase. Learn about the tech stack, the story behind their excellent documentation, and how Supabase balances business goals with open-source values.

    Show Notes

    • 00:00 Welcome to Syntax!
    • 00:30 Who is Paul Copplestone?
    • 01:17 Why ‘Supa’ and not ‘Super’?
    • 02:26 How did Supabase start?
    • 08:42 Simplicity in design.
    • 10:32 How do you take Supabase one step beyond the competition?
    • 12:35 How do you decide which libraries are officially supported vs community maintained?
      • 15:17 You don’t need a client library!
    • 16:48 Edge functions for server-side functionality.
    • 18:51 The genesis of pgvector.
    • 20:59 The product strategy.
    • 22:25 What’s the story behind Supabase’s awesome docs?
    • 25:26 The tech behind Supabase.
    • 35:46 How do you balance business goals with open source?
    • 42:01 What’s next for Supabase?
    • 44:15 Supabase’s GA + new features.
    • 48:24 Who runs the X account?
    • 50:39 Sick Picks + Shameless Plugs.

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    CJ: X Instagram YouTube TwitchTV

    Randy: X Instagram YouTube Threads

    787: You Should Try Vue.js

    787: You Should Try Vue.js

    Scott and CJ dive deep into the world of Vue.js, exploring what makes this frontend framework unique and why it stands out from React and Svelte. CJ gives a comprehensive tour, covering everything from getting started to advanced features like state management and Vue’s built-in styles.

    Show Notes

    Vue.js: The Documentary.

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    786: What Open Source license should you use?

    786: What Open Source license should you use?

    Scott and CJ dive into the world of open source, breaking down its meaning, benefits, and the various types of licenses you’ll encounter. From permissive licenses like MIT and Apache 2.0 to copy-left licenses such as GNU GPLv3, they’ll help you choose and apply the right license for your project.

    Show Notes

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    785: What’s Next for NextJS with Tim Neutkens

    785: What’s Next for NextJS with Tim Neutkens

    Scott and Wes dive into the world of Next.js with special guest Tim Neutkens from Vercel. They explore the latest updates, including the React Compiler and React Server Components, discussing their impact on developer workflows and the future of Next.js development.

    Show Notes

    • 00:00 Welcome to Syntax!
    • 00:30 What does the React Compiler do?
    • 05:04 Will React Compiler help with managing Context?
    • 06:39 What happens if you’re not using a React Compiler?
    • 09:30 Will this work on any NextJS version?
    • 12:18 What are React Server Components?
    • 16:28 Shipping all the data inside an encapsulated component.
    • 20:17 Clearing up the frustrations around retrofitting server components.
    • 23:13 Handing migration.
    • 28:30 Is this just a fetch request with props?
    • 36:41 How closely are the NextJS and React teams working?
    • 41:53 Will we ever get Async Client Components?
    • 43:52 Async Local Storage API.
    • 45:31 Turbopack.
    • 57:51 Sick Picks & Shameless Plugs.

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    784: Logging × Blogging × Testing × Freelancing

    784: Logging × Blogging × Testing × Freelancing

    In this Potluck episode, Scott and Wes tackle listener questions on modern blogging, website environmental impact, and using LangChain with LLMs. They also cover CSS hyphens, unit vs. integration testing, and balancing web development with new parenthood.

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    783: How We Built a Netflix Style “Save for Offline” Feature Into Syntax

    783: How We Built a Netflix Style “Save for Offline” Feature Into Syntax

    Scott and Wes dive into the world of browser caching for audio files, exploring the File System API and the Cache API. They discuss size restrictions across different browsers, how tools like Riverside.fm leverage IndexedDB, and walk through code examples for creating, retrieving, and managing cached audio data.

    Show Notes

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott:X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    782: The Developer’s Guide To Fonts with Stephen Nixon

    782: The Developer’s Guide To Fonts with Stephen Nixon

    Scott and CJ are joined by Stephen Nixon of ArrowType to delve into the world of fonts and type for developers. They explore the intricacies of font creation, the utility of variable fonts, and offer tips for making visually appealing typography on the web.

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott:X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    781: Potluck - The Value of TypeScript × Vue vs Svelte × Leetcode

    781: Potluck - The Value of TypeScript × Vue vs Svelte × Leetcode

    In this potluck episode of Syntax, Scott and CJ serve up a variety of community questions, from the nuances of beginner vs. advanced TypeScript to the pros and cons of SvelteKit. They also discuss falling out of love with React, shipping private packages via NPM, and the eternal struggle of always starting but never finishing projects.

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott:X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    780: Cloud Storage: Bandwidth, Storage and BIG ZIPS

    780: Cloud Storage: Bandwidth, Storage and BIG ZIPS

    Today, Scott and Wes dive into cloud storage solutions—why you might need them, how they use them, and what you need to know about the big players, fees, and more.

    Show Notes

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott:X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    Related Episodes

    Softwarequalität in Webapplikationen

    Softwarequalität in Webapplikationen
    Verena spricht in dieser Folge (remote) mit Buch-Autor Sebastian Springer und besprechen die Fortschritte in der Entwicklung von Webapplikationen. Auch wie schnell in diesem Bereich Wissen veraltet sein kann. Wie kann man mit JavaScript sauber Webapplikationen entwickeln und hat weniger Schmerzen bei der Wartung? In diesem Podcast eine Premiere für die Aufnahme eines Interviewpartners über eine Internetleitung. Persönlich finden wir jedoch besser :).

    Stacks On Stacks On Stacks

    Stacks On Stacks On Stacks

    Dude, in this gnarly podcast episode, Seth Whiting and Jake Pacheco are all about web development frameworks, bro! They break down the MEAN stack (MongoDB, Express.js, AngularJS, and Node.js) and compare SQL and NoSQL databases. It's all about choices, man!

    Frameworks and libraries, bro, they got you covered! Frameworks like Angular and Vue give you rules and guidelines for writing code, while libraries offer pre-written code blocks for specific tasks. Seth shares his experience with jQuery and Knockout.js, and he's all about that MEAN stack for full-stack projects. Express.js, a back-end framework, makes working with databases a breeze, dude.

    Now, here's the kicker: Next.js, the full-stack framework that combines React on the front end with Node.js on the back end. It's like a one-stop shop, man! Next.js hooks you up with project scaffolding and amps up the user experience. Just make sure you know React and Node.js before you ride the Next.js wave, bro.

    This podcast episode is a tubular journey through web development frameworks, their role in creating killer apps, and how the front end and back end talk to each other. It's a rad ride, bro!

    Special thanks to Diarrhea Planet for our intro and outro music and @SkratchTopo for our artwork.

    Potluck - Where to start with JS × Freelancing × Cron jobs × Split testing × Frameworks in 2019 × More

    Potluck - Where to start with JS × Freelancing × Cron jobs × Split testing × Frameworks in 2019 × More

    It’s another potluck episode in which Wes and Scott answer your questions! This month - thoughts on frameworks for 2019, React Native, when should you start freelancing, where to start with JS, cron jobs, split testing and more!

    DevLifts — Sponsor

    DevLifts - Thad and JC are on a mission to make web developers healthy. They’re currently offering two options: The first is Fit.Start - perfect for beginners or those looking to get back at it.
    Use the coupon code “syntax” to get 50% off the fit.start plan. The second is DevLifts Premium - for those looking for a laser-focused approach and maximum accountability. Use the coupon code “tasty” to get 50% off the premium plan. Check it out today! Just for January their eight-week plan is back. Use the coupon code “newyear19” to get $50 off.

    Kyle Prinsloo’s Freelancing & Beyond — Sponsor

    Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at https://studywebdevelopment.com/freelancing and use the coupon code “syntax” at checkout to get 25% off.

    Show Notes

    1:40

    • Where is the best place to start with JS coming from WordPress?

    5:36

    • How do you set up cron jobs? What are the best tools to use, should they run on their own server or on the application server, etc.?

    17:13

    • What new skills, frameworks, projects are you look forward to learning in 2019?

    21:35

    • Do you use any software for tracking analytics on your site and do you ever use this data to run split tests? If so, what is your preferred method for running split tests?

    28:24

    • What’s your best tip for young coders to stay productive and not lose time?

    32:08

    • I’m 17 and learning web dev. I’m pretty concerned about my skills and feeling some impostor syndrome. Is it ok to start freelancing?

    37:26

    • What is React Native? How do people tend to use it? If you want a native and web app, do they share code?

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Выпуск №20 в гостях Андрей Ситник - Рождение суперзлодея, цензура и почему митапы лучше конференций

    Выпуск №20 в гостях Андрей Ситник - Рождение суперзлодея, цензура и почему митапы лучше конференций
    В гостях Андрей Ситник https://sitnik.ru/en/ Поговорили про смерть фронтенда (как без этого), цензуру, цифровой шабат, митапы, конференции и будущее.

    Выпуск №39: Привет, Svelte! Пока, moment.js!

    Выпуск №39: Привет, Svelte! Пока, moment.js!
    написал виджет на Свелт и доволен https://habr.com/ru/company/citymobil/blog/504270/ TS in Svelte https://svelte.dev/blog/svelte-and-typescript Новый пропозал про правильную дату https://tc39.es/proposal-temporal/docs/cookbook.html Добавляем https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat как и что подсвечивать https://buttondown.email/hillelwayne/archive/syntax-highlighting-is-a-waste-of-an-information/ Apple declined to implement 16 Web APIs in Safari due to privacy concerns https://css-tricks.com/apple-declined-to-implement-16-web-apis-in-safari-due-to-privacy-concerns/ Displaying the Current Step with CSS Counters https://css-tricks.com/displaying-the-current-step-with-css-counters/ Пики: Порядок отрисовки https://abandonedwig.info/blog/2020/07/03/css-painting-order.html Introduction to Node.js https://nodejs.dev/learn ШРИ 2019-2020 https://www.youtube.com/playlist?list=PLKaafC45L_SRoYnuEW5cgqHN-kpSTVfMs Хак чтобы сделать любой HTML в MD (например в ридми гитахаба) https://medium.com/@omrilotan/rich-html-in-github-readme-bfb3de791441