webstudio-is · SaraVieira · Jul 5, 2022 · Jul 1, 2022 · Jul 1, 2022 · Jul 2, 2022
diff --git a/app/entry.client.tsx b/app/entry.client.tsx
@@ -2,6 +2,20 @@ import { hydrate } from "react-dom";
 import { RemixBrowser } from "@remix-run/react";
 import { initSentry } from "./shared/sentry";
 
-initSentry();
+import { useLocation, useMatches } from "@remix-run/react";
+import { BrowserTracing, remixRouterInstrumentation } from "@sentry/remix";
+import { useEffect } from "react";
+
+initSentry({
+  integrations: [
+    new BrowserTracing({
+      routingInstrumentation: remixRouterInstrumentation(
+        useEffect,
+        useLocation,
+        useMatches
+      ),
+    }),
+  ],
+});
 
 hydrate(<RemixBrowser />, document);
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
@@ -2,6 +2,13 @@ import { renderToString } from "react-dom/server";
 import { RemixServer } from "@remix-run/react";
 import { insertCriticalCss } from "./critical-css";
 import type { EntryContext } from "@remix-run/node";
+import * as Sentry from "@sentry/remix";
+import { initSentry } from "./shared/sentry";
+import { prisma } from "./shared/db/prisma.server";
+
+initSentry({
+  integrations: [new Sentry.Integrations.Prisma({ client: prisma })],
+});
 
 export default function handleRequest(
   request: Request,

diff --git a/app/root.tsx b/app/root.tsx
@@ -1,2 +1,16 @@
 // Our root outlet doesn't contain a layout because we have 2 types of documents: canvas and designer and we need to decide down the line which one to render, thre is no single root document.
-export { Outlet as default } from "@remix-run/react";
+import { Outlet } from "@remix-run/react";
+import { withSentryRouteTracing } from "@sentry/remix";
+import { ErrorBoundary } from "@sentry/remix";
+import { OutletProps } from "react-router-dom";
+
+const RootWithErrorBoundary = (props: OutletProps) => (
+  <ErrorBoundary>
+    <Outlet {...props} />
+  </ErrorBoundary>
+);
+
+export default withSentryRouteTracing(
+  // withSentryRouteTracing() expects a type from component that is not necessary true.
+  RootWithErrorBoundary as () => JSX.Element
+);
diff --git a/app/shared/env/env-getter.ts b/app/shared/env/env-getter.ts
@@ -8,9 +8,8 @@ export default new Proxy(
   {},
   {
     get(_target, prop) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       if (typeof window === "undefined") {
-        return process.env;
+        return prop in process.env ? process.env[prop as keyof Env] : undefined;
       }
       const env = (window[namespace as never] ?? {}) as unknown as Env;
       return prop in env ? env[prop as keyof Env] : undefined;

diff --git a/app/shared/sentry.ts b/app/shared/sentry.ts
@@ -1,15 +1,16 @@
-import * as Sentry from "@sentry/browser";
-import { Extras } from "@sentry/types";
-import { BrowserTracing } from "@sentry/tracing";
+import * as Sentry from "@sentry/remix";
+import { Extras, Integration } from "@sentry/types";
 import env from "~/shared/env";
 
-export const initSentry = () =>
+export const initSentry = ({
+  integrations = [],
+}: { integrations?: Integration[] } = {}) =>
   env.SENTRY_DSN
     ? Sentry.init({
         dsn: env.SENTRY_DSN,
-        integrations: [new BrowserTracing()],
         tracesSampleRate: 1.0,
         environment: env.VERCEL_ENV || "development",
+        integrations: integrations,
       })
     : () => null;
 

diff --git a/package.json b/package.json
@@ -52,8 +52,7 @@
     "@remix-run/node": "^1.5.1",
     "@remix-run/react": "^1.5.1",
     "@remix-run/serve": "^1.5.1",
-    "@sentry/browser": "^7.3.0",
-    "@sentry/tracing": "^7.3.0",
+    "@sentry/remix": "^7.5.0",
     "@stitches/react": "^1.2.7",
     "@webstudio-is/sdk": "0.4.0",
     "bson-objectid": "^2.0.2",