Fix require calls in markdown stack due to upgrading dep to ESM-only

Author: webstackdev

SESSION.md

@@ -188,6 +188,26 @@ export default defineConfig({
        */
       include: ['lit', 'lit/directives/if-defined.js'],
     },
+    ssr: {
+      /**
+       * sanitize-html (CommonJS) loads its HTML parser with require(), but its
+       * dependency chain (htmlparser2 v10+, dom-serializer v3, domhandler v6,
+       * domutils v4, domelementtype v3, entities v8) is ESM-only. Vercel's
+       * serverless module loader cannot require() ES modules, which crashed
+       * POST /_actions/webmentions.list with ERR_REQUIRE_ESM in production.
+       * Bundle the sanitizer and its parser dependency chain into the ESM
+       * server output so no runtime require() of these packages occurs.
+       */
+      noExternal: [
+        'sanitize-html',
+        'htmlparser2',
+        'dom-serializer',
+        'domelementtype',
+        'domhandler',
+        'domutils',
+        'entities',
+      ],
+    },
     /**
      * Astro 6 reads `environments.client.build.sourcemap` for client bundles
      * instead of the top-level `build.sourcemap` (which only affects server).

astro.config.ts

@@ -225,4 +225,33 @@ describe('WebMentions web component', () => {
       { url: 'https://example.com/forbidden-thrown-post' }
     )
   })
+
+  test('reports empty action error messages with descriptive fallback details', async () => {
+    /** Mirrors the ActionError Astro returns for a 500 with a non-JSON body. */
+    const emptyActionError = Object.assign(new Error(''), {
+      code: 'INTERNAL_SERVER_ERROR',
+      status: 500,
+    })
+    webmentionsListMock.mockResolvedValue({
+      data: undefined,
+      error: emptyActionError,
+    })
+
+    await runComponentRender(
+      async ({ element }) => {
+        await flushMicrotasks()
+        await element.updateComplete
+
+        expect(element.querySelector('#webmentions')).toBeNull()
+        expect(handleScriptErrorMock).toHaveBeenCalledWith(
+          expect.objectContaining({
+            message: 'Failed to load WebMentions data. (INTERNAL_SERVER_ERROR, HTTP status 500)',
+            cause: emptyActionError,
+          }),
+          { scriptName: 'WebMentionsElement', operation: 'load' }
+        )
+      },
+      { url: 'https://example.com/empty-message-post' }
+    )
+  })
 })

src/components/WebMentions/client/__tests__/index.spec.ts

@@ -6,6 +6,7 @@ import { handleScriptError } from '@components/scripts/errors/handler'
 import {
   isForbiddenClientActionError,
   normalizeClientActionError,
+  type ClientActionError,
 } from '@components/scripts/errors/actionClient'
 import type { WebComponentModule } from '@components/scripts/@types/webComponentModule'
 import type { WebmentionDisplayItem, WebmentionsListResult } from '@actions/webmentions/@types'
@@ -21,6 +22,28 @@ const emptyWebmentionsResult: WebmentionsListResult = {
   repostsCount: 0,
 }
 
+/**
+ * Astro's action client surfaces unexpected server failures (such as an HTTP 500
+ * with a non-JSON body) as an ActionError with an empty message, which Sentry
+ * would record as "Unknown error". Build a descriptive error from the normalized
+ * action error so handled reports stay diagnosable, keeping the original as cause.
+ */
+const toLoadReportError = (error: unknown, actionError?: ClientActionError): unknown => {
+  if (error instanceof Error && error.message.trim().length > 0) {
+    return error
+  }
+
+  const details = [
+    actionError?.code,
+    actionError?.status ? `HTTP status ${actionError.status}` : undefined,
+  ]
+    .filter(Boolean)
+    .join(', ')
+  const message = `Failed to load WebMentions data.${details ? ` (${details})` : ''}`
+
+  return new Error(message, error instanceof Error ? { cause: error } : undefined)
+}
+
 const formatDate = (dateString: string): string => {
   const date = new Date(dateString)
   return new Intl.DateTimeFormat('en-US', {
@@ -126,7 +149,7 @@ export class WebMentionsElement extends LitElement {
           return
         }
 
-        handleScriptError(error ?? new Error('Failed to load WebMentions data.'), {
+        handleScriptError(toLoadReportError(error, actionError), {
           scriptName,
           operation: 'load',
         })
@@ -150,7 +173,7 @@ export class WebMentionsElement extends LitElement {
         return
       }
 
-      handleScriptError(error, { scriptName, operation: 'load' })
+      handleScriptError(toLoadReportError(error, actionError), { scriptName, operation: 'load' })
 
       if (this.lastLoadedUrl === normalizedUrl) {
         this.lastLoadedUrl = ''