docs: update formatters docs on logging and nextjs libraries (#252)

Author: gabrielelpidio

guides/javascript.mdx

@@ -236,15 +236,18 @@ The `@axiomhq/logging` library includes the following logging levels:
 
 #### Formatters
 
-Formatters are used to change the fields of a log before sending it to a transport. For example:
+Formatters are used to change the content of a log before sending it to a transport. For example:
 
 ```ts
-import { Logger } from "@axiomhq/logging";
-
-const myCustomFormatter = (fields: Record<string, unknown>) => {
-  const upperCaseKeys = Object.fromEntries(
-    Object.entries(fields).map(([key, value]) => [key.toUpperCase(), value])
-  );
+import { Logger, LogEvent } from "@axiomhq/logging";
+
+const myCustomFormatter = (event: LogEvent) => {
+  const upperCaseKeys = {
+    ...event,
+    fields: Object.fromEntries(
+      Object.entries(event.fields).map(([key, value]) => [key.toUpperCase(), value])
+    ),
+  };
 
   return upperCaseKeys;
 };

send-data/nextjs.mdx

@@ -300,13 +300,13 @@ The @axiomhq/nextjs library is part of the Axiom JavaScript SDK, an open-source
     ```ts lib/axiom/server.ts [expandable]
     import axiomClient from '@/lib/axiom/axiom';
     import { Logger, AxiomJSTransport } from '@axiomhq/logging';
-    import { createAxiomRouteHandler, serverContextFieldsFormatter } from '@axiomhq/nextjs';
+    import { createAxiomRouteHandler, nextJsFormatters } from '@axiomhq/nextjs';
 
     export const logger = new Logger({
       transports: [
         new AxiomJSTransport({ axiom: axiomClient, dataset: process.env.NEXT_PUBLIC_AXIOM_DATASET! }),
       ],
-      formatters: [serverContextFieldsFormatter],
+      formatters: nextJsFormatters,
     });
 
     export const withAxiom = createAxiomRouteHandler(logger);
@@ -328,11 +328,13 @@ The @axiomhq/nextjs library is part of the Axiom JavaScript SDK, an open-source
     import axiomClient from '@/lib/axiom/axiom';
     import { Logger, AxiomJSTransport } from '@axiomhq/logging';
     import { createUseLogger, createWebVitalsComponent } from '@axiomhq/react';
+    import { nextJsFormatters } from '@axiomhq/nextjs/client';
 
     export const logger = new Logger({
       transports: [
         new AxiomJSTransport({ axiom: axiomClient, dataset: process.env.NEXT_PUBLIC_AXIOM_DATASET! }),
       ],
+      formatters: nextJsFormatters,
     });
 
     const useLogger = createUseLogger(logger);
@@ -593,7 +595,7 @@ import { Logger, AxiomJSTransport } from '@axiomhq/logging';
 import { 
   createAxiomRouteHandler, 
   getLogLevelFromStatusCode, 
-  serverContextFieldsFormatter, 
+  nextJsFormatters, 
   transformRouteHandlerErrorResult, 
   transformRouteHandlerSuccessResult 
 } from '@axiomhq/nextjs';
@@ -636,7 +638,7 @@ import { Logger, AxiomJSTransport } from '@axiomhq/logging';
 import { 
   createAxiomRouteHandler, 
   getLogLevelFromStatusCode, 
-  serverContextFieldsFormatter, 
+  nextJsFormatters, 
   transformRouteHandlerErrorResult, 
   transformRouteHandlerSuccessResult 
 } from '@axiomhq/nextjs';
@@ -727,7 +729,7 @@ To customize this behavior, provide a custom `logLevelByStatusCode()` function w
 import { Logger, AxiomJSTransport, LogLevel } from '@axiomhq/logging';
 import {
   createAxiomRouteHandler,
-  serverContextFieldsFormatter,
+  nextJsFormatters,
   transformRouteHandlerErrorResult,
 } from '@axiomhq/nextjs';
 
@@ -764,7 +766,7 @@ Internally, the status code gets captured in the `transformErrorResult()` functi
 import { Logger, AxiomJSTransport, LogLevel } from '@axiomhq/logging';
 import {
   createAxiomRouteHandler,
-  serverContextFieldsFormatter,
+  nextJsFormatters,
   transformRouteHandlerErrorResult,
 } from '@axiomhq/nextjs';
 import { isRedirectError } from 'next/dist/client/components/redirect-error';
@@ -776,7 +778,7 @@ export const logger = new Logger({
   transports: [
     new AxiomJSTransport({ axiom: axiomClient, dataset: process.env.NEXT_PUBLIC_AXIOM_DATASET! }),
   ],
-  formatters: [serverContextFieldsFormatter],
+  formatters: nextJsFormatters,
 });
 
 export const getNextErrorStatusCode = (error: Error & { digest?: string }) => {
@@ -821,7 +823,7 @@ export const withAxiom = createAxiomRouteHandler(logger, {
 
 ### Server execution context
 
-The `serverContextFieldsFormatter` function adds the server execution context to the logs, this is useful to have information about the scope where the logs were generated.
+The `serverContextFieldsFormatter` function included in the `nextJsFormatters` adds the server execution context to the logs, this is useful to have information about the scope where the logs were generated.
 
 By default, the `createAxiomRouteHandler` function adds a `request_id` field to the logs using this server context and the server context fields formatter.
 
@@ -833,7 +835,7 @@ The fields in the store are added to the `fields` object of the log report. For
 
 ```ts [expandable]
 import { Logger, AxiomJSTransport } from '@axiomhq/logging';
-import { createAxiomRouteHandler, serverContextFieldsFormatter } from '@axiomhq/nextjs';
+import { createAxiomRouteHandler, nextJsFormatters } from '@axiomhq/nextjs';
 import { NextRequest } from 'next/server';
 
 import axiomClient from '@/lib/axiom/axiom';
@@ -842,7 +844,7 @@ export const logger = new Logger({
   transports: [
     new AxiomJSTransport({ axiom: axiomClient, dataset: process.env.NEXT_PUBLIC_AXIOM_DATASET! }),
   ],
-  formatters: [serverContextFieldsFormatter],
+  formatters: nextJsFormatters,
 });
 
 export const withAxiom = createAxiomRouteHandler(logger, {