Show Fatal Logs in Web UI (#1648)

src_assets/common/assets/web/index.html

@@ -1,6 +1,16 @@
 <div id="content" class="container">
   <h1 class="my-4">Hello, Sunshine!</h1>
   <p>Sunshine is a self-hosted game stream host for Moonlight.</p>
+  <div class="alert alert-danger" v-if="fancyLogs.find(x => x.level === 'Fatal')">
+    <div style="line-height: 32px;">
+      <i class="fas fa-circle-exclamation" style="font-size: 32px;margin-right: 0.25em;"></i>
+      <b>Attention!</b> Sunshine detected these errors during startup. These errors <b>MUST</b> be fixed before using
+      Sunshine.<br>
+    </div>
+    <ul>
+      <li v-for="v in fancyLogs.filter(x => x.level === 'Fatal')">{{v.value}}</li>
+    </ul>
+  </div>
   <!--Version-->
   <div class="card p-2 my-4">
     <div class="card-body" v-if="version">
@@ -21,7 +31,8 @@
         <div class="alert alert-warning">
           <div class="d-flex justify-content-between">
             <div class="my-2">A new <b>Nightly</b> Version is Available!</div>
-            <a class="btn btn-success m-1" href="https://github.com/LizardByte/Sunshine/releases/nightly-dev" target="_blank">Download</a>
+            <a class="btn btn-success m-1" href="https://github.com/LizardByte/Sunshine/releases/nightly-dev"
+              target="_blank">Download</a>
           </div>
           <pre><b>{{nightlyData.head_sha}}</b></pre>
           <pre>{{nightlyData.display_title}}</pre>
@@ -83,6 +94,7 @@
         githubVersion: null,
         nightlyData: null,
         loading: true,
+        logs: null,
       }
     },
     async created() {
@@ -94,6 +106,11 @@
         }
       } catch (e) {
       }
+      try {
+        this.logs = (await fetch("/api/logs").then(r => r.text()))
+      } catch (e) {
+        console.error(e);
+      }
       this.loading = false;
     },
     computed: {
@@ -134,6 +151,17 @@
       },
       buildVersionIsStable() {
         return this.version?.split(".").length === 3
+      },
+      /** Parse the text errors, calculating the text, the timestamp and the level */
+      fancyLogs() {
+        if (!this.logs) return [];
+        let regex = /(\[\d{4}:\d{2}:\d{2}:\d{2}:\d{2}:\d{2}\]):\s/g;
+        let rawLogLines = (this.logs.split(regex)).splice(1);
+        let logLines = []
+        for (let i = 0; i < rawLogLines.length; i += 2) {
+          logLines.push({ timestamp: rawLogLines[i], level: rawLogLines[i + 1].split(":")[0], value: rawLogLines[i + 1] });
+        }
+        return logLines;
       }
     }
   });