create-react-app slows to a crawl when invalid form submitted with Ravenjs present

[noahprince22]

I'm using create-react-app, which has a tool that attempts to show any errors in the browser (not just in the console). I think this bug has to do with that tool and uniforms behaving strangely together.

Anyway, the forms work fine until there's a validation error. Then any typing leads to a bunch of these errors getting console logged:

Could not consume error: TypeError: Cannot read property 'length' of null
    at getLinesAround (http://localhost:3000/static/js/bundle.js:245339:75)
    at http://localhost:3000/static/js/bundle.js:327270:402
    at Array.map (<anonymous>)
    at _callee2$ (http://localhost:3000/static/js/bundle.js:327250:54)
    at tryCatch (http://localhost:3000/static/js/bundle.js:336126:40)
    at Generator.invoke [as _invoke] (http://localhost:3000/static/js/bundle.js:336364:22)
    at Generator.prototype.(anonymous function) [as next] (http://localhost:3000/static/js/bundle.js:336178:21)
    at step (http://localhost:3000/static/js/bundle.js:327286:191)
    at http://localhost:3000/static/js/bundle.js:327286:361
    at <anonymous>

The bit of code that points to looks like:

/**
 *
 * @param {number} line The line number to provide context around.
 * @param {number} count The number of lines you'd like for context.
 * @param {string[] | string} lines The source code.
 */
function getLinesAround(line, count, lines) {
  if (typeof lines === 'string') {
    lines = lines.split('\n');
  }
  var result = [];
  for (var index = Math.max(0, line - 1 - count); index <= Math.min(lines.length - 1, line - 1 + count); ++index) {
    result.push(new __WEBPACK_IMPORTED_MODULE_0__stack_frame__["b" /* ScriptLine */](index + 1, lines[index], index === line - 1));
  }
  return result;
}

I'm guessing it's a lot of work to keep throwing these errors. The create-react-app tool that shows errors is probably trying to pop up, but can't. As a result, everything gets laggy.

I've been slowly replacing all of the forms in our app with this tool, because it's amazing. If it's not something that can be fixed, I'll probably just deal with it. It doesn't happen in the production build.

Would be nice to know why this is exploding though. Let me know if you have any ideas.

[radekmie]

Hi, @noahprince22. Well, I have an idea: this code. As far as I know, create-react-app use similar approach to capture unhandled errors and rejected promises - this might be the cause.

[radekmie]

Can you provide a reproduction? I’d like to give it a shot.

[noahprince22]

reproduction-uniforms.zip

Seems to be that RavenJS is the culprit. We use sentry for error reporting. You'll need to put in a valid Sentry url in App.js, but this reproduces it.

[radekmie]

As I've checked it locally, it doesn't produces such error but yes, it has a significantly worse performance. I'll think on how to get rid of it. If you have any idea or suggestion - let me know.

[radekmie]

I'll release next version soon - let me know, if it works for you.

[noahprince22]

It works, thanks!