[Examples] Fix error handling and display errors in Monaco editor

[kungfooman]

Partly implements #5846

This PR is implementing what's needed to deal with errors in the UI, so if someone else wants to add nicer error displaying, they can do so quite easily, just listen to: window.addEventListener('exampleError', event => console.log("TEST", event.detail));

So far errors are only added in the UI:

The allowRestart variable also wasn't reset in case of an error, so once an error happened, the hot-reload wouldn't do anything afterwards.

I confirm I have read the contributing guidelines and signed the Contributor License Agreement.

[kungfooman]

I'm testing on Chrome Mobile and I can't find a way to read the actual message for the red squiggles:

This is code to test suggestion by @marklundin in any Examples instance via F12/DevTools:

editor.getModel().setValue(`12345
abcd
234.56
12345
abcd
234.5612345
abcd
234.56
12345
abcd
234.56`);
function validate(model) {
	const markers = [];
	// lines start at 1
	for (let i = 1; i < model.getLineCount() + 1; i++) {
		const range = {
			startLineNumber: i,
			startColumn: 1,
			endLineNumber: i,
			endColumn: model.getLineLength(i) + 1,
		};
		const content = model.getValueInRange(range).trim();
		const number = Number(content);
		if (Number.isNaN(number)) {
			markers.push({
				message: "not a number",
				severity: monaco.MarkerSeverity.Error,
				startLineNumber: range.startLineNumber,
				startColumn: range.startColumn,
				endLineNumber: range.endLineNumber,
				endColumn: range.endColumn,
			});
		} else if (!Number.isInteger(number)) {
			markers.push({
				message: "not an integer",
				severity: monaco.MarkerSeverity.Warning,
				startLineNumber: range.startLineNumber,
				startColumn: range.startColumn,
				endLineNumber: range.endLineNumber,
				endColumn: range.endColumn,
			});
		}
	}
	monaco.editor.setModelMarkers(model, "owner", markers);
}
validate(editor.getModel());

Same problem, I can't find a way to read the actual errors/warnings:

By chance I found this mobile friendly version: https://github.com/Splizard/vscode-mobile ... @Splizard does this happen to work in your version?

[Splizard]

@kungfooman I've got a stylus (S pen) on my mobile, which will trigger these sorts of popup on hover, documentation, errors etc. No solution for exclusively touch yet.

(We've only just started the project with a couple of PRs, you are welcome to join the discussions area of the project).

The primary point of contention for better touch interaction is scrolling, versus selection, versus viewing this sort of contextual information.

Personally, I think a medium-long press could be suitable to show this information?

[kungfooman]

Hey @Splizard, thank you for sharing this information! I had the chance to try it out with a Surface Pro 9 pen and it also works in Monaco (although I must say using the scroll bar is not ideal :sweat_smile:).

Personally, I think a medium-long press could be suitable to show this information?

Yep, I wonder how hard that would even be, it may just require some touch events that simulate a mouse hover event via window.dispatchEvent(...).

I also wonder about a good UI location to place errors that can't be located in the Examples editor, maybe like an "error tab" which shows error message, filename, stack trace etc. :thinking:

[kungfooman]

Thank you for the review @kpal81xd! I will fix the linting and I also have to change what @marklundin suggested, I just don't have the time right now :zany_face:

[kungfooman]

Hi just for the new changes make sure that single values in brackets and curly braces need to have spaces too e.g. {details} and [newDecorators]. The rest looks sound tho!

BTW only curly braces are the only exceptions here, we don't waste horizontal space in other locations:

https://github.com/playcanvas/engine/blob/2345be2217680280b0f450399add206a35b199cd/src/framework/parsers/glb-parser.js#L917-L918

[kpal81xd]

Hey @Splizard, thank you for sharing this information! I had the chance to try it out with a Surface Pro 9 pen and it also works in Monaco (although I must say using the scroll bar is not ideal 😅).

Personally, I think a medium-long press could be suitable to show this information?

Yep, I wonder how hard that would even be, it may just require some touch events that simulate a mouse hover event via window.dispatchEvent(...).

I also wonder about a good UI location to place errors that can't be located in the Examples editor, maybe like an "error tab" which shows error message, filename, stack trace etc. 🤔

I think this error tab is a good idea and seems much more integrated than just solely having errors on highlight esp for mobile in particular

[kungfooman]

I think this error tab is a good idea and seems much more integrated than just solely having errors on highlight esp for mobile in particular

Thank you for the feedback @kpal81xd!

Right, it was kind of disappointing that Monaco doesn't support touch for reading such error messages, sometimes it could be the only clue (I love Android debugging via Chrome Remote Debugging Protocol, but I always had a bad experience with e.g. Apple devices).

Maybe it could look like VSCode is displaying errors?

If it's possible, could you take over this PR?

[kpal81xd]

@willeastcott this PR was going to be closed in place of this GH-6260 😅

[kpal81xd]

This PR is closed in favour of GH-6260