fix(core): logging overhaul

[ematipico]

Changes

Closes #15284
Closes #15310

This PR address three things

The debug package

Removed it. It's old, not ESM friendly, and it doesn't work with CF. I eventually found obug, a drop-in replacement. Thank you e18e. They will add it to the website soon.

The other problem is that debug is contained in our dependencies too, especially in the rehype-remark rabbit hole. It's pulled in our runtime via Code component. I used an alias to replace it. Thank you vite

Code doesn't work with CF

Not sure why and how it worked before, but Code started to fail, even in our tests. Not sure what changed in these past weeks/months, because it used to work during the refactor to vite environment APIs.

I tried and tried with a coding agent, and the result was always the same: workerd in dev mode can't run the WASM engined used by shiki. Solution? Use the JavaScript engine. It works with this one.

Logging

We lost of our logging or requests in our dev server. Mainly this bit:

astro/packages/astro/src/vite-plugin-astro-server/route.ts

Lines 271 to 283 in f2955fb

	if (isLoggedRequest(pathname)) {
	const timeEnd = performance.now();
	logger.info(
	null,
	req({
	url: pathname,
	method: incomingRequest.method,
	statusCode,
	isRewrite,
	reqTime: timeEnd - timeStart,
	}),
	);
	}

Which I restored in this PR via an abstract method, which is implemented only in our dev pipelines. While doing so, I realised that things started to fail because we were pulling Node.js code, so I did the only sane thing and split the utilities/messages in runtime VS node.

Testing

Current CI should pass. Manually tested that DEBUG= still works, --verbose still works and I see logs in dev.

I updated biome.jsonc to match any file that contains runtime in their name. It should match more files.

Docs

N/A

[changeset-bot]

🦋 Changeset detected

Latest commit: e6b9610

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codspeed-hq]

Merging this PR will not alter performance

✅ 9 untouched benchmarks

---

_{Comparing fix/logging (e6b9610) with main (d789452)}

PR has changed a lot

[ascorbic]

The best way to detect if this is running in workerd is to see if navigator?.userAgent === "Cloudflare-Workers". That said, is there a way to do this without this explicit sniffing? Is there any feature detection we could do?

[rururux]

Hello,

I’ve also been looking into the issue where the <Code /> component fails to work on Cloudflare Workers, and I found something interesting.
While checking this specific part of @astrojs/markdown-remark's package.json, it occurred to me that we might be able to achieve the same thing in the workerd environment.

astro/packages/markdown/remark/package.json

Lines 18 to 22 in 00e95c4

	"imports": {
	"#import-plugin": {
	"browser": "./dist/import-plugin-browser.js",
	"default": "./dist/import-plugin-default.js"
	}

https://developers.cloudflare.com/workers/wrangler/bundling/#conditional-exports

Wrangler respects the conditional exports field ↗ in package.json. This allows developers to implement isomorphic libraries that have different implementations depending on the JavaScript runtime they are running in. When bundling, Wrangler will try to load the workerd key ↗. Refer to the Wrangler repository for an example isomorphic package ↗.

In other words, the engine-related issue can be bypassed like this:

  "imports": {
    "#import-plugin": {
      "browser": "./dist/import-plugin-browser.js",
      "default": "./dist/import-plugin-default.js"
    },
    "#shiki-engine": {
      "workerd": "./dist/shiki-engine-worker.js",
      "default": "./dist/shiki-engine-default.js"
    }
  }

// shiki-engine-worker.ts
import type { RegexEngine } from 'shiki'
import { createOnigurumaEngine } from 'shiki/engine/oniguruma';

export function loadShikiEngine(): Promise<RegexEngine> {
  // @ts-ignore wasm type
  return createOnigurumaEngine(import('shiki/onig.wasm'));
}

// shiki-engine-default.ts
import type { RegexEngine } from 'shiki'
import { createOnigurumaEngine } from 'shiki/engine/oniguruma';

export function loadShikiEngine(): Promise<RegexEngine> {
  return createOnigurumaEngine(import('shiki/wasm'))
}

// shiki.ts
import { loadShikiEngine } from "#shiki-engine"

// ...

let shikiEngine: RegexEngine | undefined = undefined;

export async function createShikiHighlighter({
  // ...
}: CreateShikiHighlighterOptions = {}): Promise<ShikiHighlighter> {
  theme = theme === 'css-variables' ? cssVariablesTheme() : theme;

  if (shikiEngine === undefined) {
    shikiEngine = await loadShikiEngine();
  }

  const highlighterOptions = {
    langs: ['plaintext', ...langs],
    langAlias,
    themes: Object.values(themes).length ? Object.values(themes) : [theme],
    engine: shikiEngine,
  };

  // ...

I hope this information helps. Please feel free to ignore or delete this comment if it’s not relevant.