Runtime - Transformation of async/await try...catch prevents inspecting variable defined in catch statement

[Kytech]

When debugging in the catch block of a try...catch statement that contains an async call using await, I am unable to inspect the error object/value that is defined for the catch block when the code is transformed by regenerator and is processed by the runtime's tryCatch() function. I encountered this transformation inside a react component when using create-react-app. When this transformation has been applied, the variable defined in the catch statement does not appear in the local scope pane of Chrome DevTools and attempting to read the value of the variable from the console or a watch results in a ReferenceError

Steps to Reproduce

In a block of code with the following structure, set a breakpoint at the indicated spot:

async function fn() {
  try {
    const result = await doAsync();
    // ...
  catch (error) {
    // Breakpoint set at this line
    if (error.response) {
      // Do something ...
    }
  }
}

When stopped on the breakpoint, set a watch for error or enter the variable name error in the debug console. Either a ReferenceError will occur or the variable will evaluate as undefined.

Observed Cause

This seems to be caused due to how the transformation of async try...catch blocks results in the catch portion of the block being transformed into a function that is eventually called by the runtime (at this point in the runtime code based on the call stack when debugging) with the error object as one of its parameters, resulting in the variable named in the catch statement never being defined in the local closure/scope. Generation appears to be working as expected, though it creates this side-effect that reduces debug-ability.

Proposed solution

From within the local scope of the catch block when debugging, it is possible to refer to the error object by referencing arguments[0].t0 without regards to the original variable name. When this package is used in combination with a tool such as babel/webpack/create-react-app, add the ability for this package to provide a sourcemap transformation as part of the transpiling step done by these tools that will map the original variable name defined in the catch () statement to arguments[0].t0 or to whatever is used by the transformed output code to read the error object (Based on inspecting the raw transpiled output produced by the webpack server when using create-react-app, it appears to be _context.t0).