When expanding log record, preserve newlines (#282)

Author: frankdekker

dev/config/config.yml

@@ -54,6 +54,7 @@ monolog:
     error:
       type: stream
       path: "%kernel.logs_dir%/error.log"
+      include_stacktraces: true
       level: error
       channels: [ "!event", "!deprecation" ]
     deprecation:

frontend/src/components/LogRecord.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import JsonData from '@/components/json/JsonData.vue';
+import {nl2br, escapeHtml} from '@/services/Strings.ts';
 import type LogRecord from '@/models/LogRecord';
 import {isEmptyJson, prettyFormatJson} from '@/services/JsonFormatter';
 import {ref} from 'vue';
@@ -23,7 +24,10 @@ function click(value: string) {
             <span class="pe-2 text-secondary">{{ logRecord.datetime }}</span>
             <span class="text-primary pe-2" v-if="logRecord.channel.length > 0">{{ logRecord.channel }}</span>
             <span :class="['pe-2', logRecord.level_class ]">{{ logRecord.level_name }}</span>
-            <span>{{ logRecord.text }}</span>
+
+            <!-- log message -->
+            <span v-if="!expanded" v-text="logRecord.text.substring(0, 500)"></span>
+            <span v-if="expanded" v-html="nl2br(escapeHtml(logRecord.text))"></span>
         </div>
         <div class="border-top pt-2 ps-2 mb-2 position-relative" v-bind:class="{'d-block': expanded, 'd-none': !expanded}" v-if="expanded">
             <button class="btn btn-outline-secondary slv-btn-raw" @click="styled = !styled">{{ styled ? 'raw' : 'styled' }}</button>

frontend/src/components/json/JsonScalarValue.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import Numbers from '@/services/Numbers.ts';
-import Strings from '@/services/Strings.ts';
+import {trim} from '@/services/Strings.ts';
 
 const props = defineProps<{ path: string, data: unknown }>();
 const emit  = defineEmits(['click']);
 
 function click(value: unknown) {
-    emit('click', `${Strings.trim(props.path, '.')}="${value}"`);
+    emit('click', `${trim(props.path, '.')}="${value}"`);
 }
 </script>
 

frontend/src/services/Strings.ts

@@ -1,13 +1,21 @@
-export default class Strings {
+export function trim(str: string, toRemove: string): string {
+    while (str.startsWith(toRemove)) {
+        str = str.substring(toRemove.length);
+    }
+    while (str.endsWith(toRemove)) {
+        str = str.substring(0, str.length - toRemove.length);
+    }
+
+    return str;
+}
 
-    public static trim(str: string, toRemove: string): string {
-        while (str.startsWith(toRemove)) {
-            str = str.substring(toRemove.length);
-        }
-        while (str.endsWith(toRemove)) {
-            str = str.substring(0, str.length - toRemove.length);
-        }
+export function nl2br(str: string): string {
+    return str.replace(/\n/g, '<br/>');
+}
 
-        return str;
-    }
+export function escapeHtml(str: string): string {
+    return str
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
 }

src/Resources/public/.vite/manifest.json

@@ -1,12 +1,12 @@
 {
   "src/main.ts": {
-    "file": "assets/main-CF_yt7iQ.js",
+    "file": "assets/main-C_BrajeJ.js",
     "name": "main",
     "src": "src/main.ts",
     "isEntry": true
   },
   "style.css": {
-    "file": "assets/style-CcMiSAP_.css",
+    "file": "assets/style-J8MU6gDa.css",
     "src": "style.css"
   }
 }