[PRO-974] add sentry for both client and server (#20)

Basically ran through the remix + cloudflare setup docs.

.env.example

@@ -108,3 +108,6 @@ DEFAULT_NUM_CTX=
 # set these to enable opentelemetry
 HONEYCOMB_API_KEY=
 HONEYCOMB_DATASET=
+
+# If you're using Sentry for error tracking, include your Sentry Auth token here to upload sourcemaps
+SENTRY_AUTH_TOKEN=

.github/actions/setup-and-build/action.yaml

@@ -9,6 +9,11 @@ inputs:
     required: false
     type: string
     default: '20.15.1'
+  sentry-auth-token:
+    required: false
+    type: string
+    default: ''
+
 
 runs:
   using: composite
@@ -30,3 +35,5 @@ runs:
       run: |
         pnpm install
         pnpm run build
+      env:
+        SENTRY_AUTH_TOKEN: ${{ inputs.sentry-auth-token }}

.github/workflows/ci.yaml

@@ -10,7 +10,7 @@ on:
 
 jobs:
   test:
-    name: Test
+    name: CI/CD (and deploy on main)
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -18,6 +18,8 @@ jobs:
 
       - name: Setup and Build
         uses: ./.github/actions/setup-and-build
+        with:
+          sentry-auth-token: ${{ github.ref == 'refs/heads/main' && secrets.SENTRY_AUTH_TOKEN || '' }}
 
       - name: Run type check
         run: pnpm run typecheck

app/entry.client.tsx

@@ -1,7 +1,17 @@
+import * as Sentry from '@sentry/remix';
 import { RemixBrowser } from '@remix-run/react';
 import { startTransition } from 'react';
 import { hydrateRoot } from 'react-dom/client';
 
+Sentry.init({
+  dsn: 'https://5465638ce4f73a256d861820b3a4dad4@o437061.ingest.us.sentry.io/4508853437399040',
+  integrations: [Sentry.replayIntegration()],
+
+  // Session Replay
+  replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
+  replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
+});
+
 startTransition(() => {
   hydrateRoot(document.getElementById('root')!, <RemixBrowser />);
 });

app/entry.server.tsx

@@ -1,3 +1,4 @@
+import * as Sentry from '@sentry/remix';
 import type { AppLoadContext, EntryContext } from '@remix-run/cloudflare';
 import { RemixServer } from '@remix-run/react';
 import { isbot } from 'isbot';
@@ -6,6 +7,8 @@ import { renderHeadToString } from 'remix-island';
 import { Head } from './root';
 import { themeStore } from '~/lib/stores/theme';
 
+export const handleError = Sentry.sentryHandleError;
+
 export default async function handleRequest(
   request: Request,
   responseStatusCode: number,

app/root.tsx

@@ -1,6 +1,7 @@
+import { captureRemixErrorBoundaryError } from '@sentry/remix';
 import { useStore } from '@nanostores/react';
 import type { LinksFunction } from '@remix-run/cloudflare';
-import { Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react';
+import { Links, Meta, Outlet, Scripts, ScrollRestoration, useRouteError } from '@remix-run/react';
 import tailwindReset from '@unocss/reset/tailwind-compat.css?url';
 import { themeStore } from './lib/stores/theme';
 import { stripIndents } from './utils/stripIndent';
@@ -80,6 +81,13 @@ export function Layout({ children }: { children: React.ReactNode }) {
 
 import { logStore } from './lib/stores/logs';
 
+export const ErrorBoundary = () => {
+  const error = useRouteError();
+  captureRemixErrorBoundaryError(error);
+
+  return <div>Something went wrong</div>;
+};
+
 export default function App() {
   const theme = useStore(themeStore);
 

functions/_middleware.ts

@@ -0,0 +1,10 @@
+import * as Sentry from '@sentry/cloudflare';
+
+export const onRequest = [
+  // Make sure Sentry is the first middleware
+  Sentry.sentryPagesPlugin((_context) => ({
+    dsn: 'https://5465638ce4f73a256d861820b3a4dad4@o437061.ingest.us.sentry.io/4508853437399040',
+  })),
+
+  // if we ever add more middleware, add them below:
+];

package.json

@@ -78,6 +78,9 @@
     "@remix-run/cloudflare": "^2.15.0",
     "@remix-run/cloudflare-pages": "^2.15.0",
     "@remix-run/react": "^2.15.0",
+    "@sentry/cloudflare": "^8.55.0",
+    "@sentry/remix": "^8",
+    "@sentry/vite-plugin": "^3.1.2",
     "@uiw/codemirror-theme-vscode": "^4.23.6",
     "@unocss/reset": "^0.61.9",
     "@webcontainer/api": "1.5.1-internal.8",

vite.config.ts

@@ -3,6 +3,7 @@ import UnoCSS from 'unocss/vite';
 import { defineConfig, type ViteDevServer } from 'vite';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
 import { optimizeCssModules } from 'vite-plugin-optimize-css-modules';
+import { sentryVitePlugin } from '@sentry/vite-plugin';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import * as dotenv from 'dotenv';
 import { execSync } from 'child_process';
@@ -49,6 +50,13 @@ export default defineConfig((config) => {
       tsconfigPaths(),
       chrome129IssuePlugin(),
       config.mode === 'production' && optimizeCssModules({ apply: 'build' }),
+      config.mode === 'production' &&
+        process.env.SENTRY_AUTH_TOKEN &&
+        sentryVitePlugin({
+          authToken: process.env.SENTRY_AUTH_TOKEN,
+          org: 'replay',
+          project: 'nut',
+        }),
     ],
     envPrefix: ["VITE_","OPENAI_LIKE_API_BASE_URL", "OLLAMA_API_BASE_URL", "LMSTUDIO_API_BASE_URL","TOGETHER_API_BASE_URL"],
     css: {