When expanding log record, preserve newlines

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 Strings 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="Strings.nl2br(Strings.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/services/Strings.ts

@@ -10,4 +10,15 @@ export default class Strings {
 
         return str;
     }
+
+    public static nl2br(str: string): string {
+        return str.replace(/\n/g, '<br/>');
+    }
+
+    public static escapeHtml(str: string): string {
+        return str
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+    }
 }