Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Program will crash when use ES7 async/await #9627

Open
XiaochanXia opened this Issue Mar 3, 2019 · 13 comments

Comments

Projects
None yet
7 participants
@XiaochanXia
Copy link

XiaochanXia commented Mar 3, 2019

Bug Report

Current Behavior
The program will crash when use ES7 async/await to get resolved result in the condition of the continual event trigger.
Please run the following code of following codepen links.

Input Code
Use babel in Codepen: https://codepen.io/summer_akj/pen/QoKaBy (Be careful to execute!)
Use browser: https://codepen.io/summer_akj/pen/RdGxBv

Expected behavior/code
The behavior is expected in chrome browser without Babel transformed. But after transformed by babel, the program will crash.

Environment

  • Babel version(s): v7.2.5(the defualt version imported by codepen )
  • Chrome version: 72.0.3626.119 (Official Build) (64-bit)
    Possible Solution

Additional context/Screenshots
Infinite loop...

image

@babel-bot

This comment has been minimized.

Copy link
Collaborator

babel-bot commented Mar 3, 2019

Hey @XiaochanXia! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community
that typically always has someone willing to help. You can sign-up here
for an invite.

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

nicolo-ribaudo commented Mar 4, 2019

I'm using Chrome 72.0.3626.119 64-bit on linux and it works 🤔
Maybe you set a breakpoint somewhere and codepen is thinking that your program is stuck because it's blocked there?

@XiaochanXia

This comment has been minimized.

Copy link
Author

XiaochanXia commented Mar 5, 2019

@nicolo-ribaudo Can you click it more than ten times? It's expected without Babel transformed and they have the same code, the second one will not crash no matter how many times I click.

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

nicolo-ribaudo commented Mar 5, 2019

The numbers appear with both the examples.
If you click on "show compiled output", what do you see?

@XiaochanXia

This comment has been minimized.

Copy link
Author

XiaochanXia commented Mar 5, 2019

Hi @nicolo-ribaudo, the following is the code compiled:

function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; } var btn = document.getElementById('time-btn');
var time = 0;

var handleTime = function () {
  var _ref = _asyncToGenerator(
    /*#__PURE__*/
    regeneratorRuntime.mark(function _callee() {
      var time, span;
      return regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          if (window.CP.shouldStopExecution(0)) break;
          switch (_context.prev = _context.next) {
            case 0:
              _context.next = 2;
              return (getTime());
            case 2: time = _context.sent;
              console.log(time);
              span = document.createElement('span');
              span.innerHTML = time;
              document.getElementById('container').appendChild(span);
            case 7: case 'end': return _context.stop();
          }
        }
        window.CP.exitedLoop(0);
      }, _callee, undefined);
    }));
  return function handleTime() {
    return _ref.apply(this, arguments);
  };
}();


var getTime = function getTime() {
  return new Promise(function (resolve) {
    setTimeout(function () {
      resolve(time);
    }, 10);
    time += 1;
  });
};

btn.addEventListener('click', handleTime);
@cypressious

This comment has been minimized.

Copy link

cypressious commented Mar 5, 2019

In my project, a stackoverflow error recently appeared that looks like this:

getHeaders(e) {
    return Object(l.a)(function*() {
        const t = yield function e() {
            return e(...arguments) // stack overflow here
        }(e);
        return t["X-Casing"] = "camelCase",
            t
    })()
}

The original code is

async getHeaders(language) {
    const headers = await super.getHeaders(language);
    headers['X-Casing'] = 'camelCase';
    return headers;
}

Is it possible that it's related?

@icywolfy

This comment has been minimized.

Copy link

icywolfy commented Mar 5, 2019

The Original Poster's solution is neat in that it crashes chrome so consistently and fast (It hard locks up my tab around the 13 to 15th click.

FWIW, At work, we had to put in a blanket ban on using async/await transpiled.
There were numerous weird bugs (as in, not consistent in a given execution) that would hard lock up the browser tab (as tested in chrome/firefox).

We are in the process of migrating from callback-based, to native async/await for internal tooling; but due to bugs that crash the browser (which was deemed too brand-damaging), we are migrating to our public-facing products to be promise based.

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

nicolo-ribaudo commented Mar 5, 2019

It hard locks up my tab around the 13 to 15th click.

Thank you for pointing out that it takes some time to crash. I was able to reproduce it after about 30 clicks.

@XiaochanXia

This comment has been minimized.

Copy link
Author

XiaochanXia commented Mar 6, 2019

@nicolo-ribaudo I found that It depends on your machine memories limit. In the real situation, if the user's machine has a memory limit, It will have a bad influence, I have to give up async in the project.

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

nicolo-ribaudo commented Mar 6, 2019

There is probably a memory leak somewhere.

@tanhauhau

This comment has been minimized.

Copy link
Contributor

tanhauhau commented Mar 11, 2019

@nicolo-ribaudo i wanna give a try on this, but not really sure how to start measuring the memory leak.

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

nicolo-ribaudo commented Mar 11, 2019

I suggest creating an HTML page with only the code needed to reproduce the bug, so that you don't run all the codepen scripts.
I don't know how to debug memory leaks, but maybe tools/chrome-devtools/memory-problems/ could help.

@oliverdunk

This comment has been minimized.

Copy link

oliverdunk commented Mar 20, 2019

I tried to reproduce this on Chrome 72.0.3626.121, but I wasn't able to. I consistently get into the hundreds on my MacBook Pro. Is this still a problem?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.