Errors and connection limits

<div id="banner" hidden style="background: #fff4d6; padding: 8px 12px"></div>
<div id="o3o-editor" style="height: 90vh"></div>
<script src="http://localhost:8080/o3o/api.js"></script>
<script>
  let editor;
  let retries = 0;

  async function openEditor() {
    // Your server returns a signed config (see Signing the config with JWT)
    const config = await (await fetch("/o3o/config?doc=42")).json();
    editor = new O3O.Editor("o3o-editor", {
      ...config,
      ui: { ...(config.ui || {}), limitBanner: false },    // draw our own banner
      events: { onDocumentLoaded: () => { retries = 0; }, onError, onLimitReached }
    });
  }

  function onError(e) {
    switch (e.code) {
      case "token_expired":        // token expired: fetch a new config and reopen
      case "network_error":        // O3O unreachable: retry with growing delay
      case "load_failed":
        if (retries++ < 3) {
          editor.destroy();
          setTimeout(openEditor, 2000 * retries);
          return;
        }
        break;
      case "save_failed":
      case "save_timeout":         // the document is still open; ask the user to save again
        return showBanner("Could not save. Please save again.");
      case "url_not_allowed":
      case "download_failed":
      case "file_too_large":
      case "unsupported_file_type": // file or URL problem: retrying will not help
        return showBanner(e.message);
    }
    showBanner(e.message);
    console.error(e.code, e.detail);
  }

  function onLimitReached(e) {
    // Not an error: the document is open read-only
    showBanner(e.message, "Try editing again", () => editor.setReadOnly(false));
  }

  function showBanner(text, actionLabel, action) {
    const el = document.getElementById("banner");
    el.textContent = text;
    if (actionLabel) {
      const b = document.createElement("button");
      b.textContent = actionLabel;
      b.onclick = action;
      el.append(" ", b);
    }
    el.hidden = false;
  }

  openEditor();
</script>