feat(logging): Implement global recovery middleware with Logrus for enhanced error handling
This commit is contained in:
Habib Fatkhul Rohman
parent
fc43112d19
commit
0a5eb4d766
28
cmd/main.go
28
cmd/main.go
|
|
@ -4,21 +4,23 @@ import (
|
|||
"io"
|
||||
"log"
|
||||
"os"
|
||||
"runtime/debug"
|
||||
|
||||
"github.com/Caknoooo/go-gin-clean-starter/config"
|
||||
"github.com/Caknoooo/go-gin-clean-starter/docs"
|
||||
"github.com/Caknoooo/go-gin-clean-starter/middlewares"
|
||||
"github.com/Caknoooo/go-gin-clean-starter/modules/auth"
|
||||
"github.com/Caknoooo/go-gin-clean-starter/modules/client"
|
||||
maintenancegroup "github.com/Caknoooo/go-gin-clean-starter/modules/maintenance_group"
|
||||
"github.com/Caknoooo/go-gin-clean-starter/modules/menu"
|
||||
"github.com/Caknoooo/go-gin-clean-starter/modules/monitoring"
|
||||
"github.com/Caknoooo/go-gin-clean-starter/modules/permissions"
|
||||
"github.com/Caknoooo/go-gin-clean-starter/modules/product"
|
||||
"github.com/Caknoooo/go-gin-clean-starter/modules/role"
|
||||
"github.com/sirupsen/logrus"
|
||||
swaggerFiles "github.com/swaggo/files"
|
||||
ginSwagger "github.com/swaggo/gin-swagger"
|
||||
|
||||
// "github.com/Caknoooo/go-gin-clean-starter/modules/role"
|
||||
|
||||
"github.com/Caknoooo/go-gin-clean-starter/modules/logs"
|
||||
"github.com/Caknoooo/go-gin-clean-starter/modules/user"
|
||||
"github.com/Caknoooo/go-gin-clean-starter/providers"
|
||||
|
|
@ -85,11 +87,25 @@ func run(server *gin.Engine) {
|
|||
// @externalDocs.description OpenAPI
|
||||
// @externalDocs.url https://swagger.io/resources/open-api/
|
||||
func main() {
|
||||
|
||||
logger := config.SetupLoggerLogrus()
|
||||
|
||||
// 🔹 Tangkap panic global di luar Gin (worker, cron, dsb.)
|
||||
defer func() {
|
||||
if r := recover(); r != nil {
|
||||
logger.WithFields(logrus.Fields{
|
||||
"panic": r,
|
||||
"stack": string(debug.Stack()),
|
||||
}).Error("Uncaught panic at main")
|
||||
}
|
||||
}()
|
||||
|
||||
var (
|
||||
injector = do.New()
|
||||
)
|
||||
|
||||
providers.RegisterDependencies(injector)
|
||||
|
||||
// set Swagger info (opsional)
|
||||
docs.SwaggerInfo.Title = "WMS Wareify API"
|
||||
docs.SwaggerInfo.Version = "1.0"
|
||||
|
|
@ -117,15 +133,15 @@ func main() {
|
|||
|
||||
server.RedirectTrailingSlash = false
|
||||
|
||||
// Enable CORS middleware
|
||||
// Enable middleware
|
||||
server.Use(middlewares.CORSMiddleware())
|
||||
// server.Use(gin.Recovery(), gin.Logger(), middlewares.CORSMiddleware())
|
||||
server.Use(middlewares.GinRecoveryWithLogrus(logger))
|
||||
|
||||
// Register module routes
|
||||
monitoring.RegisterRoutes(server)
|
||||
|
||||
user.RegisterRoutes(server, injector)
|
||||
auth.RegisterRoutes(server, injector)
|
||||
// tenant.RegisterRoutes(server, injector)
|
||||
// product.RegisterRoutes(server, injector)
|
||||
role.RegisterRoutes(server, injector)
|
||||
logs.RegisterRoutes(server, injector)
|
||||
menu.RegisterRoutes(server, injector)
|
||||
|
|
|
|||
|
|
@ -92,3 +92,8 @@ func (f *GroupedFieldsFormatter) Format(entry *logrus.Entry) ([]byte, error) {
|
|||
}
|
||||
return append(serialized, '\n'), nil
|
||||
}
|
||||
|
||||
// 🔹 Arahkan log bawaan Go ke logrus (biar library lain ikut nulis ke file)
|
||||
func RedirectDefaultLogger(logger *logrus.Logger) {
|
||||
log.SetOutput(logger.Writer())
|
||||
}
|
||||
|
|
|
|||
627
logs.html
627
logs.html
|
|
@ -1,204 +1,3 @@
|
|||
<!-- <!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Logs</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://kit.fontawesome.com/a82697a287.js" crossorigin="anonymous"></script>
|
||||
<style>
|
||||
body {
|
||||
background: linear-gradient(135deg, #f6f8fc 0%, #e9ecef 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.glass-effect {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.log-item {
|
||||
position: relative;
|
||||
max-height: 10rem;
|
||||
overflow: hidden;
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: 1px solid rgba(226, 232, 240, 0.7);
|
||||
}
|
||||
|
||||
.log-text {
|
||||
display: block;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
color: #4a5568;
|
||||
}
|
||||
|
||||
.log-item:hover {
|
||||
max-height: none;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.log-item:hover .log-text {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.custom-select {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: #4f46e5;
|
||||
border: 2px solid rgba(79, 70, 229, 0.2);
|
||||
font-weight: 600;
|
||||
padding-right: 2.5rem;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234f46e5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0.75rem center;
|
||||
background-size: 1.25rem;
|
||||
}
|
||||
|
||||
.custom-select:hover {
|
||||
border-color: #4f46e5;
|
||||
background-color: rgba(79, 70, 229, 0.05);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.custom-select:focus {
|
||||
outline: none;
|
||||
border-color: #4f46e5;
|
||||
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
|
||||
}
|
||||
|
||||
.refresh-button {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: #4f46e5;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.4s ease;
|
||||
border: 2px solid rgba(79, 70, 229, 0.2);
|
||||
font-size: 1.25rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.refresh-button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(45deg,
|
||||
rgba(79, 70, 229, 0.1) 0%,
|
||||
rgba(79, 70, 229, 0) 100%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.refresh-button:hover {
|
||||
border-color: #4f46e5;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 16px rgba(79, 70, 229, 0.15);
|
||||
}
|
||||
|
||||
.refresh-button:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.refresh-button:hover i {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.refresh-button i {
|
||||
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.controls-wrapper {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
padding: 0.5rem;
|
||||
border-radius: 20px;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="font-sans">
|
||||
<div class="max-w-5xl mx-auto p-8 glass-effect rounded-3xl shadow-2xl mt-12 mb-12">
|
||||
<div class="flex items-center justify-between mb-12">
|
||||
<div>
|
||||
<h1 class="text-4xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">Query Logs</h1>
|
||||
<p class="text-gray-500 mt-2">Monitor and track system queries</p>
|
||||
</div>
|
||||
|
||||
<div class="controls-wrapper">
|
||||
<button onclick="location.reload()" class="refresh-button" title="Refresh logs">
|
||||
<i class="fa-solid fa-arrows-rotate"></i>
|
||||
</button>
|
||||
|
||||
<div class="relative">
|
||||
<select id="month" onchange="changeMonth()" class="custom-select w-48 px-6 py-3 rounded-xl text-sm font-medium">
|
||||
<option value="january" {{ if eq .Month "january" }}selected{{ end }}>January</option>
|
||||
<option value="february" {{ if eq .Month "february" }}selected{{ end }}>February</option>
|
||||
<option value="march" {{ if eq .Month "march" }}selected{{ end }}>March</option>
|
||||
<option value="april" {{ if eq .Month "april" }}selected{{ end }}>April</option>
|
||||
<option value="may" {{ if eq .Month "may" }}selected{{ end }}>May</option>
|
||||
<option value="june" {{ if eq .Month "june" }}selected{{ end }}>June</option>
|
||||
<option value="july" {{ if eq .Month "july" }}selected{{ end }}>July</option>
|
||||
<option value="august" {{ if eq .Month "august" }}selected{{ end }}>August</option>
|
||||
<option value="september" {{ if eq .Month "september" }}selected{{ end }}>September</option>
|
||||
<option value="october" {{ if eq .Month "october" }}selected{{ end }}>October</option>
|
||||
<option value="november" {{ if eq .Month "november" }}selected{{ end }}>November</option>
|
||||
<option value="december" {{ if eq .Month "december" }}selected{{ end }}>December</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="space-y-6">
|
||||
{{ range .Logs }}
|
||||
<li class="log-item p-6 glass-effect rounded-2xl hover:bg-gradient-to-r hover:from-indigo-50 hover:to-purple-50 transition-all">
|
||||
<div class="flex items-center gap-2 text-indigo-600 mb-3">
|
||||
<i class="fa-solid fa-terminal text-sm"></i>
|
||||
<span class="font-semibold">Log Entry</span>
|
||||
</div>
|
||||
<pre class="text-sm whitespace-pre-wrap break-words log-text">{{ . }}</pre>
|
||||
</li>
|
||||
{{ else }}
|
||||
<li class="p-8 glass-effect rounded-2xl text-center">
|
||||
<i class="fa-solid fa-inbox text-4xl text-gray-300 mb-3"></i>
|
||||
<p class="text-gray-500">No logs found for this month.</p>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const monthSelect = document.getElementById("month");
|
||||
if (!monthSelect.value) {
|
||||
const currentMonthIndex = new Date().getMonth();
|
||||
const months = ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'];
|
||||
monthSelect.value = months[currentMonthIndex];
|
||||
}
|
||||
});
|
||||
|
||||
function changeMonth() {
|
||||
const selectedMonth = document.getElementById("month").value;
|
||||
window.location.href = `/logs/${selectedMonth}`;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html> -->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
|
@ -224,7 +23,6 @@
|
|||
|
||||
.log-item {
|
||||
position: relative;
|
||||
max-height: 10rem;
|
||||
overflow: hidden;
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: 1px solid rgba(226, 232, 240, 0.7);
|
||||
|
|
@ -239,7 +37,6 @@
|
|||
}
|
||||
|
||||
.log-item:hover {
|
||||
max-height: none;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
|
@ -393,6 +190,104 @@
|
|||
border-radius: 8px;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* Tab Styles */
|
||||
.tab-button {
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tab-button:hover {
|
||||
background: rgba(79, 70, 229, 0.05);
|
||||
color: #4f46e5;
|
||||
}
|
||||
|
||||
.tab-button.active {
|
||||
background: rgba(79, 70, 229, 0.1);
|
||||
color: #4f46e5;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.badge {
|
||||
background: #e5e7eb;
|
||||
color: #6b7280;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.badge.query {
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
.badge.app {
|
||||
background: #f0fdf4;
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
.badge.error {
|
||||
background: #fef2f2;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.badge.info {
|
||||
background: #f0f9ff;
|
||||
color: #0369a1;
|
||||
}
|
||||
|
||||
.badge.warning {
|
||||
background: #fefce8;
|
||||
color: #ca8a04;
|
||||
}
|
||||
|
||||
.log-time {
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.log-level {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.level-info {
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
}
|
||||
.level-error {
|
||||
background: #fecaca;
|
||||
color: #dc2626;
|
||||
}
|
||||
.level-warning {
|
||||
background: #fef3c7;
|
||||
color: #d97706;
|
||||
}
|
||||
.level-debug {
|
||||
background: #e5e7eb;
|
||||
color: #374151;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
@ -420,7 +315,7 @@
|
|||
>Email</label
|
||||
>
|
||||
<input
|
||||
type="email"
|
||||
type="text"
|
||||
id="email"
|
||||
required
|
||||
placeholder="admin@example.com"
|
||||
|
|
@ -458,23 +353,20 @@
|
|||
<!-- Logs Section (Hidden until login) -->
|
||||
<div id="logsSection" class="hidden">
|
||||
<div
|
||||
class="max-w-5xl mx-auto p-8 glass-effect rounded-3xl shadow-2xl mt-12 mb-12"
|
||||
class="max-w-7xl mx-auto p-8 glass-effect rounded-3xl shadow-2xl mt-12 mb-12"
|
||||
>
|
||||
<div class="flex items-center justify-between mb-12">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div class="flex items-center gap-4">
|
||||
<div>
|
||||
<h1
|
||||
class="text-4xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent"
|
||||
>
|
||||
Query Logs
|
||||
System Logs
|
||||
</h1>
|
||||
<p class="text-gray-500 mt-2">Monitor and track system queries</p>
|
||||
<p class="text-gray-500 mt-2">
|
||||
Monitor query and application logs
|
||||
</p>
|
||||
</div>
|
||||
<!-- <span
|
||||
class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium"
|
||||
>
|
||||
<i class="fa-solid fa-circle-check mr-1"></i> Admin
|
||||
</span> -->
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
|
|
@ -519,8 +411,40 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="logsContent">
|
||||
<!-- Logs will be loaded here -->
|
||||
<!-- Tabs Navigation -->
|
||||
<div class="flex gap-2 mb-8 bg-gray-100 p-1 rounded-xl w-fit">
|
||||
<button
|
||||
id="queryTab"
|
||||
class="tab-button active flex items-center"
|
||||
onclick="switchTab('query')"
|
||||
>
|
||||
<i class="fa-solid fa-database mr-2"></i>
|
||||
Query Logs
|
||||
<span id="queryCount" class="badge query">0</span>
|
||||
</button>
|
||||
<button
|
||||
id="appTab"
|
||||
class="tab-button flex items-center"
|
||||
onclick="switchTab('app')"
|
||||
>
|
||||
<i class="fa-solid fa-code mr-2"></i>
|
||||
App Logs
|
||||
<span id="appCount" class="badge app">0</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Query Logs Tab -->
|
||||
<div id="queryTabContent" class="tab-content active">
|
||||
<div id="queryLogsContent">
|
||||
<!-- Query logs will be loaded here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- App Logs Tab -->
|
||||
<div id="appTabContent" class="tab-content">
|
||||
<div id="appLogsContent">
|
||||
<!-- App logs will be loaded here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -528,6 +452,7 @@
|
|||
<script>
|
||||
const API_BASE = "/api/v1/auth";
|
||||
const LOGS_BASE = "/api/v1/logs";
|
||||
let currentTab = "query";
|
||||
|
||||
// Check if already logged in on page load
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
|
|
@ -558,6 +483,20 @@
|
|||
document.getElementById("month").value = months[currentMonthIndex];
|
||||
});
|
||||
|
||||
function switchTab(tab) {
|
||||
// Update tab buttons
|
||||
document.getElementById("queryTab").classList.remove("active");
|
||||
document.getElementById("appTab").classList.remove("active");
|
||||
document.getElementById(tab + "Tab").classList.add("active");
|
||||
|
||||
// Update tab content
|
||||
document.getElementById("queryTabContent").classList.remove("active");
|
||||
document.getElementById("appTabContent").classList.remove("active");
|
||||
document.getElementById(tab + "TabContent").classList.add("active");
|
||||
|
||||
currentTab = tab;
|
||||
}
|
||||
|
||||
async function login(event) {
|
||||
event.preventDefault();
|
||||
|
||||
|
|
@ -578,16 +517,14 @@
|
|||
const response = await fetch(`${API_BASE}/login`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ email, password }),
|
||||
body: JSON.stringify({ login: email, password: password }),
|
||||
});
|
||||
|
||||
// Read raw text first to avoid 'Unexpected token <' when server returns HTML
|
||||
const raw = await response.text();
|
||||
let data = null;
|
||||
try {
|
||||
data = JSON.parse(raw);
|
||||
} catch (e) {
|
||||
// non-JSON response (HTML/error page) — keep raw for logging
|
||||
console.warn("Non-JSON response:", raw);
|
||||
}
|
||||
|
||||
|
|
@ -599,7 +536,6 @@
|
|||
throw new Error(message);
|
||||
}
|
||||
|
||||
// Extract token supporting both shapes: { access_token } or { data: { access_token } }
|
||||
const token =
|
||||
(data && data.access_token) ||
|
||||
(data && data.data && data.data.access_token);
|
||||
|
|
@ -609,15 +545,12 @@
|
|||
}
|
||||
|
||||
localStorage.setItem("admin_token", token);
|
||||
|
||||
// Show logs section
|
||||
showLogsSection();
|
||||
loadLogs();
|
||||
} catch (error) {
|
||||
errorMessage.textContent = error.message;
|
||||
errorMessage.classList.remove("hidden");
|
||||
} finally {
|
||||
// Reset loading state
|
||||
loginBtn.disabled = false;
|
||||
loginText.classList.remove("hidden");
|
||||
loginLoading.classList.add("hidden");
|
||||
|
|
@ -635,7 +568,8 @@
|
|||
}
|
||||
|
||||
async function loadLogs(month = null) {
|
||||
const logsContent = document.getElementById("logsContent");
|
||||
const queryLogsContent = document.getElementById("queryLogsContent");
|
||||
const appLogsContent = document.getElementById("appLogsContent");
|
||||
const token = localStorage.getItem("admin_token");
|
||||
|
||||
if (!token) {
|
||||
|
|
@ -646,12 +580,20 @@
|
|||
const selectedMonth = month || document.getElementById("month").value;
|
||||
|
||||
try {
|
||||
logsContent.innerHTML = `
|
||||
<div class="text-center py-8">
|
||||
<i class="fa-solid fa-spinner fa-spin text-2xl text-indigo-600 mb-3"></i>
|
||||
<p class="text-gray-500">Loading logs...</p>
|
||||
</div>
|
||||
`;
|
||||
// Show loading for both tabs
|
||||
queryLogsContent.innerHTML = `
|
||||
<div class="text-center py-8">
|
||||
<i class="fa-solid fa-spinner fa-spin text-2xl text-indigo-600 mb-3"></i>
|
||||
<p class="text-gray-500">Loading query logs...</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
appLogsContent.innerHTML = `
|
||||
<div class="text-center py-8">
|
||||
<i class="fa-solid fa-spinner fa-spin text-2xl text-indigo-600 mb-3"></i>
|
||||
<p class="text-gray-500">Loading app logs...</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const response = await fetch(`${LOGS_BASE}/${selectedMonth}`, {
|
||||
headers: {
|
||||
|
|
@ -661,13 +603,12 @@
|
|||
},
|
||||
});
|
||||
|
||||
// read raw and try parse JSON (avoid "Unexpected token '<'")
|
||||
const raw = await response.text();
|
||||
let payload = null;
|
||||
try {
|
||||
payload = JSON.parse(raw);
|
||||
} catch (e) {
|
||||
payload = raw; // fallback to raw HTML/text
|
||||
payload = raw;
|
||||
console.warn("Non-JSON logs response:", raw);
|
||||
}
|
||||
|
||||
|
|
@ -684,99 +625,179 @@
|
|||
throw new Error(message);
|
||||
}
|
||||
|
||||
// normalize logs array from possible response shapes
|
||||
let logs = [];
|
||||
if (Array.isArray(payload)) {
|
||||
logs = payload;
|
||||
} else if (
|
||||
payload &&
|
||||
payload.data &&
|
||||
Array.isArray(payload.data.logs)
|
||||
) {
|
||||
logs = payload.data.logs;
|
||||
} else if (payload && Array.isArray(payload.logs)) {
|
||||
logs = payload.logs;
|
||||
// Extract logs from response
|
||||
let queryLogs = [];
|
||||
let appLogs = [];
|
||||
|
||||
if (payload && payload.data) {
|
||||
queryLogs = payload.data.query_logs || [];
|
||||
appLogs = payload.data.app_logs || [];
|
||||
} else if (payload) {
|
||||
queryLogs = payload.query_logs || [];
|
||||
appLogs = payload.app_logs || [];
|
||||
}
|
||||
|
||||
displayLogs(logs);
|
||||
console.log("Query logs count:", queryLogs.length);
|
||||
console.log("App logs count:", appLogs.length);
|
||||
console.log("App logs sample:", appLogs.slice(0, 3));
|
||||
|
||||
// Update badge counts
|
||||
document.getElementById("queryCount").textContent = queryLogs.length;
|
||||
document.getElementById("appCount").textContent = appLogs.length;
|
||||
|
||||
displayQueryLogs(queryLogs);
|
||||
displayAppLogs(appLogs);
|
||||
} catch (error) {
|
||||
logsContent.innerHTML = `
|
||||
<div class="error-message text-center">
|
||||
<i class="fa-solid fa-exclamation-triangle mr-2"></i>
|
||||
${error.message}
|
||||
</div>
|
||||
`;
|
||||
const errorHTML = `
|
||||
<div class="error-message text-center">
|
||||
<i class="fa-solid fa-exclamation-triangle mr-2"></i>
|
||||
${error.message}
|
||||
</div>
|
||||
`;
|
||||
queryLogsContent.innerHTML = errorHTML;
|
||||
appLogsContent.innerHTML = errorHTML;
|
||||
}
|
||||
}
|
||||
|
||||
function displayLogs(logsOrPayload) {
|
||||
const logsContent = document.getElementById("logsContent");
|
||||
|
||||
// Normalize input ke array logs
|
||||
let logs = [];
|
||||
if (!logsOrPayload) {
|
||||
logs = [];
|
||||
} else if (Array.isArray(logsOrPayload)) {
|
||||
logs = logsOrPayload;
|
||||
} else if (
|
||||
logsOrPayload.data &&
|
||||
Array.isArray(logsOrPayload.data.logs)
|
||||
) {
|
||||
logs = logsOrPayload.data.logs;
|
||||
} else if (Array.isArray(logsOrPayload.logs)) {
|
||||
logs = logsOrPayload.logs;
|
||||
} else if (typeof logsOrPayload === "object") {
|
||||
// support wrapper like { month, logs, total } or { status, message, data: { logs } }
|
||||
if (Array.isArray(logsOrPayload.logs)) logs = logsOrPayload.logs;
|
||||
else if (logsOrPayload.data && Array.isArray(logsOrPayload.data.logs))
|
||||
logs = logsOrPayload.data.logs;
|
||||
else logs = [];
|
||||
}
|
||||
|
||||
// Clear area
|
||||
logsContent.innerHTML = "";
|
||||
function displayQueryLogs(logs) {
|
||||
const queryLogsContent = document.getElementById("queryLogsContent");
|
||||
queryLogsContent.innerHTML = "";
|
||||
|
||||
if (!logs || logs.length === 0) {
|
||||
logsContent.innerHTML = `
|
||||
<div class="p-8 glass-effect rounded-2xl text-center">
|
||||
<i class="fa-solid fa-inbox text-4xl text-gray-300 mb-3"></i>
|
||||
<p class="text-gray-500">No logs found for this month.</p>
|
||||
</div>
|
||||
`;
|
||||
queryLogsContent.innerHTML = `
|
||||
<div class="p-8 glass-effect rounded-2xl text-center">
|
||||
<i class="fa-solid fa-database text-4xl text-gray-300 mb-3"></i>
|
||||
<p class="text-gray-500">No query logs found for this month.</p>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
const ul = document.createElement("ul");
|
||||
ul.className = "space-y-6";
|
||||
ul.className = "space-y-4";
|
||||
|
||||
logs.forEach((log) => {
|
||||
logs.forEach((log, index) => {
|
||||
const li = document.createElement("li");
|
||||
li.className =
|
||||
"log-item p-6 glass-effect rounded-2xl hover:bg-gradient-to-r hover:from-indigo-50 hover:to-purple-50 transition-all";
|
||||
|
||||
const header = document.createElement("div");
|
||||
header.className = "flex items-center gap-2 text-indigo-600 mb-3";
|
||||
header.innerHTML = `<i class="fa-solid fa-terminal text-sm"></i><span class="font-semibold">Log Entry</span>`;
|
||||
"log-item p-4 glass-effect rounded-xl hover:bg-blue-50 transition-all border-l-4 border-blue-500";
|
||||
|
||||
const pre = document.createElement("pre");
|
||||
pre.className = "text-sm whitespace-pre-wrap break-words log-text";
|
||||
// gunakan textContent agar aman dari HTML injection
|
||||
if (typeof log === "string") {
|
||||
pre.textContent = log;
|
||||
} else {
|
||||
try {
|
||||
pre.textContent = JSON.stringify(log, null, 2);
|
||||
} catch (e) {
|
||||
pre.textContent = String(log);
|
||||
}
|
||||
}
|
||||
pre.className =
|
||||
"text-sm whitespace-pre-wrap break-words log-text font-mono";
|
||||
pre.textContent =
|
||||
typeof log === "string" ? log : JSON.stringify(log, null, 2);
|
||||
|
||||
li.appendChild(header);
|
||||
li.appendChild(pre);
|
||||
ul.appendChild(li);
|
||||
});
|
||||
|
||||
logsContent.appendChild(ul);
|
||||
queryLogsContent.appendChild(ul);
|
||||
}
|
||||
|
||||
function displayAppLogs(logs) {
|
||||
const appLogsContent = document.getElementById("appLogsContent");
|
||||
appLogsContent.innerHTML = "";
|
||||
|
||||
if (!logs || logs.length === 0) {
|
||||
appLogsContent.innerHTML = `
|
||||
<div class="p-8 glass-effect rounded-2xl text-center">
|
||||
<i class="fa-solid fa-code text-4xl text-gray-300 mb-3"></i>
|
||||
<p class="text-gray-500">No app logs found for this month.</p>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
const ul = document.createElement("ul");
|
||||
ul.className = "space-y-4";
|
||||
|
||||
logs.forEach((logEntry) => {
|
||||
if (!logEntry || logEntry.trim() === "") return;
|
||||
|
||||
const li = document.createElement("li");
|
||||
li.className =
|
||||
"log-item p-4 glass-effect rounded-xl transition-all border-l-4";
|
||||
|
||||
try {
|
||||
// Parse JSON log entry
|
||||
const log = JSON.parse(logEntry);
|
||||
const logLevel = log.level || "info";
|
||||
const timestamp = log.time || "";
|
||||
const message = log.msg || "";
|
||||
const fields = log.fields || {};
|
||||
|
||||
// Determine border color based on log level
|
||||
let borderColor = "border-green-500";
|
||||
let hoverColor = "hover:bg-green-50";
|
||||
let levelClass = "level-info";
|
||||
|
||||
if (logLevel === "error") {
|
||||
borderColor = "border-red-500";
|
||||
hoverColor = "hover:bg-red-50";
|
||||
levelClass = "level-error";
|
||||
} else if (logLevel === "warning") {
|
||||
borderColor = "border-yellow-500";
|
||||
hoverColor = "hover:bg-yellow-50";
|
||||
levelClass = "level-warning";
|
||||
} else if (logLevel === "debug") {
|
||||
borderColor = "border-gray-500";
|
||||
hoverColor = "hover:bg-gray-50";
|
||||
levelClass = "level-debug";
|
||||
}
|
||||
|
||||
li.className += ` ${borderColor} ${hoverColor}`;
|
||||
|
||||
// Create header with timestamp and level
|
||||
const header = document.createElement("div");
|
||||
header.className = "flex items-center justify-between mb-2";
|
||||
|
||||
const timeDiv = document.createElement("div");
|
||||
timeDiv.className = "log-time";
|
||||
timeDiv.textContent = timestamp;
|
||||
|
||||
const levelDiv = document.createElement("div");
|
||||
levelDiv.className = `log-level ${levelClass}`;
|
||||
levelDiv.textContent = logLevel.toUpperCase();
|
||||
|
||||
header.appendChild(timeDiv);
|
||||
header.appendChild(levelDiv);
|
||||
|
||||
// Create message div
|
||||
const messageDiv = document.createElement("div");
|
||||
messageDiv.className = "text-sm font-medium mb-2";
|
||||
messageDiv.textContent = message;
|
||||
|
||||
// Create fields pre if exists
|
||||
let fieldsContent = "";
|
||||
if (Object.keys(fields).length > 0) {
|
||||
const fieldsPre = document.createElement("pre");
|
||||
fieldsPre.className =
|
||||
"text-xs bg-gray-100 p-2 rounded mt-2 overflow-x-auto";
|
||||
fieldsPre.textContent = JSON.stringify(fields, null, 2);
|
||||
fieldsContent = fieldsPre.outerHTML;
|
||||
}
|
||||
|
||||
li.innerHTML = `
|
||||
${header.outerHTML}
|
||||
${messageDiv.outerHTML}
|
||||
${fieldsContent}
|
||||
`;
|
||||
} catch (e) {
|
||||
// If JSON parsing fails, display as raw text
|
||||
console.error("Error parsing log entry:", e);
|
||||
li.className += " border-gray-300 hover:bg-gray-50";
|
||||
|
||||
const pre = document.createElement("pre");
|
||||
pre.className =
|
||||
"text-sm whitespace-pre-wrap break-words log-text font-mono text-red-600";
|
||||
pre.textContent = `Invalid JSON: ${logEntry}`;
|
||||
li.appendChild(pre);
|
||||
}
|
||||
|
||||
ul.appendChild(li);
|
||||
});
|
||||
|
||||
appLogsContent.appendChild(ul);
|
||||
}
|
||||
|
||||
function changeMonth() {
|
||||
|
|
@ -791,8 +812,6 @@
|
|||
function logout() {
|
||||
localStorage.removeItem("admin_token");
|
||||
showLoginSection();
|
||||
|
||||
// Clear form
|
||||
document.getElementById("email").value = "";
|
||||
document.getElementById("password").value = "";
|
||||
document.getElementById("errorMessage").classList.add("hidden");
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
package middlewares
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
"net/http"
|
||||
"runtime/debug"
|
||||
|
||||
"github.com/gin-gonic/gin"
|
||||
"github.com/sirupsen/logrus"
|
||||
)
|
||||
|
||||
func GinRecoveryWithLogrus(logger *logrus.Logger) gin.HandlerFunc {
|
||||
return func(c *gin.Context) {
|
||||
defer func() {
|
||||
if r := recover(); r != nil {
|
||||
// ambil message dari panic
|
||||
var message string
|
||||
switch v := r.(type) {
|
||||
case string:
|
||||
message = v
|
||||
case error:
|
||||
message = v.Error()
|
||||
default:
|
||||
message = fmt.Sprintf("%v", v)
|
||||
}
|
||||
|
||||
logger.WithFields(logrus.Fields{
|
||||
"panic": r,
|
||||
"stack": string(debug.Stack()),
|
||||
"path": c.Request.URL.Path,
|
||||
"method": c.Request.Method,
|
||||
}).Error("Recovered from panic in HTTP request")
|
||||
|
||||
c.AbortWithStatusJSON(http.StatusInternalServerError, gin.H{
|
||||
"status": false,
|
||||
"error": "Internal Server Error",
|
||||
"message": message,
|
||||
})
|
||||
}
|
||||
}()
|
||||
c.Next()
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue