Debugging Javascript/ReactJS errors

Question

I'm building a small application with ReactJS and sometimes find it difficult to debug it.

Every time I make some Javascript error, like missing let/var in front of new variable, missing require for a component that I later use, my application just stops working (the code does not execute beyond the line where the error is), but I'm not getting any errors in browser's console. It seems as if some ReactJS code was intercepting errors, maybe handling them some custom way. Is there anything like that in ReactJS? How can I see errors in the console?

I'm using gulp/gulp-connect/browserify set to run the application.

Let me know if you need any additional data or code samples, I'll update the question.

Answer 1

If you know that an error is thrown but swallowed by some other code, you can enable in your browser's debugger to pause execution when an exception is thrown, even if it is caught somewhere:

Note however that libraries sometimes deliberately trigger exceptions while testing whether the browser supports certain features. You'd have to step over those.

Answer 2

Usage of React Hot Loader which is a Webpack plugin should solve most of the problems you have in a development process. It's easy to integrate into existing project and has quite a few examples how to put all the things together.

As a result:

• your code changes would be pushed to the browser
• in case of the error you will have meaningful stack trace in the browser console.

Answer 3

I'm guessing that the incorrect JS syntax is causing your gulp process to fail which would result in your application not being bundled/deployed in the browser at all.

It seems like there should be errors in your system console (where gulp is running) - as opposed to your browser console. Possibly your gulp process crashes when this happens too. If there are no errors in your console, you may have to listen for them. This post has an example of how to log errors from browserify:

gulp.task('browserify', function(){
  var b = browserify();
  b.add('./main.js');

  return b.bundle()
    .on('error', function(err){
      console.log(err.message); //
      this.end();
    })
    .pipe(source('main.out.js'))
    .pipe(gulp.dest('./dist'));
});

Probably the best solution is to run your code through jshint before browserify so that you aren't trying to browserify syntactically invalid code.

Caveat: not a current gulp user