Logging documentation (#1806)

* smaller adjustments

* talk about useLogger

* too much yous

* colon

Author: enisdenjo

website/src/pages/v3/features/debugging.mdx

@@ -0,0 +1,79 @@
+# Logging and debugging
+
+## Logging
+
+The default logger in Yoga is the [JavaScript console](https://developer.mozilla.org/en-US/docs/Web/API/console) and its respective methods ([debug](https://developer.mozilla.org/en-US/docs/Web/API/console/debug) _when `DEBUG=1` in environment_, [info](https://developer.mozilla.org/en-US/docs/Web/API/console/info), [warn](https://developer.mozilla.org/en-US/docs/Web/API/console/warn) and [error](https://developer.mozilla.org/en-US/docs/Web/API/console/error)) matching the log level.
+
+You can of course provide your own logger for piping to your favourite logging service/utility:
+
+```ts
+import { createYoga } from 'graphql-yoga'
+import { createServer } from 'node:http'
+import { schema } from './my-schema'
+import { logger } from './my-logger'
+
+const yoga = createYoga({
+  schema,
+  logging: {
+    debug(...args) {
+      // will only get triggered if DEBUG=1 in environment
+      logger.debug(...args)
+    },
+    info(...args) {
+      logger.info(...args)
+    },
+    warn(...args) {
+      logger.warn(...args)
+    },
+    error(...args) {
+      logger.error(...args)
+    },
+  },
+})
+
+const server = createServer(yoga)
+
+server.listen(4000, () => {
+  console.info('Server is running on http://localhost:4000/graphql')
+})
+```
+
+Further hook into the logging system by leveraging [envelop](https://www.envelop.dev/plugins/use-logger)'s [`useLogger`](https://www.envelop.dev/plugins/use-logger) plugin:
+
+```ts
+import { createYoga, useLogger } from 'graphql-yoga'
+import { createServer } from 'node:http'
+import { schema } from './my-schema'
+import { logger } from './my-logger'
+
+const yoga = createYoga({
+  schema,
+  plugins: [
+    useLogger({
+      logFn: (eventName, args) => {
+        // Event could be execute-start / execute-end / subscribe-start / subscribe-end / etc.
+        // args will include the arguments passed to execute/subscribe (in case of "start" event) and additional result in case of "end" event.
+        logger.debug(eventName, ...args)
+      },
+    }),
+  ],
+})
+
+const server = createServer(yoga)
+
+server.listen(4000, () => {
+  console.info('Server is running on http://localhost:4000/graphql')
+})
+```
+
+## Debugging
+
+Note that Yoga can run in debug when having `DEBUG=1` in the environment. Doing so will increase verbosity of the logger delivering additional information including:
+
+- Processing of GraphQL parameters
+- Parsing of GraphQL parameters
+- Execution or subscription start
+- Received GraphQL operation variables
+- Execution or subscription end
+- [GraphiQL](https://github.com/graphql/graphiql) rendering
+- Healthcheck and readiness checks