Freecodecamp: err-saga.js causes problems when syntax errors are caught

[Bouncey]

When a syntax error is caught, err-saga.js gets as far as line 5 and stops all processes.

There is a syntax error message in the dev console

There is no error toast

I can't see anything in ~ /client/commonFramwork/ working eg. code-storage, detect-unsafe-code-stream, display-test-results` etc...

[utsab]

I'd like to take on this bug.

[Bouncey]

@utsab go for it :+1:

[WiNloSt]

Can I open a PR? I just fixed this issue. I'm not sure if @utsab is still working on it.

BTW I just make the toast works. I didn't change any behavior, so the output would stay // running test. And all the tests will still display circular arrow icon.

[Bouncey]

@WiNloSt are any of the errors from client/commonFramework/detect-unsafe-code-stream.js visable?

[WiNloSt]

I tried tracking down detectUnsafeCode$ which is in detect-unsafe-code-stream.js and leads to excecute-challange-stream.js which assign executeChallenge$ function to global variable named common and this function is called in end.js

I'll make an assumption from now on from my understanding, but let me tell you this is my first time browsing FreeCodeCamp repo.

end.js seemed to use RxJS. And trigger event from button stream. Many button stream e.g. submitBtn$ and resetBtn$ which trigger from clicking component with id submitButton and reset-button respectively. However there isn't a component with this id at least for submitButton.

My thought is that FreeCodeCamp moved from using RxJS to Redux with Redux Epic. So, detect-unsafe-code-stream seemed to be a legacy code for me (I try putting some console.log in that file and they never log).

All of this is tested on basic JavaScript challenges.

Does that answer your question?

BTW, the error isn't stopped at line 5 from file err-saga.js, it just dispatch an incorrect action. I changed the action to the correct one. And the toasted works as expected as shown below.

Please let me know if you want me to open the PR. I still wait to hear from @utsab

[utsab]

@WiNloSt, sure, thanks for looking into it. You can go ahead and take over this one. Nice job figuring it out.

[WiNloSt]

I have opened a Pull Request :)

[Bouncey]

@BerkeleyTrue is detect-unsafe-code-stream and others now legacy code in staging?

[BerkeleyTrue]

Nothing in common framework runs in the app

[BerkeleyTrue]

@Bouncey I don't think you issue has anything to do with err-saga. Err saga does not generate errors it just prints them.

In my backend challenge PR errors in client code will be printed to the output window.

[Bouncey]

I have just pulled the latest staging and tried this out again.

Running tests with an unfinished function declaration in the code causes the error toast, but nothing happens after that.

Output remains at // running test

The test-suite switches and remains in its initial state

There is no error message in output

It looks like throwers() is throwing the Error object correctly,

Error: SyntaxError: Unsafe or unfinished function declaration
    at Object.checkForUnfinishedFunction [as thrower] (http://localhost:3000/js/bundle.js:122177:16)
    at http://localhost:3000/js/bundle.js:122204:51
    at tryCatcher (http://localhost:3000/js/bundle.js:2943:32)
    at InnerObserver.Rx.FlatMapObservable.InnerObserver.next (http://localhost:3000/js/bundle.js:5020:44)
    at InnerObserver.Rx.internals.AbstractObserver.AbstractObserver.onNext (http://localhost:3000/js/bundle.js:4642:32)
    at InnerObserver.tryCatcher (http://localhost:3000/js/bundle.js:2943:32)
    at AutoDetachObserverPrototype.next (http://localhost:3000/js/bundle.js:14690:52)
    at AutoDetachObserver.Rx.internals.AbstractObserver.AbstractObserver.onNext (http://localhost:3000/js/bundle.js:4642:32)
    at loopRecursive (http://localhost:3000/js/bundle.js:5507:12)
    at scheduleWork [as action] (http://localhost:3000/js/bundle.js:3949:12)
    at ScheduledItem.invokeCore (http://localhost:3000/js/bundle.js:3860:34)
    at ScheduledItem.invoke (http://localhost:3000/js/bundle.js:3848:41)
    at runTrampoline (http://localhost:3000/js/bundle.js:4089:38)
    at tryCatcher (http://localhost:3000/js/bundle.js:2943:32)
    at CurrentThreadScheduler.schedule (http://localhost:3000/js/bundle.js:4105:46)
    at CatchObservable.Rx.ObservableBase.ObservableBase._subscribe (http://localhost:3000/js/bundle.js:4975:33)

but this error never makes it to the console. In it's place is an Error thrown by Parser.pp.raise:

SyntaxError: unknown: Unexpected token (11:8)
   9 | b = b - 15;
  10 | c = c - 1;
> 11 | function
     |         ^
    at Parser.pp.raise (http://localhost:3000/js/bundle.js:89558:14)
    at Parser.pp.unexpected (http://localhost:3000/js/bundle.js:91165:9)
    at Parser.pp.parseFunction (http://localhost:3000/js/bundle.js:90586:11)
    at Parser.pp.parseFunctionStatement (http://localhost:3000/js/bundle.js:90263:16)
    at Parser.pp.parseStatement (http://localhost:3000/js/bundle.js:90051:20)
    at Parser.parseStatement (http://localhost:3000/js/bundle.js:91199:23)
    at Parser.pp.parseBlockBody (http://localhost:3000/js/bundle.js:90476:22)
    at Parser.pp.parseTopLevel (http://localhost:3000/js/bundle.js:89990:9)
    at Parser.parse (http://localhost:3000/js/bundle.js:18950:18)
    at parse (http://localhost:3000/js/bundle.js:35207:48)
    at File.parse (http://localhost:3000/js/bundle.js:24638:16)
    at File.parseCode (http://localhost:3000/js/bundle.js:24723:21)
    at http://localhost:3000/js/bundle.js:73653:13
    at File.wrap (http://localhost:3000/js/bundle.js:24685:17)
    at Pipeline.transform (http://localhost:3000/js/bundle.js:73651:18)
    at Object.babelTransformer [as transformer] (http://localhost:3000/js/bundle.js:122299:27)

This is parser.pp.raise:

/* 737 */
/***/ function(module, exports, __webpack_require__) {

    "use strict";

    var _location = __webpack_require__(172);

    var _index = __webpack_require__(57);

    var _index2 = _interopRequireDefault(_index);

    function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

    var pp = _index2.default.prototype;

    // This function is used to raise exceptions on parse errors. It
    // takes an offset integer (into the current `input`) to indicate
    // the location of the error, attaches the position to the end
    // of the error message, and then raises a `SyntaxError` with that
    // message.

    pp.raise = function (pos, message) {
      var loc = (0, _location.getLineInfo)(this.input, pos);
      message += " (" + loc.line + ":" + loc.column + ")";
      var err = new SyntaxError(message);
      err.pos = pos;
      err.loc = loc;
      throw err;
    };

/***/ },

This part of webpack is overriding the Error object from throwers