display() and view() mysteriously not showing outputs

[aaronkyle]

I am working to port Tom Larkworthy's Detect notebook runtime errors with catchAll((cellName, reason) => {...}) to Observable Framework. I think I adjusted the bits necessary for Framework, and I am not seeing any errors—except that now some cells that I attempt to show using display() and view() don't show anything at all.

The main changes that I made from the original notebook were these:

For the mutable bit, I ensured that the Mutable definition and its setter function are included in a single code block:

const errorLog = Mutable([]);

const catchAll = (handler, invalidation) => {
  const listener = () => handler("unknown", error.value);
  error.addEventListener("input", listener);
  if (invalidation)
    invalidation.then(() => {
      error.removeEventListener(listener);
    });
}

// update the mutable using .value
catchAll((cellName, reason) => {
  let errorLog = errorLog.concat({
    cellName,
    reason
  });
}, invalidation)

The notebook error function was written as a view, so I re-fashioned it to use Generators.input:

```js echo
const errorElement = (() => {
  const view = Inputs.input();

  const notify = (event) => {
    view.value = event.detail.error;
    view.dispatchEvent(new Event("input", { bubbles: true }));
  };

  const processInspectorNode = (el) => {
    el.addEventListener("error", notify);
  };

  // Attach to current cells
  [...document.querySelectorAll(".observablehq").values()].forEach(
    processInspectorNode
  );
  // Watch for new cells
  const root = document.querySelector(".observablehq-root");
  if (root) {
    const observer = new MutationObserver((mutationList, observer) => {
      for (const mutation of mutationList) {
        [...mutation.addedNodes].forEach(processInspectorNode);
      }
    });
    observer.observe(root, {
      childList: true
    });
    invalidation.then(observer.disconnect);
  }
  return view;
})();

let error = Generators.input(errorElement)

With these changes in place, however, my cells that attempt to display the catchAll function [expecting f()] and those where I try to display the value of my errorLog and errorCell aren't showing anything at all (expecting something):

... I see that there is a spinning arrow icon suggests that I have an unresolved promise or async that I need to handle? I tried using 'await' but it makes no different.

Any insights into what is happening and/or suggestions for changes to make this work correctly? 🙏

Code is here: https://github.com/aaronkyle/categorise/blob/master/src/catch-all.md

Temporarily available here as a rendered page:
https://categorise.observablehq.cloud/categorise/catch-all

[aaronkyle]

I think I was incorrectly trying to use a generator where it didn't fit, and that seemed to prevent display() from showing anything. Removing it allowed the cells to display as expected.

I tried using Generators.input because the original notebook used viewof and I was trying to get around some errors with .addEventListener.

Here was the original element:

viewof error = {
  const view = Inputs.input();

  const notify = (event) => {
    view.value = event.detail.error;
    view.dispatchEvent(new Event("input", { bubbles: true }));
  };

  const processInspectorNode = (el) => {
    el.addEventListener("error", notify);
  };

  // Attach to current cells
  [...document.querySelectorAll(".observablehq").values()].forEach(
    processInspectorNode
  );
  // Watch for new cells
  const root = document.querySelector(".observablehq-root");
  if (root) {
    const observer = new MutationObserver((mutationList, observer) => {
      for (const mutation of mutationList) {
        [...mutation.addedNodes].forEach(processInspectorNode);
      }
    });
    observer.observe(root, {
      childList: true
    });
    invalidation.then(observer.disconnect);
  }
  return view;
}

I've revised the code to be closer in line with the original and just excluding the view. My view() and display() bit are working again, but I still seem to be off in a few places. The test is throwing TypeError: errorTrigger.dispatchEvent is not a function and I can't seem to get the errorLog to populate.

Anywhere in particular I should be looking?

[aaronkyle]

I think I am getting closer.... though I don't understand all of this. Here's where I am at (corrections and clarifications welcome):

My initial 'loss' of display() and view() outputs was the result of an incorrect attempt to use Generators.input() to wire up a reactive input. By using the generator, these cells were never resolving—hence looking like blank or 'missing' values:

I can still use the Generator if I correctly wire it up with a different input using bind (though probably this isn't necessary, as just binding the input works without it):

I need to use this combination of defining my input separately from view() and then binding to it because later in the notebook I need to use addEventListener("input", …), which only works on an input element, whereas using view() dispatches a generator and not the DOM input.

... So this gets me past the initial error that I wrote in about: the apparent 'missing' return values. I still have to figure out a proper way to set up the mutable() in this notebook. I'll play around and raise that question separately if I can't figure it out.

Thanks to the community for offering this space to come and work out issues! I am grateful for all of you. Thanks for Observable and all your many offerings!!