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.

I need your help again. You try to see here : stackoverflow.com/questions/34672098/…. I commented on your answer. Thank you — moses toh
– moses toh, Commented Jan 22, 2016 at 7:21

Felix Kling · Accepted Answer · 2015-09-17 13:48:44Z

6

+50

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.

answered Sep 17, 2015 at 13:48

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jedrzej.kurylo Over a year ago

It helps, but makes testing the application rather complicated - after every page reload I need to click through some exceptions that libraries throw. If ReactJS swallows exceptions, i'm sure there is a way to display them, via some custom error handler or sth. Hiding errors and not giving access to them makes no sense.

Yevgen Safronov · Accepted Answer · 2015-09-21 18:38:48Z

1

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.

answered Sep 21, 2015 at 18:38

Yevgen Safronov

4,0331 gold badge29 silver badges39 bronze badges

Comments

pherris · Accepted Answer · 2015-09-21 19:08:15Z

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

Mitsutoshi Watanabe · Accepted Answer · 2016-11-22 11:51:37Z

1

I suffered from the similar problem with this like missing let/var, require, and other trivial mistakes inside of the react context. In my case, the cause is the mistake of Promise statement. Promise seems to suppress any exceptions that occur after it is called. I could resolve the problem by handling exception like below.

var Promise = require('es6-promise').Promise;
var promise = new Promise(...)
promise
  .then(function(data){...})
  .catch(function(e) {
    console.error(e.stack)
}

answered Nov 22, 2016 at 11:51

Mitsutoshi Watanabe

3114 silver badges8 bronze badges

Comments

Taku · Accepted Answer · 2016-11-08 16:33:26Z

0

react-slingshot is a starter kit and it shows error at compile time and shows stack trace on the browser. It also has testing set up.

answered Nov 8, 2016 at 16:33

Taku

5,9952 gold badges46 silver badges34 bronze badges

Collectives™ on Stack Overflow

Debugging Javascript/ReactJS errors

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related