Instrumentation

If you are extending your contract with Alokai and joined us in 2025 or earlier, you may be required to install Alokai instrumentation as part of your storefront setup.

The instrumentation has to be enabled for storefront and middleware separately. Please refer to the appropriate section below based on your current setup:

Storefront

If you are using @vue-storefront/next version 6.1.0 or later, no action is required.

Otherwise, update the said package to the required version or install the @alokai/instrumentation-next-component. It should be present on all pages. The easiest way to do it on app router is to edit the main layout file. For your project, this file is likely located in apps/storefront-unified-nextjs/app/[locale]/layout.tsx.

+ import { AlokaiInstrumentation } from '@alokai/instrumentation-next-component';
//..
export default function RootLayout({ children }: PropsWithChildren) {
  // ...
  return (
    <html lang={locale}>
      <head>
        <link href="res.cloudinary.com" rel="preconnect" />
      </head>
      <body className={classNames(fontHeadings.variable, fontBody.variable, 'font-body')}>
        <NextIntlClientProvider messages={pick(messages, 'Notifications.NotificationAlert')}>
          <PublicEnvProvider>
            <Providers initialCurrency={currencies} sdkOptions={sdkConfig}>
+              <AlokaiInstrumentation />
              {children}
            </Providers>
          </PublicEnvProvider>
        </NextIntlClientProvider>
      </body>
    </html>
  );
}