Suivre les erreurs client d'une app Next.js sur mobile

Ajouter le script aux previews

Dans app/layout.tsx, chargez le script seulement quand une variable d'environnement le demande, par exemple sur les previews Vercel.

import Script from "next/script";

const consoleId = process.env.NEXT_PUBLIC_CONSOLE_PROJECT_ID;

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="fr">
      <body>
        {children}
        {consoleId ? (
          <Script
            src="https://console.saltem.fr/tracker.js"
            data-project-id={consoleId}
            strategy="afterInteractive"
          />
        ) : null}
      </body>
    </html>
  );
}

Renseignez NEXT_PUBLIC_CONSOLE_PROJECT_ID dans l'environnement Preview de Vercel uniquement.

Lire les erreurs de production

En production, React remplace le texte des erreurs par un numéro et un lien. Ouvrez le lien affiché dans Console pour lire le message complet.

Si votre site envoie une Content-Security-Policy, autorisez https://console.saltem.fr dans script-src et wss://saltem-ws.onrender.com dans connect-src. Sans cela, le navigateur bloque le script sans message visible.