`+onHookCall()` hook

Environment: server (and/or client)

type OnHookCall = (hook: Hook, pageContext: null | PageContextServer) => void
type Hook = {
  name: string
  filePath: string
  call: () => void | Promise<void>
}

Global

Cumulative

Provided by: vike

⚠️
It's in beta: breaking changes may occur with any version update.

Hook called whenever a Vike hook is called. Commonly used for instrumentation (e.g. Sentry, OpenTelemetry).

// pages/+onHookCall.js
// Environment: server
 
export async function onHookCall(hook, pageContext) {
  console.log('before', hook.name, hook.filePath)
  await hook.call()
  console.log('after', hook.name, hook.filePath)
}

// pages/+onHookCall.ts
// Environment: server
 
import type { Config, PageContextServer } from 'vike/types'
type Hook = Parameters<Extract<Config['onHookCall'], Function>>[0]
 
export async function onHookCall(hook: Hook, pageContext: PageContextServer) {
  console.log('before', hook.name, hook.filePath)
  await hook.call()
  console.log('after', hook.name, hook.filePath)
}

You must always call hook.call() and do so before any await.

// ❌ This breaks sync hooks
export const onHookCall = async (hook, pageContext) => {
  await someAsyncOperation()
  await hook.call() // Too late for sync hooks!
}

// ❌ This breaks sync hooks
export const onHookCall: Config['onHookCall'] = async (hook, pageContext) => {
  await someAsyncOperation()
  await hook.call() // Too late for sync hooks!
}

// ✅ This works for both sync and async hooks
export const onHookCall = async (hook, pageContext) => {
  await hook.call() // Called before any await
  await someAsyncOperation()
}

// ✅ This works for both sync and async hooks
export const onHookCall: Config['onHookCall'] = async (hook, pageContext) => {
  await hook.call() // Called before any await
  await someAsyncOperation()
}

The first parameter hook contains:

hook.name — Name of the hook being called (e.g. 'onRenderHtml', 'data', 'guard')
hook.filePath — File path where the hook is defined
hook.call() — Call the hook

The second parameter is pageContext or null.

You can access globalContext by using getGlobalContext().

To execute it on the client, define +onHookCall.client.js or +onHookCall.shared.js — see Guides > File Environment (.server.js, .client.js, ...).

Use case: instrumentation

Instrument hooks with Sentry:

// pages/+onHookCall.js
// Environment: server
 
import * as Sentry from '@sentry/node'
 
export async function onHookCall(hook, pageContext) {
  await Sentry.startSpan(
    {
      op: 'vike.hook',
      name: hook.name,
      attributes: { filePath: hook.filePath }
    },
    async () => {
      await hook.call()
    }
  )
}

// pages/+onHookCall.ts
// Environment: server
 
import * as Sentry from '@sentry/node'
import type { Config, PageContextServer } from 'vike/types'
type Hook = Parameters<Extract<Config['onHookCall'], Function>>[0]
 
export async function onHookCall(hook: Hook, pageContext: PageContextServer) {
  await Sentry.startSpan(
    {
      op: 'vike.hook',
      name: hook.name,
      attributes: { filePath: hook.filePath }
    },
    async () => {
      await hook.call()
    }
  )
}

Instrument hooks with OpenTelemetry:

// pages/+onHookCall.js
// Environment: server
 
import { trace } from '@opentelemetry/api'
 
const tracer = trace.getTracer('vike')
 
export async function onHookCall(hook, pageContext) {
  await tracer.startActiveSpan(hook.name, async (span) => {
    span.setAttribute('hook.filePath', hook.filePath)
    try {
      await hook.call()
    } finally {
      span.end()
    }
  })
}

// pages/+onHookCall.ts
// Environment: server
 
import { trace } from '@opentelemetry/api'
import type { Config, PageContextServer } from 'vike/types'
type Hook = Parameters<Extract<Config['onHookCall'], Function>>[0]
 
const tracer = trace.getTracer('vike')
 
export async function onHookCall(hook: Hook, pageContext: PageContextServer) {
  await tracer.startActiveSpan(hook.name, async (span) => {
    span.setAttribute('hook.filePath', hook.filePath)
    try {
      await hook.call()
    } finally {
      span.end()
    }
  })
}

Use case: logging

Log all hook executions for debugging:

// pages/+onHookCall.shared.js
// Environment: server & client
 
export async function onHookCall(hook, pageContext) {
  const start = performance.now()
  console.log(`[+${hook.name}] start`)
  try {
    await hook.call()
    console.log(`[+${hook.name}] done in ${(performance.now() - start).toFixed(2)}ms`)
  } catch (error) {
    console.error(`[+${hook.name}] error`, error)
    throw error
  }
}

// pages/+onHookCall.shared.ts
// Environment: server & client
 
import type { Config, PageContext } from 'vike/types'
type Hook = Parameters<Extract<Config['onHookCall'], Function>>[0]
 
export async function onHookCall(hook: Hook, pageContext: PageContext) {
  const start = performance.now()
  console.log(`[+${hook.name}] start`)
  try {
    await hook.call()
    console.log(`[+${hook.name}] done in ${(performance.now() - start).toFixed(2)}ms`)
  } catch (error) {
    console.error(`[+${hook.name}] error`, error)
    throw error
  }
}

+onHookCall() hook

Use case: instrumentation

Use case: logging

See also

`+onHookCall()` hook