GLUON / DOCS Playground

@gluonjs/ssr

@gluonjs/ssr / packages/ssr/src/hydration / HydrationMarkerTransportError

Class: HydrationMarkerTransportError

Extends

Constructors

Constructor

new HydrationMarkerTransportError(mismatch, message): HydrationMarkerTransportError

Parameters

mismatch

HydrationMarkerTransportMismatch

message

string

Returns

HydrationMarkerTransportError

Overrides

SsrTransportError.constructor

Properties

code

readonly code: "GLUON_UNSUPPORTED_SSR_TRANSPORT" = 'GLUON_UNSUPPORTED_SSR_TRANSPORT'

Inherited from

SsrTransportError.code

mismatch

readonly mismatch: HydrationMarkerTransportMismatch

Example

Handle missing, invalid, or tampered nested DSD marker transport before mutating a retained root:

ts
import { GluonElement, defineElement, html } from '@gluonjs/core';
import {
  SSR_HYDRATION_MARKER_ATTRIBUTE,
  renderElement,
  renderToString,
  type RenderSerializationOptions,
  type SsrHydrationMarkerTransport,
} from '@gluonjs/ssr';
import {
  HydrationMarkerTransportError,
  type HydrationMarkerTransportMismatch,
} from '@gluonjs/ssr/hydration';

class NestedBadge extends GluonElement {
  protected render() { return html`<strong>Ready</strong>`; }
}
defineElement('transport-badge', NestedBadge);
const transport: SsrHydrationMarkerTransport = { version: 1, start: 0, end: 1 };
const options = { signal: new AbortController().signal } satisfies RenderSerializationOptions;
const htmlOutput = await renderToString(renderElement(NestedBadge), options);
const attribute = SSR_HYDRATION_MARKER_ATTRIBUTE;
const mismatch: HydrationMarkerTransportMismatch = 'tampered';
const error = new HydrationMarkerTransportError(mismatch, `${attribute}: ${transport.start}-${transport.end}`);
console.log(htmlOutput, error.message);