@poveste/app 0.10.0 → 0.11.0

package/dist/bundled/sandbox.js

@@ -7,6 +7,7 @@ import { mapFile } from "./util/mapping.js";
 import GenericRenderStory_default from "./components/story/GenericRenderStory.js";
 import { createStateBridge } from "./util/state-bridge.js";
 import { toRawDeep } from "./util/state.js";
+import { isBenignResizeObserverEvent } from "./util/uncaught.js";
 import { usePreferredDark } from "@poveste/vendors/vue-use";
 import { computed, createApp, h, onMounted, ref, watch } from "@poveste/vendors/vue";
 import { createPinia } from "@poveste/vendors/pinia";
@@ -36,7 +37,9 @@ function reportUncaught(error) {
 		variantId: variantId.value
 	});
 }
-window.addEventListener("error", (event) => reportUncaught(event.error ?? event.message));
+window.addEventListener("error", (event) => {
+	if (!isBenignResizeObserverEvent(event)) reportUncaught(event.error ?? event.message);
+});
 window.addEventListener("unhandledrejection", (event) => reportUncaught(event.reason));
 var prefersDark = usePreferredDark();
 var previewDark = computed(() => resolvePreviewDark(receivedSettings.colorScheme, prefersDark.value, isDark.value));

package/dist/bundled/util/uncaught.js

@@ -0,0 +1,14 @@
+//#region src/app/util/uncaught.ts
+var RESIZE_OBSERVER_LOOP = ["ResizeObserver loop limit exceeded", "ResizeObserver loop completed with undelivered notifications"];
+/**
+* A ResizeObserver loop notification is the browser saying it deferred a resize
+* callback to the next frame, not a component throwing. It reaches the `error`
+* event with a null `error`, so reporting `event.error ?? event.message` blames
+* the story that happens to be rendering for it (#468). Requiring the null keeps
+* a genuine `throw` of the same text reportable.
+*/
+function isBenignResizeObserverEvent({ error, message }) {
+	return error == null && typeof message === "string" && RESIZE_OBSERVER_LOOP.some((known) => message.startsWith(known));
+}
+//#endregion
+export { isBenignResizeObserverEvent };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@poveste/app",
   "type": "module",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Pre-bundled UI for Poveste",
   "author": {
     "name": "Sorin Gitlan"
@@ -40,9 +40,9 @@
     "@fontsource/noto-sans-display": "^5.3.0",
     "fuse.js": "^7.0.0",
     "shiki": "^3.0.0",
-    "@poveste/controls": "^0.10.0",
-    "@poveste/shared": "^0.10.0",
-    "@poveste/vendors": "^0.10.0"
+    "@poveste/controls": "^0.11.0",
+    "@poveste/shared": "^0.11.0",
+    "@poveste/vendors": "^0.11.0"
   },
   "devDependencies": {
     "@iconify-json/carbon": "^1.2.25",

package/src/__tests__/uncaught.spec.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest'
+import { isBenignResizeObserverEvent } from '../app/util/uncaught'
+
+/**
+ * The shape the sandbox's `error` listener sees. A browser-emitted
+ * ResizeObserver notification carries a null `error`; a real throw carries the
+ * `Error` that was thrown.
+ */
+const notification = (message: string) => ({ error: null, message })
+const thrown = (message: string) => ({ error: new Error(message), message: `Uncaught Error: ${message}` })
+
+describe('a ResizeObserver loop notification', () => {
+  // Chrome's exact wording, trailing period included, as captured from a live
+  // observer loop.
+  it('is recognised as benign with the period Chrome sends', () => {
+    expect(isBenignResizeObserverEvent(notification('ResizeObserver loop completed with undelivered notifications.'))).toBe(true)
+  })
+
+  it('is recognised as benign without the period Firefox omits', () => {
+    expect(isBenignResizeObserverEvent(notification('ResizeObserver loop completed with undelivered notifications'))).toBe(true)
+  })
+
+  it('is recognised as benign in the older loop limit wording', () => {
+    expect(isBenignResizeObserverEvent(notification('ResizeObserver loop limit exceeded'))).toBe(true)
+  })
+})
+
+describe('an error the sandbox exists to report', () => {
+  it('is not treated as benign when a component throws the same text', () => {
+    expect(isBenignResizeObserverEvent(thrown('ResizeObserver loop completed with undelivered notifications'))).toBe(false)
+  })
+
+  it('is not treated as benign when an unrelated script fails with no error object', () => {
+    expect(isBenignResizeObserverEvent(notification('Script error.'))).toBe(false)
+  })
+})

package/src/app/sandbox.ts

@@ -14,6 +14,7 @@ import { mapFile } from './util/mapping'
 import { applyPreviewSettings, loadStoredPreviewSettings, receivedSettings } from './util/preview-settings.js'
 import { createStateBridge } from './util/state-bridge.js'
 import { toRawDeep } from './util/state.js'
+import { isBenignResizeObserverEvent } from './util/uncaught.js'
 
 const query = parseQuery(window.location.search)
 
@@ -65,7 +66,11 @@ if (window.parent && window.parent !== window) {
 function reportUncaught(error: unknown) {
   reportStoryError(error, { storyId: storyId.value, variantId: variantId.value })
 }
-window.addEventListener('error', event => reportUncaught(event.error ?? event.message))
+window.addEventListener('error', (event) => {
+  if (!isBenignResizeObserverEvent(event)) {
+    reportUncaught(event.error ?? event.message)
+  }
+})
 window.addEventListener('unhandledrejection', event => reportUncaught(event.reason))
 
 // The story preview has its own color scheme, independent from the app chrome.

package/src/app/util/uncaught.ts

@@ -0,0 +1,19 @@
+// Chrome ends the sentence with a period and Firefox does not, so these are
+// prefixes rather than whole messages.
+const RESIZE_OBSERVER_LOOP = [
+  'ResizeObserver loop limit exceeded',
+  'ResizeObserver loop completed with undelivered notifications',
+]
+
+/**
+ * A ResizeObserver loop notification is the browser saying it deferred a resize
+ * callback to the next frame, not a component throwing. It reaches the `error`
+ * event with a null `error`, so reporting `event.error ?? event.message` blames
+ * the story that happens to be rendering for it (#468). Requiring the null keeps
+ * a genuine `throw` of the same text reportable.
+ */
+export function isBenignResizeObserverEvent({ error, message }: { error?: unknown, message?: unknown }): boolean {
+  return error == null
+    && typeof message === 'string'
+    && RESIZE_OBSERVER_LOOP.some(known => message.startsWith(known))
+}