GLUON / DOCS Playground

@gluonjs/core

@gluonjs/core / src / HydrationMismatchError

Class: HydrationMismatchError

Extends

  • Error

Constructors

Constructor

new HydrationMismatchError(mismatches): HydrationMismatchError

Parameters

mismatches

readonly HydrationMismatch[]

Returns

HydrationMismatchError

Overrides

Error.constructor

Properties

mismatches

readonly mismatches: readonly HydrationMismatch[]

Example

Catch strict hydration aborts and inspect every structured mismatch that prevented DOM retention:

ts
import { HydrationMismatchError, html, hydrate, type HydrationMismatch, type HydrationMismatchCategory, type HydrationOptions, type HydrationResult } from '@gluonjs/core';

const root = document.querySelector<HTMLElement>('#app')!;
const template = html`<main>Shop</main>`;
const category: HydrationMismatchCategory = 'text';
const observed: HydrationMismatch[] = [];
const options = {
  expectedMarkup: '<main>Shop</main>',
  recovery: 'replace',
  suppress: [category],
  onMismatch: (mismatch: HydrationMismatch) => observed.push(mismatch),
  state: { server: { bag: 1 }, client: { bag: 1 } },
} satisfies HydrationOptions;
try {
  const result: HydrationResult = hydrate(template, root, options);
  console.log(result.retained, result.recovered, result.mismatches);
} catch (error) {
  if (error instanceof HydrationMismatchError) console.error(error.mismatches);
  else throw error;
}