Sass challenge timeout

[ojeytonwilliams]

Describe the bug
Sass pages with invalid syntax occasionally timeout

To Reproduce
Steps to reproduce the behavior:

1. Go to https://www.freecodecamp.org/learn/front-end-libraries/sass/store-data-with-sass-variables
2. Paste in

<style type='text/scss'>
$text-color: red;

  .header{
    text-align: center;
  }
  .blog-post, h2 {
    color: $text-color;

</style>

3. See timeout in the console (sometimes)

Expected behavior

The following should appear in the console:

Error: Invalid CSS after "...r: $text-color;": expected "}", was ""
        on line 8:24 of /stdin
>>     color: $text-color;

Since this is intermittent, here's a gif to demonstrate:

Additional Context

When the error appears it does so very quickly, so it is unlikely that this is due to a genuine timeout.

[ShaunSHamilton]

Hey Oliver,

When I clicked on the link, I reset the code, and completed the challenge as it should be completed. I came across a timeout error, and was unable to run the tests.

However, after resetting the code, refreshing the page, and pasting in the code you provided (missing }), the error you mention appeared, but does not disappear.

So, I suspect it has to do with the page first load, because I can get the timeout error only if I:

1. reset the code
2. Duplicate the tab
3. Input the incorrect code (missing })

[morgan-sam]

I tried @SKY020's method but that didn't produce the bug.

I am able to reliably reproduce the bug on Chromium & Firefox with the following steps:

1. Open the page (new tab & refresh can both produce bug).
2. Repeatedly delete & re-add the } character from line 9, fast enough that the new state does not display in the console.
3. End step 2 on deleting the }. If done correctly the Your test output will go here message will display instead of an error, even though the console input is incorrect.
4. Wait approximately 3-5 seconds for the timeout message to appear.

Note: it can also be reproduced where by in step 2 you end on re-adding the } but it's harder to tell if the bug has happened.

It must have something to do with the console state change and the output error check conflicting.

[prolland006]

I worked on this issue on my old computer that is very slow and on my main PC (with a dual boot). On my old computer I have the same result as @ojeytonwilliams, regurlaly timeouts. On the new one to have this issue I have to paste 3 times the piece of code to reproduce it. But everytimes, this is a real timeout (5ms, I put 'new Date()' on the code).

We can upgrade the source code one "execute-challenge-saga.js" with this kind of stuff to have a best message, but still the problem :

let errMsg = 'error';
if (err === 'timeout') {
   // eslint-disable-next-line no-ex-assign
   errMsg = `The code you have written is taking longer than the ${previewTimeout}ms our challenges allow. You may have created an infinite loop or need to write a more efficient algorithm`;
} else if (Array.isArray(err) && err.length>0 && err[0] === 'timeout') { // timeout: 5ms
   errMsg = `Server response timeout`;
} else {
   errMsg = err;
}
console.log(errMsg);
yield put(updateConsole(escape(errMsg)));

so the result will be "Server response timeout"

[ojeytonwilliams]

While this is old, it's still reproducible, unfortunately. A PR to improve the warning would be welcome.

[jacob-oreilly]

I’m currently taking a look into a possible solution on this!