Examples Error reporting

[Maksims]

Currently if there is an exception in example code, it does not report a sensible stack trace and it is harder to debug due to that.

It would be great if error reporting would show a good stack trace, presented in UI within examples page with an ability to click and navigate to line of code even inside of code editor. Just like Launcher does with IDE (Editor).

[kungfooman]

Maybe just show it directly as editor annotation without any extra clicks? I implemented something similiar for another live editor:

https://github.com/enkimute/ganja.js/pull/108

[Maksims]

Yes, that definitely will be useful also. When remote debugging with mobile devices (phones, VR headsets), pre process is usually involves Chrome/Safari remote debugger with access to console logs. So a stack trace with correct error message and line of code is very useful.

[kungfooman]

I worked something out:

const iframe = document.getElementById("exampleIframe");
iframe.contentWindow.onerror = function (message, file, line, column, errorObj) {
  // Chrome only atm, but we would add a try/catch in PR
  if (errorObj) {
    console.log('Error stack: ', errorObj.stack);
  }
  console.log({message, file, line, column, errorObj});
  line -= 2; // map to correct line in editor
  const lineText = editor.getModel().getLineContent(line);
  const oldDecorators = [];
  const newDecorator = {
    range: new monaco.Range(line, 0, line, lineText.length),
    options: {
      // isWholeLine: true,
      className: 'squiggly-error',
      hoverMessage: {value: message},
    }
  };
  editor.deltaDecorations(oldDecorators, [newDecorator]);
};

If you insert some test code that fails in the Monaco editor:

    setTimeout(() => {
        1n / 2;
    }, 1000);

Then Shift+Enter to hot-reload the example:

Console looks like:

So this works at least if the error happens in the code that happens to be in the Monaco editor. But we can also trigger errors from within:

    app.mouse = {}; // trying to call update somewhere, so it triggers an error

So I pretty much see two cases:

1. Error happens in Monaco editor: display as code decoration and UI
2. Error happens somewher else: only UI

When remote debugging with mobile devices (phones, VR headsets), pre process is usually involves Chrome/Safari remote debugger with access to console logs. So a stack trace with correct error message and line of code is very useful.

Isn't Chrome in remote debugging showing stack traces by default if you click on them?

I wonder about your workflow, you use live-coding for VR testing inside the editor?

[Maksims]

This is great improvements!

The workflow I follow is developing engine features, so errors from within engine are important. Then developing examples, but usually in VSCode with watcher to recompile, and refreshing on other devices (phone, vr headsets), no Monaco editing only if testing on PC as it is faster than VSCode+watcher+refresh workflow.

[mvaligursky]

I agree with @Maksims , this would be great to improve when developing in VSCode / npm run develop - both engine and examples errors are hard to get callstack for.