feat: integrate sentry

.gitignore

@@ -7,3 +7,9 @@ node_modules
 .wrangler
 
 .dev.vars
+
+# Sentry Config File
+.sentryclirc
+
+# Sentry Config File
+.env.sentry-build-plugin

app/components/nav.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import logo from "~/assets/images/logo.png?url";
 import { Sparkles } from "./sparkles";
 import { Link } from "@remix-run/react";

app/components/sparkles.tsx

@@ -2,8 +2,6 @@
  * Code taken from: https://www.joshwcomeau.com/react/animated-sparkles-in-react/
  * Author: Josh W. Comeau
  */
-"use client";
-
 import { HTMLAttributes, ReactNode, SVGAttributes, useState } from "react";
 import { useRandomInterval } from "~/utils/useRandomInterval";
 

app/entry.client.tsx

@@ -1,18 +1,32 @@
-/**
- * By default, Remix will handle hydrating your app on the client for you.
- * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
- * For more information, see https://remix.run/file-conventions/entry.client
- */
-
-import { RemixBrowser } from "@remix-run/react";
-import { startTransition, StrictMode } from "react";
-import { hydrateRoot } from "react-dom/client";
-
-startTransition(() => {
-  hydrateRoot(
-    document,
-    <StrictMode>
-      <RemixBrowser />
-    </StrictMode>,
-  );
-});
+import * as Sentry from "@sentry/remix";
+/**
+ * By default, Remix will handle hydrating your app on the client for you.
+ * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
+ * For more information, see https://remix.run/file-conventions/entry.client
+ */
+
+import { RemixBrowser, useLocation, useMatches } from "@remix-run/react";
+import { startTransition, StrictMode, useEffect } from "react";
+import { hydrateRoot } from "react-dom/client";
+
+Sentry.init({
+    dsn: "https://5f711f23dca8cae55c3ef1c0dde80b4e@o4507639875239936.ingest.us.sentry.io/4507639877992448",
+    tracesSampleRate: 1,
+    replaysSessionSampleRate: 0.1,
+    replaysOnErrorSampleRate: 1,
+
+    integrations: [Sentry.browserTracingIntegration({
+      useEffect,
+      useLocation,
+      useMatches
+    }), Sentry.replayIntegration()]
+})
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <RemixBrowser />
+    </StrictMode>,
+  );
+});

app/entry.server.tsx

@@ -1,43 +1,48 @@
-/**
- * By default, Remix will handle generating the HTTP Response for you.
- * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
- * For more information, see https://remix.run/file-conventions/entry.server
- */
-
-import type { AppLoadContext, EntryContext } from "@remix-run/cloudflare";
-import { RemixServer } from "@remix-run/react";
-import { isbot } from "isbot";
-import { renderToReadableStream } from "react-dom/server";
-
-export default async function handleRequest(
-  request: Request,
-  responseStatusCode: number,
-  responseHeaders: Headers,
-  remixContext: EntryContext,
-  // This is ignored so we can keep it in the template for visibility.  Feel
-  // free to delete this parameter in your app if you're not using it!
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  loadContext: AppLoadContext,
-) {
-  const body = await renderToReadableStream(
-    <RemixServer context={remixContext} url={request.url} />,
-    {
-      signal: request.signal,
-      onError(error: unknown) {
-        // Log streaming rendering errors from inside the shell
-        console.error(error);
-        responseStatusCode = 500;
-      },
-    },
-  );
-
-  if (isbot(request.headers.get("user-agent") || "")) {
-    await body.allReady;
-  }
-
-  responseHeaders.set("Content-Type", "text/html");
-  return new Response(body, {
-    headers: responseHeaders,
-    status: responseStatusCode,
-  });
-}
+import * as Sentry from "@sentry/remix";
+/**
+ * By default, Remix will handle generating the HTTP Response for you.
+ * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
+ * For more information, see https://remix.run/file-conventions/entry.server
+ */
+
+import type { AppLoadContext, EntryContext } from "@remix-run/cloudflare";
+import { RemixServer } from "@remix-run/react";
+import { isbot } from "isbot";
+import { renderToReadableStream } from "react-dom/server";
+
+export const handleError = Sentry.wrapHandleErrorWithSentry((error, { request }) => {
+  // Custom handleError implementation
+});
+
+export default async function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext,
+  // This is ignored so we can keep it in the template for visibility.  Feel
+  // free to delete this parameter in your app if you're not using it!
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  loadContext: AppLoadContext,
+) {
+  const body = await renderToReadableStream(
+    <RemixServer context={remixContext} url={request.url} />,
+    {
+      signal: request.signal,
+      onError(error: unknown) {
+        // Log streaming rendering errors from inside the shell
+        console.error(error);
+        responseStatusCode = 500;
+      },
+    },
+  );
+
+  if (isbot(request.headers.get("user-agent") || "")) {
+    await body.allReady;
+  }
+
+  responseHeaders.set("Content-Type", "text/html");
+  return new Response(body, {
+    headers: responseHeaders,
+    status: responseStatusCode,
+  });
+}

app/root.tsx

@@ -1,49 +1,50 @@
-import { LinksFunction } from "@remix-run/cloudflare";
-import {
-  Links,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration,
-} from "@remix-run/react";
-import stylesheet from "~/tailwind.css?url";
-import { Nav } from "./components/nav";
-import { Footer } from "./components/footer";
-
-export const links: LinksFunction = () => [
-  { rel: "stylesheet", href: stylesheet },
-];
-
-export function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en">
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <Meta />
-        <Links />
-      </head>
-      <body className="bg-tertiary">
-        {children}
-        <ScrollRestoration />
-        <Scripts />
-      </body>
-    </html>
-  );
-}
-
-export default function App() {
-  return (
-    <div className="m-0 h-svh w-svw p-0 font-mono text-primary">
-      <div className="relative mx-auto flex h-full w-full flex-col">
-        <Nav />
-        <main className="mx-auto h-full w-full flex-1 overflow-auto">
-          <div className="mx-auto w-full max-w-7xl px-6 sm:px-16">
-            <Outlet />
-          </div>
-        </main>
-        <Footer className="sm:px mx-auto flex w-full max-w-7xl px-6 py-2" />
-      </div>
-    </div>
-  );
-}
+import { captureRemixErrorBoundaryError } from "@sentry/remix";
+import { LinksFunction } from "@remix-run/cloudflare";
+import { Links, Meta, Outlet, Scripts, ScrollRestoration, useRouteError } from "@remix-run/react";
+import stylesheet from "~/tailwind.css?url";
+import { Nav } from "./components/nav";
+import { Footer } from "./components/footer";
+
+export const links: LinksFunction = () => [
+  { rel: "stylesheet", href: stylesheet },
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body className="bg-tertiary">
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export const ErrorBoundary = () => {
+  const error = useRouteError();
+  captureRemixErrorBoundaryError(error);
+  return <div>Something went wrong</div>;
+};
+
+export default function App() {
+  return (
+    <div className="m-0 h-svh w-svw p-0 font-mono text-primary">
+      <div className="relative mx-auto flex h-full w-full flex-col">
+        <Nav />
+        <main className="mx-auto h-full w-full flex-1 overflow-auto">
+          <div className="mx-auto w-full max-w-7xl px-6 sm:px-16">
+            <Outlet />
+          </div>
+        </main>
+        <Footer className="sm:px mx-auto flex w-full max-w-7xl px-6 py-2" />
+      </div>
+    </div>
+  );
+}

instrumentation.server.mjs

@@ -0,0 +1,7 @@
+import * as Sentry from "@sentry/remix";
+
+Sentry.init({
+    dsn: "https://5f711f23dca8cae55c3ef1c0dde80b4e@o4507639875239936.ingest.us.sentry.io/4507639877992448",
+    tracesSampleRate: 1,
+    autoInstrumentRemix: true
+})

package.json

@@ -20,6 +20,8 @@
     "@remix-run/cloudflare": "2.10.3",
     "@remix-run/cloudflare-pages": "2.10.3",
     "@remix-run/react": "2.10.3",
+    "@sentry/remix": "8.19.0",
+    "@sentry/vite-plugin": "2.21.1",
     "clsx": "2.1.1",
     "isbot": "5.1.13",
     "miniflare": "^3.20240718.0",