feat: Add @sentry/remix

app/db.server.ts

@@ -1,6 +1,5 @@
 import { PrismaClient } from "@prisma/client";
 import invariant from "tiny-invariant";
-import * as Sentry from "@sentry/node";
 
 let prisma: PrismaClient;
 
@@ -45,40 +44,4 @@ function getClient() {
   return client;
 }
 
-// https://github.com/getsentry/sentry-javascript/issues/3143
-export function installPrismaTracer(prisma) {
-  prisma.$use(async (params, next) => {
-    const { model, action, runInTransaction, args } = params;
-    const description = [model, action].filter(Boolean).join(".");
-    const data = {
-      model,
-      action,
-      runInTransaction,
-      args,
-    };
-
-    const scope = Sentry.getCurrentHub().getScope();
-    const parentSpan = scope?.getSpan();
-    const span = parentSpan?.startChild({
-      op: "db",
-      description,
-      data,
-    });
-
-    // optional but nice
-    scope?.addBreadcrumb({
-      category: "db",
-      message: description,
-      data,
-    });
-
-    const result = await next(params);
-    span?.finish();
-
-    return result;
-  });
-}
-
-installPrismaTracer(prisma);
-
 export { prisma };

app/entry.client.tsx

@@ -1,10 +1,24 @@
-import { RemixBrowser } from "@remix-run/react";
+import { useEffect } from "react";
 import { hydrate } from "react-dom";
 
-import * as Sentry from "~/lib/sentry-remix-client";
+import { RemixBrowser, useLocation, useMatches } from "@remix-run/react";
+import * as Sentry from "@sentry/remix";
 
 Sentry.init({
+  // @ts-ignore We set ENV in root.tsx
+  dsn: window.ENV.SENTRY_DSN,
+  // @ts-ignore We set ENV in root.tsx
+  release: window.ENV.VERSION,
   tracesSampleRate: 1.0,
+  integrations: [
+    new Sentry.BrowserTracing({
+        routingInstrumentation: Sentry.remixRouterInstrumentation(
+            useEffect,
+            useLocation,
+            useMatches,
+        ),
+    }),
+  ],
 });
 
 hydrate(<RemixBrowser />, document);

app/entry.server.tsx

@@ -3,6 +3,18 @@ import { RemixServer } from "@remix-run/react";
 import { renderToString } from "react-dom/server";
 import { ServerStyleSheet } from "styled-components";
 
+import { prisma } from "~/db.server";
+
+import * as Sentry from "@sentry/remix";
+
+Sentry.init({
+  dsn: process.env.SENTRY_DSN,
+  environment: process.env.NODE_ENV,
+  release: process.env.VERSION,
+  tracesSampleRate: 1.0,
+  integrations: [new Sentry.Integrations.Prisma({ client: prisma })],
+});
+
 function handleRequest(
   request: Request,
   responseStatusCode: number,

app/lib/iap.ts

@@ -2,7 +2,7 @@
 
 import type { JwtPayload } from "jsonwebtoken";
 import jwt from "jsonwebtoken";
-import * as Sentry from "./sentry-remix-client";
+import * as Sentry from "@sentry/remix";
 
 export type Identity = {
   id: string;

app/lib/logging.ts

@@ -1,4 +1,4 @@
-import * as Sentry from "~/lib/sentry-remix-client";
+import * as Sentry from "@sentry/remix";
 
 type CaptureContext = {
   context: {

app/root.tsx

@@ -33,7 +33,6 @@ import Container from "./components/container";
 import { Sidebar, SidebarSection } from "./components/sidebar";
 
 import { Toaster } from "react-hot-toast";
-import * as Sentry from "./lib/sentry-remix-client";
 import { CategoryTag, CategoryTags } from "./components/category-tag";
 import Input from "./components/input";
 import { getCategoryList } from "./models/category.server";
@@ -42,6 +41,8 @@ import { getPostList } from "./models/post.server";
 import PostList from "./components/post-list";
 import moment from "moment";
 
+import { withSentry, setUser, captureException } from "@sentry/remix";
+
 export const links: LinksFunction = () => {
   return [
     { rel: "stylesheet", href: tailwindStylesheetUrl },
@@ -87,6 +88,8 @@ export const loader: LoaderFunction = async ({ request }) => {
   const cookie = await sessionStorage.commitSession(session);
   const user = await getUser(request);
 
+  setUser(user);
+
   // probably a cleaner way to build this, but we're here for the duct tape
   const pathname = new URL(request.url).pathname;
   if (!user!.name && pathname !== "/welcome") {
@@ -127,10 +130,10 @@ export const loader: LoaderFunction = async ({ request }) => {
   );
 };
 
-export function ErrorBoundary({ error }) {
+export function ErrorBoundary({ error }: any) {
   console.error(error);
   // TODO(dcramer): verify if this is useful
-  Sentry.captureException(error);
+  captureException(error);
   return (
     <html lang="en">
       <head>
@@ -156,11 +159,13 @@ export function ErrorBoundary({ error }) {
   );
 }
 
-export default function App() {
+function App() {
   const { user, categoryList, recentPostList, ENV } = useLoaderData();
   const [theme, setTheme] = useState("light");
   const [showSidebar, setShowSidebar] = useState(false);
 
+  setUser(user);
+
   useEffect(() => {
     window
       .matchMedia("(prefers-color-scheme: dark)")
@@ -180,7 +185,6 @@ export default function App() {
   return (
     <html lang="en">
       <head>
-        <Sentry.Component />
         <Meta />
         <Links />
         {typeof document === "undefined" ? "__STYLES__" : null}
@@ -225,7 +229,7 @@ export default function App() {
             <SidebarSection>
               <h6>Divisions</h6>
               <CategoryTags>
-                {categoryList.map((category) => (
+                {categoryList.map((category: any) => (
                   <CategoryTag key={category.id} category={category} />
                 ))}
               </CategoryTags>
@@ -274,3 +278,28 @@ const UserMenuDivider = styled.div`
     content: "/";
   }
 `;
+
+const Fallback = () => (
+  <html lang="en">
+    <head>
+      <title>Oh no!</title>
+      <Meta />
+      <Links />
+      {typeof document === "undefined" ? "__STYLES__" : null}
+    </head>
+    <ThemeProvider theme={lightTheme}>
+      <GlobalStyles />
+      <body>
+        <Primary>
+          <Container>
+            <Header />
+            <h1>Something bad happened. Don't worry, we've sent the error to Sentry and we are on the case!</h1>
+          </Container>
+        </Primary>
+        <Scripts />
+      </body>
+    </ThemeProvider>
+  </html>
+);
+
+export default withSentry(App, { errorBoundaryOptions: { fallback: <Fallback /> } });

app/routes/u/$userEmail.tsx

@@ -1,6 +1,6 @@
 import type { LoaderFunction, ActionFunction } from "@remix-run/node";
 import { json } from "@remix-run/node";
-import { Form, useActionData, useLoaderData } from "@remix-run/react";
+import { Form, useLoaderData } from "@remix-run/react";
 import invariant from "tiny-invariant";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";