Xử lý lỗi và giới hạn kết nối

<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() {
    // Máy chủ của bạn trả config đã ký (xem trang Ký cấu hình bằng JWT)
    const config = await (await fetch("/o3o/config?doc=42")).json();
    editor = new O3O.Editor("o3o-editor", {
      ...config,
      ui: { ...(config.ui || {}), limitBanner: false },    // tự vẽ băng thông báo
      events: { onDocumentLoaded: () => { retries = 0; }, onError, onLimitReached }
    });
  }

  function onError(e) {
    switch (e.code) {
      case "token_expired":        // token quá hạn: xin config mới và mở lại
      case "network_error":        // không gọi được O3O: thử lại, giãn cách tăng dần
      case "load_failed":
        if (retries++ < 3) {
          editor.destroy();
          setTimeout(openEditor, 2000 * retries);
          return;
        }
        break;
      case "save_failed":
      case "save_timeout":         // tài liệu vẫn mở, nhắc người dùng lưu lại
        return showBanner("Chưa lưu được. Vui lòng bấm lưu lần nữa.");
      case "url_not_allowed":
      case "download_failed":
      case "file_too_large":
      case "unsupported_file_type": // lỗi do tệp hoặc URL: thử lại không giúp gì
        return showBanner(e.message);
    }
    showBanner(e.message);
    console.error(e.code, e.detail);
  }

  function onLimitReached(e) {
    // Không phải lỗi: tài liệu đã mở ở chế độ chỉ đọc
    showBanner(e.message, "Thử sửa lại", () => 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>