docs(tfal-56): next/nuxt logger implementation

Author: dawid-ziobro

docs/content/4.sdk/2.getting-started/4.logger.md

@@ -0,0 +1,171 @@
+# Logger
+
+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.
+
+## 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.
+
+In order to install the Logger, you need to update following packages to at least the following versions:
+* `@vue-storefront/sdk` to `3.3.0`
+* `@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.
+
+::tabs{:titles='["Next.js", "Nuxt"]' class="mt-8"}
+
+#tab-1
+
+```ts
+// apps/storefront-unified-nextjs/sdk/config.ts
+
+// ...
+export function getSdkConfig() {
+  return defineSdkConfig(({ buildModule, config, getRequestHeaders, middlewareModule }) => ({ // [!code --]
+  return defineSdkConfig(({ buildModule, config, getRequestHeaders, loggerModule, middlewareModule }) => ({ // [!code ++]
+    logger: buildModule(loggerModule), // [!code ++]
+    // ...
+  }));
+}
+```
+
+#tab-2
+
+```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 ++]
+  // ...
+}));
+```
+::
+
+
+## Configuration
+
+Available options:
+* `level` - the minimum level of the message to be logged. The default value is `info`. Possible values are:
+  * `emergency` 
+  * `alert`
+  * `critical`
+  * `error`
+  * `warning`
+  * `notice`
+  * `info`
+  * `debug`
+* `includeStackTrace` - a boolean value that determines if the stack trace should be included in the log message. The default value is `true`.
+* `handler` - a custom handler that will be called when the message is logged.
+
+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, f.e:
+```ts
+  // ...
+  logger: buildModule(loggerModule, {
+    level: 'debug',
+    includeStackTrace: false,
+    handler: myCustomHandler,
+  }),
+```
+
+### Custom handler
+There might a certain use case where you want to customize the way the Logger logs messages f.e. 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).
+
+::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.
+::
+
+## Usage
+
+You can use the Logger in the same way as you would use any other SDK modules:
+
+::tabs{:titles='["Next.js", "Nuxt"]' class="mt-8"}
+
+#tab-1
+
+::code-group
+
+```tsx [Server Side]
+import { getSdk } from '@/sdk';
+
+function ServerComponent() {
+  const sdk = getSdk();
+
+  sdk.logger.info('Example server side log');
+
+  // ...
+}
+```
+
+```tsx [Client Side]
+import { useSdk } from '@/sdk/alokai-context';
+
+function ClientComponent() {
+  const sdk = useSdk();
+
+  useEffect(() => {
+    sdk.logger.info('Example client side log');
+  }, []);
+  
+  // ...
+}
+```
+
+::
+
+#tab-2
+
+```vue
+// component
+<script setup>
+useSdk().logger.info('Example log');
+<script>
+```
+::
+
+Now instead of using `console.log` you can use the Logger to log messages at different levels.
+
+## Type
+
+```ts
+type LogData = unknown;
+type Metadata = Record<string, unknown>;
+type LogLevel =
+  | "emergency"
+  | "alert"
+  | "critical"
+  | "error"
+  | "warning"
+  | "notice"
+  | "info"
+  | "debug";
+
+interface LoggerInterface {
+  emergency(logData: LogData, metadata?: Metadata): void;
+  alert(logData: LogData, metadata?: Metadata): void;
+  critical(logData: LogData, metadata?: Metadata): void;
+  error(logData: LogData, metadata?: Metadata): void;
+  warning(logData: LogData, metadata?: Metadata): void;
+  notice(logData: LogData, metadata?: Metadata): void;
+  info(logData: LogData, metadata?: Metadata): void;
+  debug(logData: LogData, metadata?: Metadata): void;
+}
+
+type LoggerModuleConfig = Partial<{
+  level: LogLevel;
+  includeStackTrace: boolean;
+  handler: LoggerInterface;
+  [key: string]: any;
+}>;
+
+```