Change:
Describe the bug Sass pages with invalid syntax occasionally timeout To Reproduce Steps to reproduce the behavior: to in in the console (sometimes) Expected behavior The following should appear in the console: 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.
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 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 error only if I: 1) reset the code 2) Duplicate the tab 3) Input the incorrect code (missing ) !
I tried method but that didn't produce the bug. I am able to reliably reproduce the bug on Chromium & Firefox with the following steps: the page (new tab & refresh can both produce bug). delete & re-add the character from line 9, fast enough that the new state does not display in the console. step 2 on deleting the . If done correctly the message will display instead of an error, even though the console input is incorrect. 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.
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 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-" with this kind of stuff to have a best message, but still the problem : <prelet errMsg = 'error'; if (err === 'timeout') { // eslint-disable-next-line no-ex-assign errMsg = ; } else if (Array.isArray(err) && err.length0 && err[0] === 'timeout') { // timeout: 5ms errMsg = ; } else { errMsg = err; } (errMsg); yield put(updateConsole(escape(errMsg))); </preso the result will be "Server response timeout"
While this is old, it's still reproducible, unfortunately. A PR to improve the warning would be welcome.
I’m currently taking a look into a possible solution on this!

Discussion:
class WorkerExecutor { constructor( workerName, <del> { location = '/js/', concurrency = 2, terminateWorker = false } = {} </del> <ins> { location = '/js/', maxWorkers = 2, terminateWorker = false } = {} </ins> ) { <del> this._workerName = workerName; this._workers = []; this._queue = []; this._running = 0; this._concurrency = concurrency; </del> <ins> this._workerPool = []; this._taskQueue = []; this._workersInUse = 0; this._maxWorkers = maxWorkers; </ins> this._terminateWorker = terminateWorker; <del> this._location = location; </del> <ins> this._scriptURL = `${location}${workerName}.js`; </ins> this._getWorker = this._getWorker.bind(this); } async _getWorker() { <del> let worker; if (this._workers.length) { worker = this._workers.shift(); } else { worker = await new Promise((resolve, reject) => { const worker = new Worker(`${this._location}${this._workerName}.js`); worker.onmessage = e => { if (e.data && e.data.type && e.data.type === 'contentLoaded') { resolve(worker); } }; worker.onerror = err => reject(err); }); } return worker; </del> <ins> return this._workerPool.length ? this._workerPool.shift() : this._createWorker(); </ins> } <del> _pushTask(task) { this._queue.push(task); this._next(); </del> <ins> _createWorker() { return new Promise((resolve, reject) => { const newWorker = new Worker(this._scriptURL); newWorker.onmessage = e => { if (e.data?.type === 'contentLoaded') { resolve(newWorker); } }; newWorker.onerror = err => reject(err); }); </ins> } _handleTaskEnd(task) { return () => { <del> this._running--; if (task._worker) { const worker = task._worker; </del> <ins> this._workersInUse--; const worker = task._worker; if (worker) { </ins> if (this._terminateWorker) { worker.terminate(); } else { worker.onmessage = null; worker.onerror = null; <del> this._workers.push(worker); </del> <ins> this._workerPool.push(worker); </ins> } } <del> this._next(); </del> <ins> this._processQueue(); </ins> }; } <del> _next() { while (this._running < this._concurrency && this._queue.length) { const task = this._queue.shift(); </del> <ins> _processQueue() { while (this._workersInUse < this._maxWorkers && this._taskQueue.length) { const task = this._taskQueue.shift(); </ins> const handleTaskEnd = this._handleTaskEnd(task); task._execute(this._getWorker).done.then(handleTaskEnd, handleTaskEnd); <del> this._running++; </del> <ins> this._workersInUse++; </ins> } }

}, timeout); worker.onmessage = e => { <del> if (e.data && e.data.type) { </del> <ins> clearTimeout(timeoutId); // data.type is undefined when the message has been processed // successfully and defined when something else has happened (e.g. // an error occurred) if (e.data?.type) { </ins> this.emit(e.data.type, e.data.data); <del> return; </del> <ins> } else { this.emit('done', e.data); </ins> } <del> clearTimeout(timeoutId); this.emit('done', e.data); </del> }; worker.onerror = e => {

.once('error', err => reject(err.message)); }); <del> this._pushTask(task); </del> <ins> this._taskQueue.push(task); this._processQueue(); </ins> return task; } } <ins> // Error and completion handling </ins> const eventify = self => { self._events = {};

// eslint-disable-next-line max-len it('Worker executor should successfully execute 3 tasks in parallel and use 3 workers', async () => { mockWorker(); <del> const testWorker = createWorker('test', { concurrency: 3 }); </del> <ins> const testWorker = createWorker('test', { maxWorkers: 3 }); </ins> const task1 = testWorker.execute('test1'); const task2 = testWorker.execute('test2');

// eslint-disable-next-line max-len it('Worker executor should successfully execute 3 tasks and use 1 worker', async () => { mockWorker(); <del> const testWorker = createWorker('test', { concurrency: 1 }); </del> <ins> const testWorker = createWorker('test', { maxWorkers: 1 }); </ins> const task1 = testWorker.execute('test1'); const task2 = testWorker.execute('test2');