feat(Sentry): Initialise Sentry pour le suivi des erreurs et performances.

Ajoute l'initialisation de Sentry avec tunnel, suivi des performances et replay.
```
This commit is contained in:
Serreau Jovann
2026-01-15 20:42:55 +01:00
parent 72b774530d
commit 101990dfbd
4 changed files with 60 additions and 81 deletions

View File

@@ -1,15 +1,29 @@
import './admin.scss'
import * as Turbo from "@hotwired/turbo"
import * as Sentry from "@sentry/browser";
import * as Turbo from "@hotwired/turbo";
// --- INITIALISATION SENTRY (En premier !) ---
Sentry.init({
dsn: "https://803814be6540031b1c37bf92ba9c0f79@sentry.esy-web.dev/24",
tunnel: "/sentry-tunnel",
sendDefaultPii: true,
integrations: [
Sentry.browserTracingIntegration(),
Sentry.replayIntegration()
],
tracesSampleRate: 1.0,
tracePropagationTargets: ["localhost", "esy-web.dev"], // Remplace par ton domaine réel
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0
});
/**
* Initialise les composants de l'interface d'administration.
* Cette fonction est appelée à chaque chargement de page par Turbo.
*/
function initAdminLayout() {
const sidebar = document.getElementById('sidebar');
const overlay = document.getElementById('sidebar-overlay');
const toggleBtn = document.getElementById('sidebar-toggle');
const settingsToggle = document.getElementById('settings-toggle');
const settingsSubmenu = document.getElementById('settings-submenu');
@@ -30,17 +44,11 @@ function initAdminLayout() {
if (settingsToggle && settingsSubmenu) {
const settingsChevron = settingsToggle.querySelector('svg:last-child');
/**
* Alterne l'état du dropdown avec une animation de glissement.
* @param {boolean} show - Forcer l'ouverture ou la fermeture
* @param {boolean} animate - Activer ou non la transition CSS
*/
const toggleDropdown = (show, animate = true) => {
if (!animate) settingsSubmenu.style.transition = 'none';
if (show) {
settingsSubmenu.classList.remove('hidden');
// scrollHeight permet de calculer la hauteur réelle du contenu
settingsSubmenu.style.maxHeight = settingsSubmenu.scrollHeight + "px";
settingsChevron?.classList.add('rotate-180');
localStorage.setItem('admin_settings_open', 'true');
@@ -49,7 +57,6 @@ function initAdminLayout() {
settingsChevron?.classList.remove('rotate-180');
localStorage.setItem('admin_settings_open', 'false');
// On cache l'élément après l'animation pour l'accessibilité
if (animate) {
setTimeout(() => {
if (settingsSubmenu.style.maxHeight === "0px") {
@@ -62,30 +69,27 @@ function initAdminLayout() {
}
if (!animate) {
// Forcer un recalcul pour réactiver la transition proprement
settingsSubmenu.offsetHeight;
settingsSubmenu.offsetHeight; // force redraw
settingsSubmenu.style.transition = '';
}
};
// Événement de clic
settingsToggle.onclick = (e) => {
e.preventDefault();
const isClosed = settingsSubmenu.style.maxHeight === "0px" || settingsSubmenu.classList.contains('hidden');
toggleDropdown(isClosed);
};
// --- PERSISTANCE ---
// On vérifie si on est sur une page appartenant au menu ou si l'utilisateur l'avait laissé ouvert
// PERSISTANCE
const isSettingsRoute = window.location.pathname.includes('/crm/administrateur') ||
window.location.pathname.includes('/crm/logs');
const wasOpen = localStorage.getItem('admin_settings_open') === 'true';
if (isSettingsRoute || wasOpen) {
toggleDropdown(true, false); // Ouverture immédiate sans animation
toggleDropdown(true, false);
}
// --- HIGHLIGHT DU LIEN ACTIF ---
// HIGHLIGHT
settingsSubmenu.querySelectorAll('a').forEach(link => {
if (window.location.pathname === link.getAttribute('href')) {
link.classList.add('text-blue-600', 'dark:text-blue-400', 'font-semibold');
@@ -94,7 +98,7 @@ function initAdminLayout() {
});
}
// --- 3. GESTION DES MESSAGES FLASH (Auto-suppression) ---
// --- 3. GESTION DES MESSAGES FLASH ---
document.querySelectorAll('.flash-message').forEach((flash) => {
setTimeout(() => {
flash.classList.add('opacity-0', 'translate-x-10');
@@ -104,7 +108,6 @@ function initAdminLayout() {
}
// --- CORRECTIF DATA-TURBO-CONFIRM ---
// Turbo 7+ intercepte les clics, on réimplémente une confirmation native simple
document.addEventListener("turbo:click", (event) => {
const message = event.target.closest("[data-turbo-confirm]")?.getAttribute("data-turbo-confirm");
if (message && !confirm(message)) {
@@ -112,10 +115,8 @@ document.addEventListener("turbo:click", (event) => {
}
});
// Exécution au chargement initial et à chaque navigation Turbo
document.addEventListener('turbo:load', initAdminLayout);
// Nettoyage avant la mise en cache de Turbo (évite les bugs visuels au retour arrière)
document.addEventListener('turbo:before-cache', () => {
const sidebar = document.getElementById('sidebar');
const overlay = document.getElementById('sidebar-overlay');

View File

@@ -1,6 +1,22 @@
import './app.scss'
import * as Turbo from "@hotwired/turbo"
import * as Turbo from "@hotwired/turbo";
// --- INITIALISATION SENTRY (En premier !) ---
Sentry.init({
dsn: "https://803814be6540031b1c37bf92ba9c0f79@sentry.esy-web.dev/24",
tunnel: "/sentry-tunnel",
sendDefaultPii: true,
integrations: [
Sentry.browserTracingIntegration(),
Sentry.replayIntegration()
],
tracesSampleRate: 1.0,
tracePropagationTargets: ["localhost", "esy-web.dev"], // Remplace par ton domaine réel
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0
});
// --- INITIALISATION DES COMPOSANTS APRÈS TURBO/CHARGEMENT ---
document.addEventListener('DOMContentLoaded', ()=>{

View File

@@ -22,6 +22,7 @@
"@grafikart/drop-files-element": "^1.0.9",
"@hotwired/turbo": "^8.0.20",
"@preact/preset-vite": "^2.10.2",
"@sentry/browser": "^10.34.0",
"@tailwindcss/vite": "^4.1.17",
"autoprefixer": "^10.4.22",
"body-scroll-lock": "^4.0.0-beta.0",

View File

@@ -146,80 +146,41 @@ class HomeController extends AbstractController
'email' => $email
]);
}
const SENTRY_HOST = '';
const SENTRY_PROJECT_IDS = [''];
// Remplace par ton DSN exact pour la vérification
private const ALLOWED_DSN = 'https://803814be6540031b1c37bf92ba9c0f79@sentry.esy-web.dev/24';
private const SENTRY_HOST = 'sentry.esy-web.dev';
private const PROJECT_ID = '24';
#[Route('/uptime',name: 'app_uptime',options: ['sitemap' => false], methods: ['GET'])]
public function app_uptime(Request $request,HttpClientInterface $httpClient): Response
{
return $this->json([]);
}
#[Route('/tunnel',name: 'app_tunnel',options: ['sitemap' => false], methods: ['POST'])]
#[Route('/sentry-tunnel', name: 'sentry_tunnel', methods: ['POST'])]
public function tunnel(Request $request, HttpClientInterface $httpClient): Response
{
$envelope = $request->getContent();
if (empty($envelope)) {
return $this->json([]);
}
try {
// 2. Extract the header piece (first line)
$pieces = explode("\n", $envelope, 2);
$piece = $pieces[0];
$envelope = $request->getContent();
$pieces = explode("\n", $envelope);
// 3. Parse the header (which is JSON)
$header = json_decode($piece, true);
// La première ligne de l'enveloppe Sentry contient le header en JSON
$header = json_decode($pieces[0], true);
if (!isset($header['dsn'])) {
throw new \Exception("Missing DSN in envelope header.");
// --- SÉCURITÉ : On vérifie que le DSN correspond bien au tien ---
if (isset($header['dsn']) && $header['dsn'] !== self::ALLOWED_DSN) {
return new Response('Invalid DSN', 401);
}
// 4. Extract and validate DSN and Project ID
$dsnUrl = parse_url($header['dsn']);
$dsnHostname = $dsnUrl['host'] ?? null;
$dsnPath = $dsnUrl['path'] ?? '/';
// Construction de l'URL finale vers ton instance Sentry
$url = "https://" . self::SENTRY_HOST . "/api/" . self::PROJECT_ID . "/envelope/";
// Remove leading/trailing slashes from the path to get the project_id
$projectId = trim($dsnPath, '/');
if ($dsnHostname !== self::SENTRY_HOST) {
throw new \Exception("Invalid sentry hostname: {$dsnHostname}");
}
if (empty($projectId) || !in_array($projectId, self::SENTRY_PROJECT_IDS)) {
throw new \Exception("Invalid sentry project id: {$projectId}");
}
// 5. Construct the upstream Sentry URL
$upstreamSentryUrl = "https://" . self::SENTRY_HOST . "/api/" . $projectId . "/envelope/";
// 6. Forward the request using an HTTP client (e.g., Guzzle)
$response = $httpClient->request("POST",$upstreamSentryUrl, [
// On renvoie l'enveloppe à Sentry
$httpClient->request('POST', $url, [
'body' => $envelope,
'headers' => [
// Sentry expects this content type
'Content-Type' => 'application/x-sentry-envelope',
// Forward the content encoding if present, though often not needed
// 'Content-Encoding' => $request->headers->get('Content-Encoding'),
'Content-Type' => 'text/plain;charset=UTF-8',
],
]);
// 7. Return the status from the upstream Sentry response
return new JsonResponse([], $response->getStatusCode());
return new Response('', 204);
} catch (\Exception $e) {
// Log the error for server-side debugging
error_log("Error tunneling to Sentry: " . $e->getMessage());
// Return a success status (200/202) or a non-specific 500 to the client.
// Returning a non-error status (like 200) is often preferred for tunnels
// to avoid triggering ad-blockers on failures.
return new JsonResponse([
'error' => 'An error occurred during tunneling.'
], JsonResponse::HTTP_INTERNAL_SERVER_ERROR);
// En cas d'erreur du tunnel, on reste discret pour ne pas polluer la console client
return new Response('Tunnel Error', 500);
}
}
}