wip

.gitignore

@@ -61,3 +61,6 @@ robots.txt
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+# Sentry Config File
+.env.sentry-build-plugin

mdx-components.tsx

@@ -6,58 +6,62 @@ import { CallOut } from "@codegouvfr/react-dsfr/CallOut";
 import { Table } from "@codegouvfr/react-dsfr/Table";
 import { fr } from "@codegouvfr/react-dsfr";
 
+export const mdxComponents = {
+  h1: ({ children }) => <h1 className={fr.cx("fr-h1")}>{children}</h1>,
+  h2: ({ children }) => (
+    <h2 className={fr.cx("fr-mt-3w", "fr-h2")}>{children}</h2>
+  ),
+  h3: ({ children }) => (
+    <h3 className={fr.cx("fr-mt-3w", "fr-h3")}>{children}</h3>
+  ),
+  h4: ({ children }) => (
+    <h4 className={fr.cx("fr-mt-3w", "fr-h4")}>{children}</h4>
+  ),
+  // @ts-ignore
+  table: (props) => {
+    if (
+      props.children &&
+      Array.isArray(props.children) &&
+      props.children.length === 2
+    ) {
+      const [head, body] = props.children;
+      const headers = head.props.children.props.children.map(
+        (child: any) => child.props.children
+      );
+      const data = body.props.children.map((row: any) =>
+        row.props.children.map((cell: any) => cell.props.children)
+      );
+      return <Table headers={headers} data={data} />;
+    }
+    return <div></div>;
+  },
+  a: (props) => {
+    if (
+      props.href &&
+      (props.href?.startsWith("http") || props.href?.startsWith("//"))
+    ) {
+      //@ts-ignore
+      return <Link {...props} target="_blank" rel="noopener noreferrer" />;
+    }
+    //@ts-ignore
+    return <Link {...props} />;
+  },
+  blockquote: (props) => {
+    if (
+      props.children &&
+      Array.isArray(props.children) &&
+      props.children.length === 3
+    ) {
+      return <CallOut>{props.children[1].props.children}</CallOut>;
+    }
+    return <CallOut>{props.children}</CallOut>;
+  },
+};
+
 // customize how MDX components are rendered - use DSFR components when possible
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
-    h1: ({ children }) => <h1 className={fr.cx("fr-h1")}>{children}</h1>,
-    h2: ({ children }) => (
-      <h2 className={fr.cx("fr-mt-3w", "fr-h2")}>{children}</h2>
-    ),
-    h3: ({ children }) => (
-      <h3 className={fr.cx("fr-mt-3w", "fr-h3")}>{children}</h3>
-    ),
-    h4: ({ children }) => (
-      <h4 className={fr.cx("fr-mt-3w", "fr-h4")}>{children}</h4>
-    ),
-    // @ts-ignore
-    table: (props) => {
-      if (
-        props.children &&
-        Array.isArray(props.children) &&
-        props.children.length === 2
-      ) {
-        const [head, body] = props.children;
-        const headers = head.props.children.props.children.map(
-          (child: any) => child.props.children
-        );
-        const data = body.props.children.map((row: any) =>
-          row.props.children.map((cell: any) => cell.props.children)
-        );
-        return <Table headers={headers} data={data} />;
-      }
-      return <div></div>;
-    },
-    a: (props) => {
-      if (
-        props.href &&
-        (props.href?.startsWith("http") || props.href?.startsWith("//"))
-      ) {
-        //@ts-ignore
-        return <Link {...props} target="_blank" rel="noopener noreferrer" />;
-      }
-      //@ts-ignore
-      return <Link {...props} />;
-    },
-    blockquote: (props) => {
-      if (
-        props.children &&
-        Array.isArray(props.children) &&
-        props.children.length === 3
-      ) {
-        return <CallOut>{props.children[1].props.children}</CallOut>;
-      }
-      return <CallOut>{props.children}</CallOut>;
-    },
+    ...mdxComponents,
     ...components,
   };
 }

next.config.mjs

@@ -19,7 +19,6 @@ const moduleExports = {
   basePath: process.env.NEXT_PUBLIC_BASE_PATH,
   pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
   reactStrictMode: true,
-  swcMinify: true,
   //output: "export",
   webpack: (config) => {
     config.module.rules.push({
@@ -41,6 +40,43 @@ const moduleExports = {
   transpilePackages: ["@codegouvfr/react-dsfr", "tss-react"],
 };
 
-export default {
-  ...withMDX(withSentryConfig(moduleExports, { silent: true })),
-};
+export default withSentryConfig(
+  {
+    ...withMDX(withSentryConfig(moduleExports, { silent: true })),
+  },
+  {
+    // For all available options, see:
+    // https://github.com/getsentry/sentry-webpack-plugin#options
+
+    org: "betagouv",
+    project: "template-nextjs",
+    sentryUrl: "https://sentry.incubateur.net/",
+
+    // Only print logs for uploading source maps in CI
+    silent: !process.env.CI,
+
+    // For all available options, see:
+    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+
+    // Upload a larger set of source maps for prettier stack traces (increases build time)
+    widenClientFileUpload: true,
+
+    // Uncomment to route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
+    // This can increase your server load as well as your hosting bill.
+    // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
+    // side errors will fail.
+    // tunnelRoute: "/monitoring",
+
+    // Hides source maps from generated client bundles
+    hideSourceMaps: true,
+
+    // Automatically tree-shake Sentry logger statements to reduce bundle size
+    disableLogger: true,
+
+    // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
+    // See the following for more information:
+    // https://docs.sentry.io/product/crons/
+    // https://vercel.com/docs/cron-jobs
+    automaticVercelMonitors: true,
+  }
+);

package.json

@@ -37,7 +37,7 @@
     "@mui/x-data-grid": "^5.17.26",
     "@mui/x-date-pickers": "^5.0.20",
     "@next/mdx": "^14.2.20",
-    "@sentry/nextjs": "^7.120.1",
+    "@sentry/nextjs": "^8",
     "@socialgouv/matomo-next": "^1.9.2",
     "ai": "^4.0.14",
     "dayjs": "^1.11.13",
@@ -46,8 +46,11 @@
     "nuqs": "^2.2.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-dropzone": "^14.3.5",
+    "react-markdown": "^9.0.1",
     "remark-gfm": "^4.0.0",
-    "tss-react": "^4.9.14"
+    "tss-react": "^4.9.14",
+    "zod": "^3.24.1"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",

sentry.client.config.ts

@@ -1,19 +1,15 @@
-// This file configures the initialization of Sentry on the browser.
-// The config you add here will be used whenever a page is visited.
+// This file configures the initialization of Sentry on the client.
+// The config you add here will be used whenever a users loads a page in their browser.
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
 import * as Sentry from "@sentry/nextjs";
 
-const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
-const SENTRY_ENV = process.env.SENTRY_ENV || process.env.NEXT_PUBLIC_SENTRY_ENV;
-
 Sentry.init({
-  dsn: SENTRY_DSN ?? "",
-  environment: SENTRY_ENV ?? "development",
-  // Adjust this value in production, or use tracesSampler for greater control
-  tracesSampleRate: 0.1,
-  // ...
-  // Note: if you want to override the automatic release value, do not set a
-  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
-  // that it will also get attached to your source maps
+  dsn: "https://[email protected]/159",
+
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
 });

sentry.edge.config.ts

@@ -1,19 +1,16 @@
-// This file configures the initialization of Sentry on the browser.
-// The config you add here will be used whenever a page is visited.
+// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
+// The config you add here will be used whenever one of the edge features is loaded.
+// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
 import * as Sentry from "@sentry/nextjs";
 
-const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
-const SENTRY_ENV = process.env.SENTRY_ENV || process.env.NEXT_PUBLIC_SENTRY_ENV;
-
 Sentry.init({
-  dsn: SENTRY_DSN ?? "",
-  environment: SENTRY_ENV ?? "development",
-  // Adjust this value in production, or use tracesSampler for greater control
-  tracesSampleRate: 0.1,
-  // ...
-  // Note: if you want to override the automatic release value, do not set a
-  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
-  // that it will also get attached to your source maps
+  dsn: "https://[email protected]/159",
+
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
 });

sentry.server.config.ts

@@ -4,20 +4,12 @@
 
 import * as Sentry from "@sentry/nextjs";
 
-const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
-const SENTRY_ENV = process.env.SENTRY_ENV || process.env.NEXT_PUBLIC_SENTRY_ENV;
-
 Sentry.init({
-  dsn: SENTRY_DSN ?? "",
-  environment: SENTRY_ENV ?? "development",
-  // Adjust this value in production, or use tracesSampler for greater control
-  tracesSampleRate: 0.1,
+  dsn: "https://[email protected]/159",
+
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+  tracesSampleRate: 1,
 
-  // remove healthz probes
-  beforeSendTransaction: (event, hint) => {
-    if (event?.request?.url?.endsWith("/healthz")) {
-      return null;
-    }
-    return event;
-  },
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
 });

src/instrumentation.ts

@@ -0,0 +1,13 @@
+import * as Sentry from '@sentry/nextjs';
+
+export async function register() {
+  if (process.env.NEXT_RUNTIME === 'nodejs') {
+    await import('../sentry.server.config');
+  }
+
+  if (process.env.NEXT_RUNTIME === 'edge') {
+    await import('../sentry.edge.config');
+  }
+}
+
+export const onRequestError = Sentry.captureRequestError;

src/pages/_app.tsx

@@ -18,6 +18,8 @@ import { init } from "@socialgouv/matomo-next";
 
 import pkg from "../../package.json";
 
+import "./styles.css";
+
 declare module "@codegouvfr/react-dsfr/next-pagesdir" {
   interface RegisterLink {
     Link: typeof Link;

src/pages/_error.tsx

@@ -1,7 +1,7 @@
 import NextErrorComponent, { ErrorProps as NextErrorProps } from "next/error";
 import { NextPageContext } from "next";
-
 import * as Sentry from "@sentry/nextjs";
+import Error from "next/error";
 
 export type ErrorPageProps = {
   err: Error;
@@ -55,7 +55,7 @@ MyError.getInitialProps = async (
   //    componentDidMount, etc) that was caught by Next.js's React Error
   //    Boundary. Read more about what types of exceptions are caught by Error
   //    Boundaries: https://reactjs.org/docs/error-boundaries.html
-
+  await Sentry.captureUnderscoreErrorException(props);
   if (err) {
     Sentry.captureException(err);
 

src/pages/api/albert/[[...path]].ts

@@ -18,7 +18,14 @@ export default async function handler(
     headers: req.headers,
     body: req.body,
   };
-  //console.log(data);
+  // console.log(data);
+  // console.log(
+  //   `${API_URL}/${
+  //     data.query.path &&
+  //     Array.isArray(data.query.path) &&
+  //     data.query.path.join("/")
+  //   }`
+  //);
   const albertJson = await fetch(
     `${API_URL}/${
       data.query.path &&
@@ -31,9 +38,12 @@ export default async function handler(
         Authorization: `Bearer ${ALBERT_API_KEY}`,
         "Content-Type": "application/json",
       },
-      body: (req.method === "POST" && req.body) || undefined,
+      body: (req.method === "POST" && JSON.stringify(req.body)) || undefined,
     }
-  ).then((r) => r.json());
+  ).then((r) => {
+    console.log(r);
+    return r.json();
+  });
 
   res.status(200).json(albertJson);
   // .then((data) => {

src/pages/api/sentry-example-api.js

@@ -0,0 +1,5 @@
+// A faulty API route to test Sentry's error monitoring
+export default function handler(_req, res) {
+  throw new Error("Sentry Example API Route Error");
+  res.status(200).json({ name: "John Doe" });
+}