fix(backend): logs handling

package.json

@@ -9,8 +9,12 @@
   "dependencies": {
     "@platformatic/composer": "^2.52.0",
     "@platformatic/runtime": "^2.52.0",
+    "split2": "4.2.0",
     "wattpm": "^2.52.0"
   },
+  "devDependencies": {
+    "@types/split2": "4.2.3"
+  },
   "workspaces": [
     "web/*",
     "external/*"

web/backend/routes/root.ts

@@ -1,6 +1,16 @@
 import { FastifyInstance } from 'fastify'
 import { JsonSchemaToTsProvider } from '@fastify/type-provider-json-schema-to-ts'
 import { RuntimeApiClient } from '@platformatic/control'
+import split2 from 'split2'
+import { pipeline } from 'node:stream/promises'
+
+export type Log = {
+  level: number,
+  time: number,
+  pid: number,
+  hostname: string,
+  msg: string
+}
 
 export default async function (fastify: FastifyInstance) {
   const typedFastify = fastify.withTypeProvider<JsonSchemaToTsProvider>()
@@ -56,7 +66,33 @@ export default async function (fastify: FastifyInstance) {
     schema: {
       params: { type: 'object', properties: { pid: { type: 'number' } }, required: ['pid'] }
     }
-  }, async (request) => api.getRuntimeAllLogsStream(request.params.pid))
+  }, async (request) => {
+    const readable = await api.getRuntimeAllLogsStream(request.params.pid)
+
+    const MAX_LOGS = 1000
+    const result: Log[] = []
+
+    await pipeline(
+      readable,
+      split2(),
+      async function * (source) {
+        for await (const line of source) {
+          try {
+            const parsedObject = JSON.parse(line)
+            result.push(parsedObject)
+
+            if (result.length > MAX_LOGS) {
+              result.shift()
+            }
+          } catch (err) {
+            fastify.log.warn({ line }, 'Invalid JSON line found:')
+          }
+        }
+      }
+    )
+
+    return result
+  })
 
   typedFastify.get('/runtimes/:pid/openapi/:serviceId', {
     schema: {

web/backend/test/routes/root.test.ts

@@ -1,6 +1,7 @@
 import test from 'node:test'
 import assert from 'node:assert'
 import { getServer, startWatt } from '../helper'
+import type { Log } from '../../routes/root'
 
 const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
 
@@ -112,11 +113,17 @@ test('runtime is running', async (t) => {
   })
   assert.strictEqual(logs.statusCode, 200)
 
-  const [starting, listening, started, platformatic] = logs.body.trim().split('\n').filter(val => !val.includes('Loading envfile'))
-  assert.ok(starting.includes('Starting the service \\"backend\\"'))
-  assert.ok(listening.includes('Started the service \\"backend\\"'))
-  assert.ok(started.includes('Starting the service \\"frontend\\"'))
-  assert.ok(platformatic.includes('Started the service \\"frontend\\"'))
+  const result = logs.json<Log[]>()
+  assert.ok(result.some(({ msg }) => msg.includes('Starting the service')))
+  assert.ok(result.some(({ msg }) => msg.includes('Started the service')))
+  assert.ok(result.some(({ msg }) => msg.includes('Server listening at')))
+  assert.ok(result.some(({ msg }) => msg.includes('Platformatic is now listening')))
+
+  const [{ level, time, pid, hostname }] = result
+  assert.ok(typeof level, 'number')
+  assert.ok(typeof time, 'number')
+  assert.ok(typeof pid, 'number')
+  assert.ok(typeof hostname, 'string')
 })
 
 test('runtime restart', async (t) => {

web/frontend/src/api.js

@@ -36,8 +36,8 @@ export const getServices = async (id) => {
 
 export const getLogs = async (id) => {
   const result = await fetch(`${host}/runtimes/${id}/logs`)
-  const logs = await result.text()
-  return logs.trim().split('\n')
+  const data = await result.json()
+  return data
 }
 
 export const getApiMetricsPod = async (id) => {

web/frontend/src/components/application-logs/AppLogs.jsx

@@ -92,10 +92,10 @@ const AppLogs = React.forwardRef(({ filteredServices }, ref) => {
       if (filterLogsByLevel || filteredServices.length >= 0) {
         let founds = [...applicationLogs]
         if (filterLogsByLevel) {
-          founds = founds.filter(log => JSON.parse(log).level >= filterLogsByLevel)
+          founds = founds.filter(log => log.level >= filterLogsByLevel)
         }
         if (filteredServices.length >= 0) {
-          founds = founds.filter(log => filteredServices.includes(JSON.parse(log).name))
+          founds = founds.filter(log => filteredServices.includes(log.name))
         }
         setFilteredLogs(founds)
       } else {

web/frontend/src/components/application-logs/Log.jsx

@@ -10,7 +10,7 @@ import tooltipStyles from '~/styles/TooltipStyles.module.css'
 function Log ({ log, onClickArrow }) {
   const [displayJson, setDisplayJson] = useState(false)
   const [logContainerClassName, setLogContainerClassName] = useState(normalClassName())
-  const { level, time, pid, name, msg, reqId, req, hostname, responseTime, ...rest } = JSON.parse(log)
+  const { level, time, pid, name, msg, reqId, req, hostname, responseTime, ...rest } = log
   const levelDisplayed = getLevel(level)
   let msgClassName = `${styles.msg} `
   msgClassName += styles[`text${level}`]