5 Async + Await Error Handling Strategies

Поделиться
HTML-код
  • Опубликовано: 6 дек 2022
  • Here are a few different ways that you can handle promises that reject
  • НаукаНаука

Комментарии • 73

  • @zombiefacesupreme
    @zombiefacesupreme Год назад +9

    You know he's a tech dad when he not only has a box full of cables, but they're all properly bundled and organized.

    • @WesBos
      @WesBos  Год назад +1

      haha that was a recent project! Used to be such a mess

  • @whiterockjoe
    @whiterockjoe Год назад +33

    Wes posting on Twitter, and then merging all the Twitter feedback from programmers into RUclips posts like this is the new ChatGPT. 🙌

  • @whitefluffycloud
    @whitefluffycloud Год назад +5

    Great summary! I've always struggled with error handling. How to set things up etc. This video was super helpful. Working a lot with React, the Go way makes a lot of sense.

  • @Ouchie
    @Ouchie Год назад +1

    I was already using the Go way, but it is awesome to see that you can even expand it further.

  • @Dunktastic17
    @Dunktastic17 Год назад +4

    Nice to see you posting so much on RUclips lately! Always quality content!

    • @WesBos
      @WesBos  Год назад

      I appreciate that!

  • @newstory8568
    @newstory8568 Год назад +1

    Always at the top 👌 Awesome video 👍

  • @MB-zj3er
    @MB-zj3er Год назад +1

    I found this extremely helpful. Thank you for taking the time to make the video.

    • @WesBos
      @WesBos  Год назад

      you're welcome!

  • @apharos
    @apharos Год назад +1

    great video! Was exactly what I was looking for

  • @ahmad-murery
    @ahmad-murery Год назад +1

    Returning object is better for someone likes me who can't remember what he did a few minutes ago 😁
    Nice little girl 😍, I'm happy you didn't cut the video.
    Thanks Wes!

  • @elmoutaouakkilmohammed1432
    @elmoutaouakkilmohammed1432 Год назад

    Fantastic video! Thank you

  • @moonstar_connor
    @moonstar_connor Год назад +1

    Great recap! I really like the Go way, but use the Rust way a lot because I use Supabase which does the same thing in its APIs (returning data, error, etc. for async operations)

    • @WesBos
      @WesBos  Год назад +1

      Same thing with a lot of GraphQL libs - the Rust way seems more popular

  • @nicolasparada
    @nicolasparada Год назад +2

    The "Go" way is superior, but looks off to use it in javascript. If you use it in a team, other people might find it weird 😅
    But is nice since you can clearly handle each error separately, and you avoid nesting code. You can repeat "if error return" and clearly see the happy path of the program.

  • @David-gj6dc
    @David-gj6dc 4 месяца назад

    In Typescript, I prefer the go way using discriminated unions so you have to check either the data or error for a value

  • @NRNR-tw2fh
    @NRNR-tw2fh Год назад

    Thank you 👍👍👍

  • @user-lm5ju8nc2t
    @user-lm5ju8nc2t 5 месяцев назад +1

    Nice video. What is the extension you are using to log output right in editor? //?

  • @benfrese3573
    @benfrese3573 Год назад

    Thanks for the free therapy session!

    • @WesBos
      @WesBos  Год назад +3

      We all deal with rejection from time to time

    • @benfrese3573
      @benfrese3573 Год назад

      @@WesBos fr

  • @brianmccoy9270
    @brianmccoy9270 Год назад +2

    Great video. How do you highlight your single line comments with the yellow background?

    • @WesBos
      @WesBos  Год назад +1

      It’s a plugin called better comments. You write regex rules and the apply new styles. I have them for “method, exercise, solution, problem…”

  • @bok7660
    @bok7660 Год назад

    Thanks a lot for these "cheeses".
    Btw, can I ask how can I achieve the font style / theme you used on your vs code editor?

    • @WesBos
      @WesBos  Год назад

      Cobalt2 and operator mono. Wesbos.com/uses for more info!

  • @joostschuur
    @joostschuur Год назад

    Talking head PIP looking great!

    • @WesBos
      @WesBos  Год назад

      Thanks! Been working on it

  • @DJAdams
    @DJAdams Год назад

    Came here just to say that your thumbnail game is strong with this video

    • @WesBos
      @WesBos  Год назад

      hahaha thanks

  • @AbdurRahman-rj9bv
    @AbdurRahman-rj9bv 4 месяца назад

    Awesome

  • @r-i-ch
    @r-i-ch Год назад

    Great stuff! Question - You don't touch on try/catch/FINALLY blocks. What kind of data would a `finally` call have access to? Would it fit some of your error-handling use cases?

    • @WesBos
      @WesBos  Год назад +1

      I did show it as one of the examples, but not the finally. That’s kinda like the allSettled, but it’s annoying because each try/catch/finally is scoped to its block, so you have to declare variables outside it. Has its use cases, especially when returning from a function, but not my go to

  • @nicodindon7477
    @nicodindon7477 Год назад

    Nice tricks thanks! I'm sure it can improve readability of few functions at work.
    The biggest difficulty with errors in JS to me is the lack of "custom exceptions".
    In PHP i was used to `throw UserAccountException()` then catch only this exception in the place i want. I never found sastifying equivalent in JS :/

    • @WesBos
      @WesBos  Год назад +1

      You can do this by passing a bound function, or passing the arguments as a second param, Then instead of passing in a promise, you pass in a function that can be called inside the try/catch.
      function wrapItButCallItToo(func) {
      try {
      // call it here - this will catch thrown errors too
      func();
      } catch(e) { console.log(e) }
      }

    • @nicodindon7477
      @nicodindon7477 Год назад

      Thanks a lot Wes.

  • @ahmadmuslih
    @ahmadmuslih Год назад

    at 16:52 how can you open the code in that mode? Great video btw

  • @Lambdaphile
    @Lambdaphile Год назад

    I think I like the third (go) variant the most. 4 and 4.1 is ok too, but only if the error is returned as the first element, like in the third variant. Also, can't you type the returned tuple with TypeScript?

    • @WesBos
      @WesBos  Год назад +1

      Yep - I think I said that in the video!

  • @JanHonzaPozivil
    @JanHonzaPozivil 9 месяцев назад

    Re Method 4.0: What is the problem of using `null` in the returned tuple? Wes says that someone got mad at him over that on Twitter, but I'm struggling to see the reason why.

  • @VivekSingh-kx6ri
    @VivekSingh-kx6ri Год назад

    Whats Vscode Font style called ? Is it Free men?

  • @ukaszzbrozek6470
    @ukaszzbrozek6470 Год назад +1

    If someone use multiple wrapItObject he don't have to use object destructuring. Then it would be cleaner.

  • @mystic_monk55
    @mystic_monk55 Год назад

    what is this extension which is showing the return value preview?

  • @farqueueman
    @farqueueman 3 месяца назад

    I know that theme from a mile away. Cobalt2.

  • @lethienngan
    @lethienngan Год назад

    +1 thumbs-up
    +1 follower

  • @sahassaurav4144
    @sahassaurav4144 Год назад

    I use async await with .catch() and to handle thrown error I use global try catch block

    • @WesBos
      @WesBos  Год назад

      Cool - global you mean like wrapped around your entire set of logic for handing something like a route or controller?

    • @sahassaurav4144
      @sahassaurav4144 Год назад

      @@WesBos
      try {
      const value = await doSomething().catch()
      } catch() {
      // Handle thrown error here
      }

  • @jaspreetsingh2379
    @jaspreetsingh2379 Год назад

    Javascript added a new feature called error. cause. That helps with debugging

  • @omomer3506
    @omomer3506 Год назад

    Yes these videos

    • @WesBos
      @WesBos  Год назад +1

      Ya like?

    • @omomer3506
      @omomer3506 Год назад

      Dude, your podcast and your videos are the only reason i don't cry about feeling like a complete idiot, you simplify things even for us mortals

  • @josemarin359
    @josemarin359 Год назад +1

    Best solution to manage async and promises is to use js-awe library

  • @ejnshtein
    @ejnshtein Год назад

    So, basically, we add sausages from Goland to JS 🤔
    Okay, I'm in.

    • @WesBos
      @WesBos  Год назад

      Sounds delicious. I’m in too

  • @DioArsya
    @DioArsya 7 месяцев назад

    niceeeeeeeeeeee

  • @xinaesthetic
    @xinaesthetic Год назад +1

    I feel like ’settle' might be a better name for 'wrapIt'.

    • @WesBos
      @WesBos  Год назад

      Yeah wrap it isn’t a good name

  • @markridgway249
    @markridgway249 Год назад

    should have had that On Air light on

    • @WesBos
      @WesBos  Год назад

      Good call. I’m hoping to automate it

  • @TamanKodeKode
    @TamanKodeKode Год назад +1

    when Go engineer write JS

  • @d33bo67
    @d33bo67 2 месяца назад

    back in the Nodejs days lol

  • @FredoCorleone
    @FredoCorleone 5 месяцев назад

    I don't get why try/catch is uglier than a custom method that wraps the promise and returns a tuple data, err.
    IMO the latter is uglier, please try to convince me the Go way is better.

  • @TheNoim
    @TheNoim Год назад

    // There is a good reason why I prefer the throw approach:
    // Most of the time when I write a server-side app, I don't really care about the individual error. If something fails while executing my "action" (for example in a request), it should just throw. My server framework of choice probably has a built-in error handler.
    // This is why I don't like it when libraries use the go approach. If an action fails, it should fail.
    // Here is an example:
    someserver.get("/some/route", async () => {
    const someData = await someDb.getData(); // If this fails, the framework error handler should just deal with it. Frameworks like Nest allow you to customize the error handler, which is really nice.
    // Do something with the data
    return someData;
    });
    // With the go approach, I would need to do something like this:
    someserver.get("/some/route", async () => {
    const [error, someData] = await someDb.getData();
    if (error) { // I don't care about the error
    throw error;
    }
    // Do something with the data
    return someData;
    });
    // A hybrid approach for me would be something like this:
    class Result {
    constructor(private readonly _error, private readonly _data) {}
    get error() {
    return this._error;
    }
    get data() {
    return this._data;
    }
    orThrow() {
    if (this._error) {
    throw this._error;
    }
    return this._data
    }
    }
    someserver.get("/some/route", async () => {
    const someData = (await someDb.getData() /* Returns Result type **/).orThrow();
    // Or
    const { data, error } = await someDb.getData()
    if (error) {
    // Do something with it
    }
    // Do something with the data
    return someData;
    });
    Even better, everything could be usable:
    // Go style via promise extension
    interface Promise {
    goStyle(): Promise;
    }
    someserver.get("/some/request", async () => {
    // .goStyle() is optional. You can still use the default try/catch
    const [error, data] = await db.classicGetData().goStyle();
    if (error) {
    throw error;
    }
    // Do something
    return data;
    });
    // Rust style via promise extension
    interface Promise {
    asResult(): Promise;
    }
    someserver.get("/some/request", async () => {
    const result = await db.rustStyleGetData().asResult();
    if (result.error) {
    // do something
    return
    }
    // Do something
    return result.data;
    });

  • @spondoolie6450
    @spondoolie6450 2 месяца назад

    method 3 💪

  • @soniablanche5672
    @soniablanche5672 Год назад

    You can technically get both data and error at the same time with promises too, by using Promise.allSettled(). This function always resolves, so you don't need a catch block for it.

    • @WesBos
      @WesBos  Год назад +1

      You should watch the whole video!

    • @FadlySansan
      @FadlySansan Год назад

      @@WesBos lol

  • @indrajitsarkar3169
    @indrajitsarkar3169 Год назад +1

    Promise.allSettled way is pretty cool, definitely going to use.

  • @AshishVermaCS
    @AshishVermaCS Год назад

    For someone like me who was using
    await my promise().catch(errHandler);
    This is gem - thanks for sharing Wes