feat : add sentry

README.md

@@ -8,7 +8,7 @@ Deployed on [Firebase](https://firebase.google.com/docs/hosting), see it live [h
 
 ## Running the app locally in dev mode
 
-At least [Node.js](https://nodejs.org) 18.17 is required.
+At least [Node.js](https://nodejs.org) 22.11 is required.
 
 Install the dependencies :
 

next.config.ts

@@ -1,3 +1,4 @@
+import { withSentryConfig } from "@sentry/nextjs";
 import { NextConfig } from "next";
 import { PHASE_PRODUCTION_BUILD } from "next/constants";
 
@@ -67,4 +68,14 @@ const nextConfig = (phase: string): NextConfig => ({
         ],
 });
 
-export default nextConfig;
+export default withSentryConfig(nextConfig, {
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+  org: process.env.SENTRY_ORG,
+  project: "javascript-nextjs",
+  widenClientFileUpload: true,
+  reactComponentAnnotation: {
+    enabled: true,
+  },
+  hideSourceMaps: true,
+  disableLogger: true,
+});

package.json

@@ -18,6 +18,7 @@
     "@mui/lab": "^6.0.0-beta.21",
     "@mui/material": "^6.3.0",
     "@mui/x-data-grid": "^7.23.5",
+    "@sentry/nextjs": "^8.47.0",
     "chess.js": "^1.0.0-beta.8",
     "firebase": "^11.1.0",
     "idb": "^8.0.1",

sentry.client.config.ts

@@ -0,0 +1,22 @@
+import * as Sentry from "@sentry/nextjs";
+
+if (
+  process.env.NEXT_PUBLIC_SENTRY_DSN &&
+  document.location.hostname !== "localhost"
+) {
+  Sentry.init({
+    dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+    environment: "production",
+    integrations: [
+      Sentry.replayIntegration({
+        maskAllText: false,
+        maskAllInputs: false,
+        blockAllMedia: false,
+      }),
+    ],
+    tracesSampleRate: 1,
+    replaysSessionSampleRate: 0,
+    replaysOnErrorSampleRate: 1.0,
+    debug: false,
+  });
+}

src/lib/lichess.ts

@@ -6,6 +6,7 @@ import {
   LichessGame,
   LichessResponse,
 } from "@/types/lichess";
+import { logErrorToSentry } from "./sentry";
 
 export const getLichessEval = async (
   fen: string,
@@ -52,7 +53,8 @@ export const getLichessEval = async (
       lines: linesToKeep,
     };
   } catch (error) {
-    console.error(error);
+    const err = error instanceof Error ? error : new Error("Unknown error");
+    logErrorToSentry(err, { fen, multiPv });
     return {
       bestMove: "",
       lines: [],

src/lib/sentry.ts

@@ -0,0 +1,17 @@
+import * as Sentry from "@sentry/nextjs";
+
+export const isSentryEnabled = () =>
+  !!process.env.NEXT_PUBLIC_SENTRY_DSN && Sentry.isInitialized();
+
+export const logErrorToSentry = (
+  error: Error,
+  context?: Record<string, unknown>
+) => {
+  if (isSentryEnabled()) {
+    Sentry.captureException(error, {
+      extra: context,
+    });
+  } else {
+    console.error(error);
+  }
+};

src/sections/loadGame/loadGameDialog.tsx

@@ -15,6 +15,7 @@ import {
   Typography,
   Grid2 as Grid,
 } from "@mui/material";
+import { setContext as setSentryContext } from "@sentry/react";
 import { Chess } from "chess.js";
 import { useState } from "react";
 import GamePgnInput from "./gamePgnInput";
@@ -43,6 +44,7 @@ export default function NewGameDialog({ open, onClose, setGame }: Props) {
 
     try {
       const gameToAdd = getGameFromPgn(pgn);
+      setSentryContext("loadedGame", { pgn });
 
       if (setGame) {
         setGame(gameToAdd);