Experimenting with sending errors from JS to Python

[keller-mark]

import anywidget
import traitlets

class JavaScriptException(Exception):
  pass

class Counter(anywidget.AnyWidget):
    _esm = """
    function initialize({ experimental }) {
      window.addEventListener("error", function (e) {
        const { error } = e;
        experimental.invoke("_throw_js_error", [error.toString(), error.stack, error.fileName, error.lineNumber, error.columnNumber]);
        return false;
      });
    }
    function render({ model, el, experimental }) {
      let count = () => model.get("value");
      let btn = document.createElement("button");
      btn.classList.add("counter-button");
      btn.innerHTML = `count is ${count()}`;
      btn.addEventListener("click", () => {
        model.set("value", count() + 1);
        model.save_changes();
        throw new Error("Count is too high");
      });
      model.on("change:value", () => {
        btn.innerHTML = `count is ${count()}`;
      });
      el.appendChild(btn);
    }
    export default { initialize, render };
    """
    value = traitlets.Int(0).tag(sync=True)

    @anywidget.experimental.command
    def _throw_js_error(self, params, buffers):
        [msg, stacktrace, file_name, line_num, col_num] = params
        err_str = f"{msg}\t (L{line_num}:{col_num})\n" + "\n".join([f"\t{l}" for l in stacktrace.split("\n")])
        raise JavaScriptException(err_str)


counter = Counter()
counter

This will use the experimental .invoke API to propagate JS errors and re-throw them on the python side as Exceptions. This will of course not be applicable to JS errors that occur prior to AnyWidget running the widget JS successfully. However it might be useful for internal application errors or errors within the render function assuming the initialize function was executed.

Otherwise, these errors will only be visible in the browser console which non-web-experienced users may not know about.