Bug: if any api fails or produces invalid data, the front end crashes with a bewildering error message

[dqnykamp]

I clicked on an ActivityViewer link to see an activity someone shared. Then, I selected "Copy to scratchpad". That lead to an error page that said "Cannot read properties of undefined (reading 'length')".

Looking at the Javascript console, the error was triggered by this useEffect (currently line 151 in MoveCopyContent.tsx):

  useEffect(() => {
    if (fetcher.data && fetcher.data.status === 200) {
      setActionFinished(true);
      if (action === "Move") {
        setNumItems(1);
      } else {
        const numItems: number = fetcher.data.data.newContentIds.length;
        setNumItems(numItems);
      }
    } else if (fetcher.data && fetcher.data.success === false) {
      setErrMsg(fetcher.data.message);
    }
  }, [fetcher.data, action]);

Presumably, something went wrong with the fetching of the data and data.data.newContentIds was undefined. I cannot reproduce this error.

At the very least, we should catch this error and display a less bewildering error message.

We should harden all front end code that process data from an api call so that it degrades gracefully when unexpected data is returned, giving the user a message to try again or at least give a plain English message that says an error occurred, possibly with an error code or something that could be useful to look up in a log.