fix: replace console.error with logger.errors (#9044)

## Problem
When `PayloadRequest` objects are logged using `console.log`, it creates
unstructured, multiline entries in logging services like DataDog and
Sentry. This circumvents the structured logging approach used throughout
the rest of the codebase.

## Solution
Replace `console.x` calls with the structured logging system when
logging `payload.logger.x` objects. This ensures consistent log
formatting and better integration with monitoring tools.

## Changes
- Replaced instances of `console.log` with structured logging methods
only in `@payloadcms/next`
- Maintains logging consistency across the codebase
- Improves log readability in DataDog, Sentry, and other monitoring
services

## First

<img width="914" alt="Screenshot 2024-11-06 at 09 53 44"
src="https://github.com/user-attachments/assets/019b6f4b-40ed-4e54-a92a-8d1b50baa303">

## Then

<img width="933" alt="Screenshot 2024-11-06 at 00 50 29"
src="https://github.com/user-attachments/assets/0a339db4-d706-4ff9-ba8c-80445bbef5d0">

packages/next/src/routes/rest/og/index.tsx

@@ -53,7 +53,7 @@ export const generateOGImage = async ({ req }: { req: PayloadRequest }) => {
       // Or better yet, use a CDN like Google Fonts if ever supported
       fontData = fs.readFile(path.join(dirname, 'roboto-regular.woff'))
     } catch (e) {
-      console.error(`Error reading font file or not readable: ${e.message}`) // eslint-disable-line no-console
+      req.payload.logger.error(`Error reading font file or not readable: ${e.message}`)
     }
 
     const fontFamily = 'Roboto, sans-serif'
@@ -86,7 +86,7 @@ export const generateOGImage = async ({ req }: { req: PayloadRequest }) => {
       },
     )
   } catch (e: any) {
-    console.error(`${e.message}`) // eslint-disable-line no-console
+    req.payload.logger.error(`Error generating Open Graph image: ${e.message}`)
     return NextResponse.json({ error: `Internal Server Error: ${e.message}` }, { status: 500 })
   }
 }

packages/next/src/views/Document/getDocumentData.tsx

@@ -47,7 +47,7 @@ export const getDocumentData = async (args: {
       formState,
     }
   } catch (error) {
-    console.error('Error getting document data', error) // eslint-disable-line no-console
+    req.payload.logger.error({ err: error, msg: 'Error getting document data' })
     return {
       data: null,
       formState: {

packages/next/src/views/Document/getDocumentPermissions.tsx

@@ -60,7 +60,7 @@ export const getDocumentPermissions = async (args: {
         }).then(({ update }) => update?.permission)
       }
     } catch (error) {
-      console.error(error) // eslint-disable-line no-console
+      req.payload.logger.error(error)
     }
   }
 
@@ -87,7 +87,7 @@ export const getDocumentPermissions = async (args: {
         }).then(({ update }) => update?.permission)
       }
     } catch (error) {
-      console.error(error) // eslint-disable-line no-console
+      req.payload.logger.error(error)
     }
   }
 

packages/next/src/views/Versions/getLatestVersion.ts

@@ -61,7 +61,7 @@ export async function getLatestVersion(args: Args): Promise<ReturnType> {
       updatedAt: response.docs[0].updatedAt,
     }
   } catch (e) {
-    console.error(e)
+    payload.logger.error(e)
     return null
   }
 }

packages/next/src/views/Versions/index.tsx

@@ -96,7 +96,7 @@ export const VersionsView: PayloadServerReactComponent<EditViewComponent> = asyn
         })
       }
     } catch (error) {
-      console.error(error) // eslint-disable-line no-console
+      payload.logger.error(error)
     }
   }
 
@@ -139,7 +139,7 @@ export const VersionsView: PayloadServerReactComponent<EditViewComponent> = asyn
         })
       }
     } catch (error) {
-      console.error(error) // eslint-disable-line no-console
+      payload.logger.error(error)
     }
 
     if (!versionsData) {