Add Sentry integration (#434)

* Add Sentry integration

* Use env var for DSN

* Move to `optionalDependencies`

* Update docs

docs/pages/configuration/sentry.mdx

@@ -0,0 +1,41 @@
+---
+sidebar_icon: bug
+---
+
+# Sentry
+
+Sentry is a popular error tracking tool that helps you monitor and fix crashes in real time. It provides you with detailed error reports, so you can quickly identify and resolve issues before they affect your users.
+
+## Enable Sentry
+
+1. To enable it you have to first install the optional dependency `@sentry/react`.
+
+```bash
+npm install --save @sentry/react
+```
+
+2. And then set the `SENTRY_DSN` environment variable in your Zudoku project.
+
+```bash
+
+SENTRY_DSN=https://your-sentry-dsn
+```
+
+## Release management
+
+However this does not handle release management for you. For that you can [create a custom `vite.config.ts`](./vite-config) and use the `@sentry/vite-plugin` plugin.
+
+```ts
+import { sentryVitePlugin } from "@sentry/vite-plugin";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [
+    sentryVitePlugin({
+      authToken: "your-token",
+      org: "your-org",
+      project: "your-project",
+    }),
+  ],
+});
+```

docs/zudoku.config.tsx

@@ -50,6 +50,7 @@ const config: ZudokuConfig = {
           "configuration/navigation",
           "configuration/search",
           "configuration/authentication",
+          "configuration/sentry",
           "configuration/vite-config",
         ],
       },

packages/zudoku/package.json

@@ -280,6 +280,7 @@
   },
   "optionalDependencies": {
     "@clerk/clerk-js": "5.11.0",
-    "@inkeep/widgets": "^0.2.289"
+    "@inkeep/widgets": "^0.2.289",
+    "@sentry/react": "^8.45.1"
   }
 }

packages/zudoku/src/app/entry.client.tsx

@@ -14,6 +14,12 @@ import { getRoutesByConfig } from "./main.js";
 const routes = getRoutesByConfig(config);
 const root = document.getElementById("root")!;
 
+if (process.env.SENTRY_DSN) {
+  void import("./sentry.js").then((mod) => {
+    mod.initSentry({ dsn: process.env.SENTRY_DSN as string });
+  });
+}
+
 if (root.childElementCount > 0) {
   void hydrate(routes);
 } else {

packages/zudoku/src/app/sentry.ts

@@ -0,0 +1,24 @@
+import * as Sentry from "@sentry/react";
+import { useEffect } from "react";
+import {
+  createRoutesFromChildren,
+  matchRoutes,
+  useLocation,
+  useNavigationType,
+} from "react-router-dom";
+
+export const initSentry = ({ dsn }: { dsn: string }) => {
+  Sentry.init({
+    dsn,
+    integrations: [
+      Sentry.reactRouterV6BrowserTracingIntegration({
+        useEffect,
+        useLocation,
+        useNavigationType,
+        createRoutesFromChildren,
+        matchRoutes,
+      }),
+      Sentry.replayIntegration(),
+    ],
+  });
+};

packages/zudoku/src/vite/config.ts

@@ -171,6 +171,9 @@ export async function getViteConfig(
     worker: {
       format: "es",
     },
+    define: {
+      "process.env.SENTRY_DSN": JSON.stringify(process.env.SENTRY_DSN),
+    },
     ssr: {
       target: "node",
       noExternal: [],
@@ -228,7 +231,7 @@ export async function getViteConfig(
           ? getAppServerEntryPath()
           : getAppClientEntryPath(),
       ],
-      include: ["react-dom/client"],
+      include: ["react-dom/client", "@sentry/react"],
       exclude: [
         // Vite does not like optimizing the worker dependency
         "zudoku/openapi-worker",

packages/zudoku/vite.config.ts

@@ -55,6 +55,7 @@ export default defineConfig({
         "react-dom",
         "lucide-react",
         /@radix-ui/,
+        "@sentry/react",
 
         // Optional Modules (i.e. auth providers) are external as we don't
         // want to bundle these in the library. Users will install these