Interface HighlightPublicInterface

interface HighlightPublicInterface {
    addSessionFeedback: (feedbackOptions: SessionFeedbackOptions) => void;
    consume: (
        error: Error,
        opts: {
            message?: string;
            payload?: object;
            source?: string;
            type?: ErrorMessageType;
        },
    ) => void;
    consumeError: (
        error: Error,
        message?: string,
        payload?: { [key: string]: string },
    ) => void;
    error: (message: string, payload?: { [key: string]: string }) => void;
    getRecordingState: () => "NotRecording" | "Recording";
    getSessionDetails: () => Promise<SessionDetails>;
    getSessionURL: () => Promise<string>;
    identify: (
        identifier: string,
        metadata?: Metadata,
        source?: Source,
    ) => void;
    init: (
        projectID?: string | number,
        debug?: HighlightOptions,
    ) => undefined | { sessionSecureID: string };
    log: (message: any, level: string, metadata?: Attributes) => void;
    metrics: (metrics: Metric[]) => void;
    onHighlightReady: (
        func: () => void | Promise<void>,
        options?: OnHighlightReadyOptions,
    ) => void;
    options: undefined | HighlightOptions;
    recordCount: (metric: Metric) => void;
    recordHistogram: (metric: Metric) => void;
    recordIncr: (metric: Omit<Metric, "value">) => void;
    recordMetric: (metric: Metric) => void;
    recordUpDownCounter: (metric: Metric) => void;
    registerLD: (
        client: LDClient,
        metadata?: LDPluginEnvironmentMetadata,
    ) => void;
    snapshot: (element: HTMLCanvasElement) => Promise<void>;
    start: (options?: StartOptions) => void;
    startManualSpan: {
        <F extends (span: Span) => ReturnType<F>>(
            name: string,
            fn: F,
        ): ReturnType<F>;
        <F extends (span: Span) => ReturnType<F>>(
            name: string,
            options: SpanOptions,
            fn: F,
        ): ReturnType<F>;
        <F extends (span: Span) => ReturnType<F>>(
            name: string,
            options: SpanOptions,
            context: Context,
            fn: F,
        ): ReturnType<F>;
    };
    startSpan: {
        <F extends (span?: Span) => ReturnType<F>>(
            name: string,
            fn: F,
        ): ReturnType<F>;
        <F extends (span?: Span) => ReturnType<F>>(
            name: string,
            options: SpanOptions,
            fn: F,
        ): ReturnType<F>;
        <F extends (span?: Span) => ReturnType<F>>(
            name: string,
            options: SpanOptions,
            context: Context,
            fn: F,
        ): ReturnType<F>;
    };
    stop: (options?: StartOptions) => void;
    track: (event: string, metadata?: Metadata) => void;
}

Properties

addSessionFeedback

addSessionFeedback: (feedbackOptions: SessionFeedbackOptions) => void

Calling this will add a feedback comment to the session.

consume

consume: (
    error: Error,
    opts: {
        message?: string;
        payload?: object;
        source?: string;
        type?: ErrorMessageType;
    },
) => void

Calling this method will report an error in Highlight while allowing additional attributes to be sent over as metadata.

See

for more information.

consumeError

consumeError: (
    error: Error,
    message?: string,
    payload?: { [key: string]: string },
) => void

Calling this method will report an error in Highlight and map it to the current session being recorded. A common use case for H.error is calling it right outside of an error boundary.

See

https://docs.highlight.run/grouping-errors for more information.

error

error: (message: string, payload?: { [key: string]: string }) => void

Deprecated

with replacement by consumeError for an in-app stacktrace.

getRecordingState

getRecordingState: () => "NotRecording" | "Recording"

getSessionDetails

getSessionDetails: () => Promise<SessionDetails>

getSessionURL

getSessionURL: () => Promise<string>

identify

identify: (identifier: string, metadata?: Metadata, source?: Source) => void

Calling this will assign an identifier to the session.

Type declaration

- (identifier: string, metadata?: Metadata, source?: Source): void
- Parameters
  - identifier: string
    Is commonly set as an email or UUID.
  - Optionalmetadata: Metadata
    Additional details you want to associate to the user.
  - Optionalsource: Source
  Returns void

Example

identify('teresa@acme.com', { accountAge: 3, cohort: 8 })

init

init: (
projectID?: string | number,
debug?: HighlightOptions,
) => undefined | { sessionSecureID: string }

log

log: (message: any, level: string, metadata?: Attributes) => void

metrics

metrics: (metrics: Metric[]) => void

Calling this method will report metrics to Highlight. You can graph metrics or configure alerts on metrics that exceed a threshold.

See

https://docs.highlight.run/frontend-observability for more information.

onHighlightReady

onHighlightReady: (
func: () => void | Promise<void>,
options?: OnHighlightReadyOptions,
) => void

options

options: undefined | HighlightOptions

recordCount

recordCount: (metric: Metric) => void

Record arbitrary metric values via as a Counter. A Counter efficiently records an increment in a metric, such as number of cache hits. Values with the same metric name and attributes are aggregated via the OTel SDK. See https://opentelemetry.io/docs/specs/otel/metrics/data-model/ for more details.

recordHistogram

recordHistogram: (metric: Metric) => void

Record arbitrary metric values via as a Histogram. A Histogram efficiently records near-by point-in-time measurement into a bucketed aggregate. Values with the same metric name and attributes are aggregated via the OTel SDK. See https://opentelemetry.io/docs/specs/otel/metrics/data-model/ for more details.

recordIncr

recordIncr: (metric: Omit<Metric, "value">) => void

recordMetric

recordMetric: (metric: Metric) => void

Record arbitrary metric values via as a Gauge. A Gauge records any point-in-time measurement, such as the current CPU utilization %. Values with the same metric name and attributes are aggregated via the OTel SDK. See https://opentelemetry.io/docs/specs/otel/metrics/data-model/ for more details.

recordUpDownCounter

recordUpDownCounter: (metric: Metric) => void

Record arbitrary metric values via as a UpDownCounter. A UpDownCounter efficiently records an increment or decrement in a metric, such as number of paying customers. Values with the same metric name and attributes are aggregated via the OTel SDK. See https://opentelemetry.io/docs/specs/otel/metrics/data-model/ for more details.

registerLD

registerLD: (client: LDClient, metadata?: LDPluginEnvironmentMetadata) => void

snapshot

snapshot: (element: HTMLCanvasElement) => Promise<void>

start

start: (options?: StartOptions) => void

startManualSpan

startManualSpan: {
    <F extends (span: Span) => ReturnType<F>>(
        name: string,
        fn: F,
    ): ReturnType<F>;
    <F extends (span: Span) => ReturnType<F>>(
        name: string,
        options: SpanOptions,
        fn: F,
    ): ReturnType<F>;
    <F extends (span: Span) => ReturnType<F>>(
        name: string,
        options: SpanOptions,
        context: Context,
        fn: F,
    ): ReturnType<F>;
}

Starts a new span for tracing in Highlight. The span will be ended when the end() is called on the span. It returns whatever is returned from the callback function.

Example

H.startManualSpan('span-name', options, (span) => {
  span.addEvent('event-name', { key: 'value' })
  span.setAttribute('key', 'value')
  await someAsyncFunction()
  span.end()
})

Example

const span = H.startManualSpan('span-name', (s) => s)
span.addEvent('event-name', { key: 'value' })
await someAsyncFunction()
span.end()

Param: name

The name of the span.

Param: options

Options for the span.

Param: context

The context for the span.

Param: fn

The function to run in the span.

startSpan

startSpan: {
    <F extends (span?: Span) => ReturnType<F>>(
        name: string,
        fn: F,
    ): ReturnType<F>;
    <F extends (span?: Span) => ReturnType<F>>(
        name: string,
        options: SpanOptions,
        fn: F,
    ): ReturnType<F>;
    <F extends (span?: Span) => ReturnType<F>>(
        name: string,
        options: SpanOptions,
        context: Context,
        fn: F,
    ): ReturnType<F>;
}

Starts a new span for tracing in Highlight. The span will be ended when the callback function returns.

Example

H.startSpan('span-name', callbackFn)

Example

H.startSpan('span-name', options, callbackFn)

Example

H.startSpan('span-name', options, context, callbackFn)

Example

H.startSpan('span-name', async (span) => {
  span.setAttribute('key', 'value')
  await someAsyncFunction()
})

Param: name

The name of the span.

Param: options

Options for the span.

Param: context

The context for the span.

Param: callbackFn

The function to run in the span.

stop

stop: (options?: StartOptions) => void

Stops the session and error recording.

track

track: (event: string, metadata?: Metadata) => void

Call this to record when you want to track a specific event happening in your application.

Type declaration

- (event: string, metadata?: Metadata): void
- Parameters
  - event: string
    The name of the event.
  - Optionalmetadata: Metadata
    Additional details you want to associate to the event.
  Returns void

Example

track('startedCheckoutProcess', { cartSize: 10, value: 85 })

Interface HighlightPublicInterface

Index

Properties

Properties

addSessionFeedback

consume

See

consumeError

See

error

Deprecated

getRecordingState

getSessionDetails

getSessionURL

identify

Type declaration

Parameters

Returns void

Example

init

log

metrics

See

onHighlightReady

options

recordCount

recordHistogram

recordIncr

recordMetric

recordUpDownCounter

registerLD

snapshot

start

startManualSpan

Example

Example

Param: name

Param: options

Param: context

Param: fn

startSpan

Example

Example

Example

Example

Param: name

Param: options

Param: context

Param: callbackFn

stop

track

Type declaration

Parameters

Returns void

Example

Settings

On This Page