julienfroidefond/stripstream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Better logging and revie system of debug

Browse Source
This commit is contained in:
Julien Froidefond
2025-02-23 22:19:24 +01:00
parent c7b2621946
commit 66e1db7788
11 changed files with 70 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/layout.tsx
View File

@@ -4,7 +4,6 @@ import "@/styles/globals.css";
import { cn } from "@/lib/utils";
import ClientLayout from "@/components/layout/ClientLayout";
import { PreferencesProvider } from "@/contexts/PreferencesContext";
import { DebugWrapper } from "@/components/debug/DebugWrapper";
const inter = Inter({ subsets: ["latin"] });
@@ -117,7 +116,6 @@ export default function RootLayout({ children }: { children: React.ReactNode })
<body className={cn("min-h-screen bg-background font-sans antialiased", inter.className)}>
<PreferencesProvider>
<ClientLayout>{children}</ClientLayout>
<DebugWrapper />
</PreferencesProvider>
</body>
</html>

28
src/components/debug/DebugInfo.tsx
View File

@@ -2,6 +2,7 @@
import { usePreferences } from "@/contexts/PreferencesContext";
import { useEffect, useState } from "react";
import { usePathname } from "next/navigation";
import {
X,
Database,
@@ -46,10 +47,10 @@ function formatDuration(duration: number) {
}
export function DebugInfo() {
const { preferences } = usePreferences();
const [logs, setLogs] = useState<RequestTiming[]>([]);
const [isMinimized, setIsMinimized] = useState(false);
const [isRefreshing, setIsRefreshing] = useState(false);
const pathname = usePathname();
const fetchLogs = async () => {
try {
@@ -66,9 +67,21 @@ export function DebugInfo() {
}
};
// Rafraîchir les logs au montage et à chaque changement de page
useEffect(() => {
fetchLogs();
}, []);
}, [pathname]);
// Rafraîchir les logs périodiquement si la fenêtre n'est pas minimisée
useEffect(() => {
if (isMinimized) return;
const interval = setInterval(() => {
fetchLogs();
}, 5000); // Rafraîchir toutes les 5 secondes
return () => clearInterval(interval);
}, [isMinimized]);
const clearLogs = async () => {
try {
@@ -83,12 +96,19 @@ export function DebugInfo() {
return (
<div
className={`fixed bottom-4 right-4 bg-zinc-900 border border-zinc-700 rounded-lg shadow-lg p-4 text-zinc-100 ${
className={`fixed bottom-4 right-4 bg-zinc-900 border border-zinc-700 rounded-lg shadow-lg p-4 text-zinc-100 z-50 ${
isMinimized ? "w-auto" : "w-[800px] max-h-[50vh] overflow-auto"
}`}
>
<div className="flex items-center justify-between mb-4 sticky top-0 bg-zinc-900 pb-2">
<h2 className="font-bold text-lg">DEBUG !</h2>
<div className="flex items-center gap-2">
<h2 className="font-bold text-lg">DEBUG</h2>
{!isMinimized && (
<span className="text-xs text-zinc-400">
{sortedLogs.length} entrée{sortedLogs.length > 1 ? "s" : ""}
</span>
)}
</div>
<div className="flex items-center gap-2">
<button
onClick={fetchLogs}

1
src/components/debug/DebugWrapper.tsx
View File

@@ -5,7 +5,6 @@ import { DebugInfo } from "./DebugInfo";
export function DebugWrapper() {
const { preferences } = usePreferences();
console.log(preferences);
if (!preferences.debug) {
return null;
}

2
src/components/layout/ClientLayout.tsx
View File

@@ -11,6 +11,7 @@ import { PreferencesProvider } from "@/contexts/PreferencesContext";
import { registerServiceWorker } from "@/lib/registerSW";
import { NetworkStatus } from "../ui/NetworkStatus";
import { LoadingBar } from "@/components/ui/loading-bar";
import { DebugWrapper } from "@/components/debug/DebugWrapper";
// Routes qui ne nécessitent pas d'authentification
const publicRoutes = ["/login", "/register"];
@@ -71,6 +72,7 @@ export default function ClientLayout({ children }: { children: React.ReactNode }
<InstallPWA />
<Toaster />
<NetworkStatus />
<DebugWrapper />
</div>
</PreferencesProvider>
</ThemeProvider>

53
src/contexts/PreferencesContext.tsx
View File

@@ -28,25 +28,25 @@ export function PreferencesProvider({ children }: { children: React.ReactNode })
const [preferences, setPreferences] = useState<UserPreferences>(defaultPreferences);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const fetchPreferences = async () => {
try {
const response = await fetch("/api/preferences");
if (!response.ok) throw new Error("Erreur lors de la récupération des préférences");
const data = await response.json();
setPreferences({
...defaultPreferences,
...data,
});
} catch (error) {
console.error("Erreur lors de la récupération des préférences:", error);
// En cas d'erreur, on garde les préférences par défaut
setPreferences(defaultPreferences);
} finally {
setIsLoading(false);
}
};
const fetchPreferences = async () => {
try {
const response = await fetch("/api/preferences");
if (!response.ok) throw new Error("Erreur lors de la récupération des préférences");
const data = await response.json();
setPreferences({
...defaultPreferences,
...data,
});
} catch (error) {
console.error("Erreur lors de la récupération des préférences:", error);
// En cas d'erreur, on garde les préférences par défaut
setPreferences(defaultPreferences);
} finally {
setIsLoading(false);
}
};
useEffect(() => {
fetchPreferences();
}, []);
@@ -64,14 +64,17 @@ export function PreferencesProvider({ children }: { children: React.ReactNode })
const updatedPreferences = await response.json();
setPreferences((prev) => {
const newState = {
...prev,
...updatedPreferences,
};
return newState;
});
setPreferences((prev) => ({
...prev,
...updatedPreferences,
}));
// Forcer un rafraîchissement des préférences
await fetchPreferences();
return updatedPreferences;
} catch (error) {
console.error("Erreur lors de la mise à jour des préférences:", error);
throw error;
}
};

3
src/lib/hoc/withPageTiming.tsx
View File

@@ -7,9 +7,8 @@ export function withPageTiming(pageName: string, Component: PageComponent) {
const start = performance.now();
const result = await Promise.resolve(Component(props));
const duration = performance.now() - start;
// Log le temps de rendu
await DebugService.logPageRender(pageName, duration);
await DebugService.logPageRender(pageName + JSON.stringify(props.params), duration);
return result;
};

22
src/lib/services/base-api.service.ts
View File

@@ -53,34 +53,12 @@ export abstract class BaseApiService {
type: CacheType = "DEFAULT"
): Promise<T> {
const cacheService = await getServerCacheService();
const startTime = performance.now();
try {
const result = await cacheService.getOrSet(key, fetcher, type);
const endTime = performance.now();
// Log la requête avec l'indication du cache
await DebugService.logRequest({
url: key,
startTime,
endTime,
fromCache: true,
cacheType: type,
});
return result;
} catch (error) {
const endTime = performance.now();
// Log aussi les erreurs
await DebugService.logRequest({
url: key,
startTime,
endTime,
fromCache: true,
cacheType: type,
});
throw error;
}
}

14
src/lib/services/server-cache.service.ts
View File

@@ -1,6 +1,7 @@
import fs from "fs";
import path from "path";
import { PreferencesService } from "./preferences.service";
import { DebugService } from "./debug.service";
type CacheMode = "file" | "memory";
@@ -370,13 +371,26 @@ class ServerCacheService {
fetcher: () => Promise<T>,
type: keyof typeof ServerCacheService.DEFAULT_TTL = "DEFAULT"
): Promise<T> {
const startTime = performance.now();
const cached = this.get(key);
if (cached !== null) {
const endTime = performance.now();
// Log la requête avec l'indication du cache
await DebugService.logRequest({
url: key,
startTime,
endTime,
fromCache: true,
cacheType: type,
});
return cached as T;
}
try {
const data = await fetcher();
this.set(key, data, type);
return data;
} catch (error) {