diff --git a/docs/content/4.sdk/2.getting-started/4.logger.md b/docs/content/4.sdk/2.getting-started/4.logger.md index 82a40ad83d..c35de336eb 100644 --- a/docs/content/4.sdk/2.getting-started/4.logger.md +++ b/docs/content/4.sdk/2.getting-started/4.logger.md @@ -2,13 +2,13 @@ The Logger provides a logging utility for Alokai Storefront projects. It allows you to log messages at various levels and ability to provide additional context. -It is created to provide a unified way of logging messages across the project along with providing additional data out of the box. +It is created to provide a unified way of logging messages across the project along with providing a structured data. ## Installation If the Logger is already included in the Alokai Storefront, you can skip this step. -The Logger is provided by the SDK and framework specific packages. +The Logger is provided by the SDK and the framework specific packages. In order to install the Logger, you need to update following packages to at least the following versions: @@ -16,45 +16,34 @@ In order to install the Logger, you need to update following packages to at leas - `@vue-storefront/nuxt` to `6.2.0` - `@vue-storefront/next` to `4.3.0` -After updating the packages, you need to provide the Logger module to the SDK config. +After updating the packages, you need to provide the Logger to the storefront. ::tabs{:titles='["Next.js", "Nuxt"]' class="mt-8"} #tab-1 +Create a file `logger.ts` in the `sdk` directory and add the following content: + ```ts -// apps/storefront-unified-nextjs/sdk/config.ts +// apps/storefront-unified-nextjs/sdk/logger.ts -// ... -export function getSdkConfig() { - return defineSdkConfig(({ buildModule, config, getRequestHeaders, middlewareModule }) => ({ // [!code --] - return defineSdkConfig(({ buildModule, config, getRequestHeaders, loggerModule, middlewareModule }) => ({ // [!code ++] - logger: buildModule(loggerModule), // [!code ++] - // ... - })); -} -``` +import { createLogger } from '@vue-storefront/next'; -#tab-2 +export const logger = createLogger(); -```ts -// apps/storefront-unified-nuxt/sdk/config.ts - -// ... -export default defineSdkConfig(({ buildModule, middlewareModule, getRequestHeaders, config }) => ({ // [!code --] -export default defineSdkConfig(({ buildModule, loggerModule, middlewareModule, getRequestHeaders, config }) => ({ // [!code ++] - logger: buildModule(loggerModule), // [!code ++] - // ... -})); ``` + +#tab-2 + +You don't need to do anything. The Logger is automatically provided by the `@vue-storefront/nuxt` package. It is available via auto-import and ready to use. :: ## Configuration The default configuration is already provided, but you can customize it by providing the following options: -- `verbosity` - the minimum level of the message to be logged. The default value is `info`. Possible values are: +- `verbosity` - the minimum level of the message to be logged. The default value is `info`. Available values are: - `emergency` - `alert` - `critical` @@ -65,72 +54,90 @@ The default configuration is already provided, but you can customize it by provi - `debug` - `includeStackTrace` - a boolean value that determines if the stack trace should be included in the log message. The default value is `true`. -To provide the configuration for the Logger, you need to update the SDK config with the Logger module configuration by providing an object with options to the `buildModule` function, e.g.: +To provide the configuration for the Logger, you need to update the following file: -```ts - // ... - logger: buildModule(loggerModule, { - verbosity: 'debug', - includeStackTrace: false, - }), -``` +::tabs{:titles='["Next.js", "Nuxt"]' class="mt-8"} -### Custom handler +#tab-1 -There might a certain use case where you want to customize the way the Logger logs messages e.g. you want to change a log provider to a different one. -Then you can provide your own custom handler for the Logger. The handler must implement the `LoggerInterface` interface provided in the section [types](#type). +Navigate to the `logger.ts` file in the `sdk` directory and add the configuration object to the `createLogger` function, e.g.: -::warning -Keep in mind that if you provide a custom handler, it will override the built-in logging functions and the other options passed to the Logger configuration will be ignored. -:: +```ts +// apps/storefront-unified-nextjs/sdk/logger.ts -## Usage +import { createLogger } from '@vue-storefront/next'; -You can use the Logger in the same way as you would use any other SDK modules: +export const logger = createLogger(); // [!code --] +export const logger = createLogger({ // [!code ++] + verbosity: 'debug', // [!code ++] + includeStackTrace: false, // [!code ++] +}); // [!code ++] +``` -::tabs{:titles='["Next.js", "Nuxt"]' class="mt-8"} +#tab-2 -#tab-1 +Navigate to the `nuxt.config.ts` file and add the configuration object to the `@vue-storefront/nuxt` module, e.g.: +```ts +// apps/storefront-unified-nuxt/nuxt.config.ts -::code-group +export default defineNuxtConfig({ + // ... + modules: [ + // ... + '@vue-storefront/nuxt', // [!code --] + ['@vue-storefront/nuxt', { // [!code ++] + logger: { // [!code ++] + verbosity: 'debug', // [!code ++] + includeStackTrace: false, // [!code ++] + } // [!code ++] + }], // [!code ++] + // ... + ], +}); -```tsx [Server Side] -import { getSdk } from "@/sdk"; +``` +:: -function ServerComponent() { - const sdk = getSdk(); +## Usage - sdk.logger.info("Example server side log"); +You can use the Logger in similarly as you would use the common `console` object: - // ... -} -``` +::tabs{:titles='["Next.js", "Nuxt"]' class="mt-8"} -```tsx [Client Side] -import { useSdk } from "@/sdk/alokai-context"; +#tab-1 -function ClientComponent() { - const sdk = useSdk(); +No matter if this is a client or server side code, you can import the Logger and use it to log messages the same way, e.g.: +```tsx +import { logger } from "@/sdk/logger"; - useEffect(() => { - sdk.logger.info("Example client side log"); - }, []); +function SomeComponent() { + logger.info("Example server side log"); // ... } ``` -:: #tab-2 ```vue // component