update sentry and add profiling

Dockerfile

@@ -49,6 +49,7 @@ COPY --from=build /app/public /app/public
 COPY --from=build /app/package.json /app/package.json
 COPY --from=build /app/server.js /app/server.js
 COPY --from=build /app/server-utils.js /app/server-utils.js
+COPY --from=build /app/server-monitoring.js /app/server-monitoring.js
 COPY ./mdx ./mdx
 
 CMD [ "pnpm","start" ]

app/entry.server.tsx

@@ -17,10 +17,6 @@ forceEnvValidation();
 
 const ABORT_DELAY = 5_000;
 
-if (env.NODE_ENV === "production" && env.SENTRY_DSN) {
-  import("./utils/monitoring.server.ts").then(({ init }) => init());
-}
-
 type DocRequestArgs = Parameters<HandleDocumentRequestFunction>;
 export default function handleRequest(
   ...[
@@ -31,6 +27,10 @@ export default function handleRequest(
     loadContext,
   ]: DocRequestArgs
 ) {
+  if (env.NODE_ENV === "production" && env.SENTRY_DSN) {
+    responseHeaders.append("Document-Policy", "js-profiling");
+  }
+
   const nonce = String(loadContext.cspNonce);
   const callbackName = isbot(request.headers.get("user-agent"))
     ? "onAllReady"

app/utils/monitoring.client.ts

@@ -2,6 +2,7 @@ import {
   init as sentryInit,
   browserTracingIntegration,
   replayIntegration,
+  browserProfilingIntegration,
 } from "@sentry/remix";
 import { useLocation, useMatches } from "@remix-run/react";
 import { useEffect } from "react";
@@ -10,6 +11,7 @@ export function init() {
   sentryInit({
     dsn: window.ENV.SENTRY_DSN,
     tracesSampleRate: 1,
+    profilesSampleRate: 1,
     replaysSessionSampleRate: 0.1,
     replaysOnErrorSampleRate: 1,
 
@@ -20,6 +22,7 @@ export function init() {
         useMatches,
       }),
       replayIntegration(),
+      browserProfilingIntegration(),
     ],
   });
 }

app/utils/path.server.ts

@@ -1,14 +1,10 @@
 import { existsSync } from "fs";
 import { dirname, resolve } from "path";
-import { env } from "process";
 import { fileURLToPath } from "url";
 
 const __filename = fileURLToPath(import.meta.url); // prod: build/server/assets/server-build-[hash].js | dev: app/utils/path.server.ts
 const __dirname = dirname(__filename); // prod: build/server/assets | dev: app/utils
-export const rootPath = resolve(
-  __dirname,
-  env.NODE_ENV === "production" ? "../../../" : "../../",
-);
+export const rootPath = resolve(__dirname, "../../");
 
 export function getFilePathInDirectoryByName(
   dirPath: string,

package.json

@@ -38,7 +38,8 @@
     "@remix-run/node": "2.9.1",
     "@remix-run/react": "2.9.1",
     "@remix-run/serve": "2.9.1",
-    "@sentry/remix": "8.9.2",
+    "@sentry/profiling-node": "8.13.0",
+    "@sentry/remix": "8.13.0",
     "@sentry/vite-plugin": "2.18.0",
     "address": "2.0.2",
     "cache-control-parser": "2.0.6",