Vue Storefront is now Alokai! Learn More
Instrumentation

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>
  );
}

Middleware

If you are using @alokai/connect version 1.1.0 or newer, no action is required. For older versions, either upgrade the said package to the required version or install the @alokai/instrumentation package and add the traceExtension to the extensions array of your e-commerce integration:

+ import { traceExtension } from '@alokai/instrumentation'

export const config = {
  location: 'name-of-your-integration-package',
  configuration: {
    ...
  },

  extensions: (extensions: ApiClientExtension[]) => [
    ...extensions,
+   traceExtension,
    unifiedApiExtension,
    cdnExtension,
    configSwitcherExtension,
  ],
} satisfies Integration<Config>;

Verifying that it works

To verify that everything is working as intended, please contact our support team.