feat: read nginx access logs and error logs

Author: 0xJacky

frontend/src/routes/index.ts

@@ -91,10 +91,18 @@ export const routes = [
             {
                 path: 'nginx_log',
                 name: () => $gettext('Nginx Log'),
-                component: () => import('@/views/nginx_log/NginxLog.vue'),
                 meta: {
                     icon: FileTextOutlined
-                }
+                },
+                children: [{
+                    path: 'access',
+                    name: () => $gettext('Access Logs'),
+                    component: () => import('@/views/nginx_log/NginxLog.vue'),
+                }, {
+                    path: 'error',
+                    name: () => $gettext('Error Logs'),
+                    component: () => import('@/views/nginx_log/NginxLog.vue'),
+                }]
             },
             {
                 path: 'about',

frontend/src/views/nginx_log/NginxLog.vue

@@ -1,25 +1,29 @@
 <script setup lang="ts">
 import {useGettext} from 'vue3-gettext'
 import ws from '@/lib/websocket'
-import {nextTick, onMounted, reactive, ref, watch} from 'vue'
+import {computed, nextTick, onMounted, onUnmounted, reactive, ref, watch} from 'vue'
 import ReconnectingWebSocket from 'reconnecting-websocket'
+import {useRoute} from 'vue-router'
 
 const {$gettext} = useGettext()
 
 const logContainer = ref(null)
 
 let websocket: ReconnectingWebSocket | WebSocket
+const route = useRoute()
+
+function logType() {
+    return route.path.indexOf('access') > 0 ? 'access' : 'error'
+}
 
 const control = reactive({
-    fetch: 'new'
+    fetch: 'new',
+    type: logType()
 })
 
 function openWs() {
     websocket = ws('/api/nginx_log')
     websocket.send(JSON.stringify(control))
-    websocket.onopen = () => {
-        (logContainer.value as any as Element).innerHTML = ''
-    }
     websocket.onmessage = (m: any) => {
         const para = document.createElement('p')
         para.appendChild(document.createTextNode(m.data.trim()));
@@ -42,12 +46,23 @@ const auto_refresh = ref(true)
 
 watch(auto_refresh, (value) => {
     if (value) {
-        openWs()
+        openWs();
+        (logContainer.value as any as Element).innerHTML = ''
+
     } else {
         websocket.close()
     }
 })
 
+watch(route, () => {
+    control.type = logType();
+    (logContainer.value as any as Element).innerHTML = ''
+
+    nextTick(() => {
+        websocket.send(JSON.stringify(control))
+    })
+})
+
 watch(control, () => {
     (logContainer.value as any as Element).innerHTML = ''
     auto_refresh.value = true
@@ -57,6 +72,10 @@ watch(control, () => {
     })
 })
 
+onUnmounted(() => {
+    websocket.close()
+})
+
 </script>
 
 <template>

server/api/nginx_log.go

@@ -14,6 +14,7 @@ import (
 
 type controlStruct struct {
 	Fetch string `json:"fetch"`
+	Type  string `json:"type"`
 }
 
 func tailNginxLog(ws *websocket.Conn, controlChan chan controlStruct, errChan chan error) {
@@ -33,10 +34,15 @@ func tailNginxLog(ws *websocket.Conn, controlChan chan controlStruct, errChan ch
 			seek.Whence = io.SeekEnd
 		}
 
+		logPath := settings.NginxLogSettings.AccessLogPath
+
+		if control.Type == "error" {
+			logPath = settings.NginxLogSettings.ErrorLogPath
+		}
+
 		// Create a tail
-		t, err := tail.TailFile(
-			settings.NginxLogSettings.AccessLogPath, tail.Config{Follow: true,
-				ReOpen: true, Location: &seek})
+		t, err := tail.TailFile(logPath, tail.Config{Follow: true,
+			ReOpen: true, Location: &seek})
 
 		if err != nil {
 			errChan <- errors.Wrap(err, "error NginxAccessLog Tail")