Astro中使用umami配置shareUrl后，页面使用<script is:inline> 存在script 加载顺序问题

[whynotsnow]

// astro.config.mjs 配置
umami({
		shareUrl:
			"https://cloud.umami.is/analytics/us/share/xxxx",
	})

<script is:inline>
	async function fetchSiteStats() {
		const container = document.querySelector(".umami-stats-container");

		// oddmisc 未加载则隐藏
		if (!window.oddmisc) {
			container?.classList.add("hidden");
			return;
		}

		try {
			const stats = await window.oddmisc.getSiteStats();
			const pageViews = stats.pageviews || 0;
			const visits = stats.visits || 0;

			// 数据为 0 时隐藏
			if (pageViews === 0 && visits === 0) {
				container?.classList.add("hidden");
				console.warn("oddmisc on pageviews data", stats);
				return;
			}

			container?.classList.remove("hidden");
			document.querySelectorAll(".site-stats-display").forEach((el) => {
				el.textContent = generateStatsText(pageViews, visits);
			});
		} catch (error) {
			console.error("Error fetching site stats:", error);
			container?.classList.add("hidden");
		}
	}

if (document.readyState === "loading") {
	document.addEventListener("DOMContentLoaded", () => fetchSiteStats());
} else {
	fetchSiteStats();
}
<script />

页面初始化时，window.oddmisc还没有执行完毕获取不到oddmisc导致后续逻辑不执行
建议如下
提供专属的事件订阅

// https://github.com/yCENzh/oddmisc/blob/main/src/runtime/client.ts
export function initUmamiRuntime(config: UmamiRuntimeConfig): void {
  if (!config.shareUrl) {
    console.log('[oddmisc] shareUrl 未配置，跳过初始化');
    mountEmptyClient();
    return;
  }

  try {
    const client = new UmamiRuntimeClient(config);

    (window as any).oddmisc = (window as any).oddmisc || {};
    (window as any).oddmisc.umami = client;
    (window as any).oddmisc.getStats = (path?: string) => client.getStats(path);
    (window as any).oddmisc.getSiteStats = () => client.getSiteStats();
    (window as any).oddmisc.getPageStats = (path: string) => client.getPageStats(path);
    (window as any).oddmisc.clearCache = () => client.clearCache();

   // 新增专属订阅事件，并传入client
    window.dispatchEvent(
      new CustomEvent("oddmisc-ready", {
        detail: {
          client
        }
      })
    );
    
    console.log('[oddmisc] Umami runtime client initialized');
  } catch (error) {
    console.warn('[oddmisc] 初始化失败:', error instanceof Error ? error.message : error);
    mountEmptyClient();
  }
}

在astro页面监听可以这样，不需要污染全局对象window

<script is:inline>
    window.addEventListener("oddmisc-ready", (event) => {
      const e = event as OddmiscReadyEvent;
      const client = e.detail.client;
    
      client.getSiteStats().then(console.log);
    });
<script />

[yCENzh]

哦!谢谢,我才注意到这个问题,但我思考过后感觉好像不完全对(应该 吧)

看src/runtime/client.ts:223-245

export function initUmamiRuntime(config: UmamiRuntimeConfig): void {
  // ...
  const client = new UmamiRuntimeClient(config);  // 同步执行
  (window as any).oddmisc = (window as any).oddmisc || {};
  (window as any).oddmisc.getStats = ...;  // 同步挂载
  // ...
}

initUmamiRuntime本身是完全同步的,window.oddmisc会在脚本执行时立即被设置;我认为真正的问题出现在 Astro 脚本注入顺序:

• integration.ts:40 使用 injectScript('page', initCode) 注入到< head>
• 用户的<script is:inline>如果位置在注入脚本之前,就会先执行

所以问题应该不是window.oddmisc"没有执行完毕",而是注入顺序不确定导致用户脚本可能先于oddmisc初始化脚本执行

看你提出的 oddmisc-ready 自定义事件方案是合理的,可以解耦脚本执行顺序依赖,但建议代码中似乎有个小笔误: initUmamiRuntime不应重复调用自己

总之还是感谢你的反馈,我顺便找找其他问题,等会一起改了