better-ship 0.33.0 → 0.35.0

package/src/infrastructure/browser-support/update-screen.ts

@@ -0,0 +1,142 @@
+/** Set on `documentElement` when the update screen is showing. Hydration checks this name. */
+export const unsupportedBrowserAttribute = 'data-unsupported-browser'
+
+const updateTitleAttribute = 'data-update-title' as const
+const updateBodyAttribute = 'data-update-body' as const
+const fallbackFont = 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif'
+
+/** Copy and public URLs for the update screen tags in the document head. */
+export type UpdateScreenHead = {
+  readonly title: string
+  readonly body: string
+  /** Public URL of `updateScreenStyle`. */
+  readonly styleHref: string
+  /** Public URL of `updateScreenScript`. */
+  readonly scriptSrc: string
+}
+
+/** Stylesheet link a root route places in `head().links`. */
+export type UpdateScreenLink = {
+  readonly rel: 'stylesheet'
+  readonly href: string
+}
+
+/** Deferred script a root route places in `head().scripts`. */
+export type UpdateScreenScript = {
+  readonly src: string
+  readonly defer: true
+  readonly 'data-update-title': string
+  readonly 'data-update-body': string
+}
+
+/**
+ * `links` and `scripts` a root route spreads into `head()`.
+ * The arrays are mutable so they match the `head()` return type.
+ */
+export type UpdateScreenHeadEntries = {
+  links: UpdateScreenLink[]
+  scripts: UpdateScreenScript[]
+}
+
+/**
+ * Stylesheet and deferred script entries for a root route `head()`.
+ * Spread `links` and `scripts` into `head()`. The router escapes the attribute values.
+ * `defer` keeps parsing unblocked. The script is classic ES5, so a browser below the floor can show the screen.
+ */
+export function updateScreenHeadScript(head: UpdateScreenHead): UpdateScreenHeadEntries {
+  return {
+    links: [{ rel: 'stylesheet', href: head.styleHref }],
+    scripts: [
+      {
+        src: head.scriptSrc,
+        defer: true,
+        [updateTitleAttribute]: head.title,
+        [updateBodyAttribute]: head.body,
+      },
+    ],
+  }
+}
+
+/** True when the update screen script marked this element. Skip hydration when it is true. */
+export function isUnsupportedBrowser(root: {
+  readonly hasAttribute: (name: string) => boolean
+}): boolean {
+  return root.hasAttribute(unsupportedBrowserAttribute)
+}
+
+/**
+ * Classic ES5 script. Serve it at `scriptSrc`.
+ * It shows the screen when `CSS.registerProperty` or `color-mix()` is missing, and does nothing at the floor.
+ */
+export const updateScreenScript = `(function () {
+  var cssApi = typeof CSS === 'undefined' ? null : CSS;
+  var hasProperty = cssApi !== null && typeof cssApi.registerProperty === 'function';
+  var hasMix = cssApi !== null && typeof cssApi.supports === 'function' && cssApi.supports('color', 'color-mix(in srgb, red, blue)');
+  if (hasProperty && hasMix) return;
+  document.documentElement.setAttribute('${unsupportedBrowserAttribute}', '');
+  var scripts = document.getElementsByTagName('script');
+  var title = 'Update your browser';
+  var body = '';
+  for (var index = 0; index < scripts.length; index = index + 1) {
+    var marker = scripts[index].getAttribute('${updateTitleAttribute}');
+    if (marker === null) continue;
+    title = marker;
+    var text = scripts[index].getAttribute('${updateBodyAttribute}');
+    body = text === null ? '' : text;
+    break;
+  }
+  var screen = document.createElement('div');
+  screen.id = 'unsupported-browser';
+  var heading = document.createElement('h1');
+  heading.className = 'unsupported-browser-title';
+  heading.textContent = title;
+  var paragraph = document.createElement('p');
+  paragraph.className = 'unsupported-browser-body';
+  paragraph.textContent = body;
+  screen.appendChild(heading);
+  screen.appendChild(paragraph);
+  document.body.appendChild(screen);
+})();
+`
+
+// `!important` keeps application styles from painting over the update screen.
+/** Classic CSS for the update screen. Serve it at `styleHref`. Tokens fall back to neutral grey and a system sans-serif. */
+export const updateScreenStyle = `html[${unsupportedBrowserAttribute}],
+html[${unsupportedBrowserAttribute}] body {
+  margin: 0;
+  min-height: 100%;
+  background: var(--band, #f5f5f5);
+}
+html[${unsupportedBrowserAttribute}] body > :not(#unsupported-browser) {
+  display: none !important;
+}
+#unsupported-browser {
+  box-sizing: border-box;
+  min-height: 100vh;
+  margin: 0;
+  padding: 48px 24px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  background: var(--band, #f5f5f5);
+  color: var(--foreground, #171717);
+  font-family: var(--font-text, ${fallbackFont});
+}
+.unsupported-browser-title {
+  margin: 0 0 12px;
+  max-width: 28rem;
+  font-family: var(--font-brand, ${fallbackFont});
+  font-size: 2rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+.unsupported-browser-body {
+  margin: 0;
+  max-width: 32rem;
+  color: var(--muted-foreground, #525252);
+  font-size: 1.0625rem;
+  line-height: 1.5;
+}
+`

package/src/infrastructure/sentry/client.ts

@@ -33,6 +33,47 @@ export function createSentryLoggerErrorHook(): LoggerErrorHook {
   }
 }
 
+/** The error value as Sentry's React handler receives it. */
+type ReactRootError = Parameters<ReturnType<typeof Sentry.reactErrorHandler>>[0]
+
+/** The details React passes to a root error option; React may omit the component stack. */
+export type ReactRootErrorInfo = { readonly componentStack?: string | undefined }
+
+/** A `hydrateRoot` error option in React's own shape. */
+type ReactRootErrorHandler = (error: ReactRootError, errorInfo: ReactRootErrorInfo) => void
+
+/** The `hydrateRoot` error options; each one replaces React's console default. */
+export type SentryReactRootOptions = {
+  readonly onCaughtError: ReactRootErrorHandler
+  readonly onUncaughtError: ReactRootErrorHandler
+  readonly onRecoverableError: ReactRootErrorHandler
+}
+
+/**
+ * Report React errors to Sentry from `hydrateRoot`, as Sentry's React 19 setup does.
+ * Covers errors that a boundary catches, errors that no boundary catches, and hydration
+ * errors that React recovers from. TanStack redirects and not-found control flow are not
+ * reported. Each error still goes to the console, as with React's defaults.
+ */
+export function createSentryReactRootOptions(): SentryReactRootOptions {
+  const handler = Sentry.reactErrorHandler((error, errorInfo) => {
+    console.error(error, errorInfo.componentStack)
+  })
+  // Sentry's handler takes `null` for a missing component stack.
+  const report: ReactRootErrorHandler = (error, { componentStack }) => {
+    handler(error, { componentStack: componentStack ?? null })
+  }
+  return {
+    // TanStack Router renders not-found through a React error boundary, so each 404 arrives here.
+    onCaughtError: (error, errorInfo) => {
+      if (isNotFound(error) || isRedirect(error)) return
+      report(error, errorInfo)
+    },
+    onUncaughtError: report,
+    onRecoverableError: report,
+  }
+}
+
 /** Initialize once in the browser entrypoint before hydration; server imports have no side effects. */
 export function initializeSentry(options: SentryClientOptions): ReturnType<typeof Sentry.init> {
   const client = Sentry.init(createSentryClientOptions(options))