update sentry config to new self hosted sentry

apps/expo/src/app/_layout.tsx

@@ -17,7 +17,7 @@ Sentry.init({
   profilesSampleRate: 1.0,
 });
 
-const convex = new ConvexReactClient(process.env.EXPO_PUBLIC_CONVEX_URL);
+const convex = new ConvexReactClient(process.env.EXPO_PUBLIC_CONVEX_URL!);
 
 export const unstable_settings = {
   anchor: '(tabs)',

apps/next/.gitignore

@@ -45,3 +45,6 @@ next-env.d.ts
 
 # Ignored for the template, you probably want to remove it:
 package-lock.json
+
+# Sentry Config File
+.env.sentry-build-plugin

apps/next/env.example

@@ -1,18 +1,16 @@
+# You can find all default values in the env.js file which makes our values type safe.
 ### Server Variables ###
-# Convex
+NODE_ENV=
-CONVEX_SELF_HOSTED_URL=
-CONVEX_SELF_HOSTED_ADMIN_KEY=
-NEXT_PUBLIC_CONVEX_URL=
-SETUP_SCRIPT_RAN=
 # Sentry
 SENTRY_AUTH_TOKEN=
 
 ### Client Variables ###
-# Next                  # Default Values:
+# Next
-NEXT_PUBLIC_SITE_URL='http://localhost:3000'
+NEXT_PUBLIC_SITE_URL=
-# Sentry                           # Default Values
+# Convex
+NEXT_PUBLIC_CONVEX_URL=
+# Sentry
 NEXT_PUBLIC_SENTRY_DSN=
 NEXT_PUBLIC_SENTRY_URL=
 NEXT_PUBLIC_SENTRY_ORG=
 NEXT_PUBLIC_SENTRY_PROJECT_NAME=
-

apps/next/next.config.js

@@ -1,4 +1,4 @@
-import './src/env.js';
+import { env } from './src/env.js';
 import { withSentryConfig } from '@sentry/nextjs';
 import { withPlausibleProxy } from 'next-plausible';
 
@@ -32,12 +32,12 @@ const nextConfig = withPlausibleProxy({
 const sentryConfig = {
   // For all available options, see:
   // https://www.npmjs.com/package/@sentry/webpack-plugin#options
-  org: 'gib',
+  org: env.NEXT_PUBLIC_SENTRY_ORG,
-  project: process.env.NEXT_PUBLIC_SENTRY_PROJECT_NAME,
+  project: env.NEXT_PUBLIC_SENTRY_PROJECT_NAME,
-  sentryUrl: process.env.NEXT_PUBLIC_SENTRY_URL,
+  sentryUrl: env.NEXT_PUBLIC_SENTRY_URL,
-  authToken: process.env.SENTRY_AUTH_TOKEN,
+  authToken: env.SENTRY_AUTH_TOKEN,
   // Only print logs for uploading source maps in CI
-  silent: !process.env.CI,
+  silent: !env.CI,
   // For all available options, see:
   // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
   // Upload a larger set of source maps for prettier stack traces (increases build time)

apps/next/package.json

@@ -24,7 +24,7 @@
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tabs": "^1.1.13",
-    "@sentry/nextjs": "^10.11.0",
+    "@sentry/nextjs": "^10",
     "@t3-oss/env-nextjs": "^0.13.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

apps/next/sentry.server.config.ts

@@ -1,9 +1,9 @@
-// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+import { env } from './src/env'
-import * as Sentry from '@sentry/nextjs';
+import * as Sentry from "@sentry/nextjs";
-import './src/env.js';
 
 Sentry.init({
-  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  dsn: env.NEXT_PUBLIC_SENTRY_DSN,
   tracesSampleRate: 1,
+  enableLogs: true,
   debug: false,
 });

apps/next/src/app/(sentry)/api/sentry-example-api/route.ts

@@ -0,0 +1,14 @@
+import { NextResponse } from "next/server";
+
+export const dynamic = "force-dynamic";
+class SentryExampleAPIError extends Error {
+  constructor(message: string | undefined) {
+    super(message);
+    this.name = "SentryExampleAPIError";
+  }
+}
+// A faulty API route to test Sentry's error monitoring
+export function GET() {
+  throw new SentryExampleAPIError("This error is raised on the backend called by the example page.");
+  return NextResponse.json({ data: "Testing Sentry Error..." });
+}

apps/next/src/app/(sentry)/sentry-example-page/page.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import Head from "next/head";
+import * as Sentry from "@sentry/nextjs";
+import { useState, useEffect } from "react";
+
+class SentryExampleFrontendError extends Error {
+  constructor(message: string | undefined) {
+    super(message);
+    this.name = "SentryExampleFrontendError";
+  }
+}
+
+export default function Page() {
+  const [hasSentError, setHasSentError] = useState(false);
+  const [isConnected, setIsConnected] = useState(true);
+
+  useEffect(() => {
+    async function checkConnectivity() {
+      const result = await Sentry.diagnoseSdkConnectivity();
+      setIsConnected(result !== 'sentry-unreachable');
+    }
+    checkConnectivity();
+  }, []);
+
+  return (
+    <div>
+      <Head>
+        <title>sentry-example-page</title>
+        <meta name="description" content="Test Sentry for your Next.js app!" />
+      </Head>
+
+      <main>
+        <div className="flex-spacer" />
+        <svg height="40" width="40" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M21.85 2.995a3.698 3.698 0 0 1 1.353 1.354l16.303 28.278a3.703 3.703 0 0 1-1.354 5.053 3.694 3.694 0 0 1-1.848.496h-3.828a31.149 31.149 0 0 0 0-3.09h3.815a.61.61 0 0 0 .537-.917L20.523 5.893a.61.61 0 0 0-1.057 0l-3.739 6.494a28.948 28.948 0 0 1 9.63 10.453 28.988 28.988 0 0 1 3.499 13.78v1.542h-9.852v-1.544a19.106 19.106 0 0 0-2.182-8.85 19.08 19.08 0 0 0-6.032-6.829l-1.85 3.208a15.377 15.377 0 0 1 6.382 12.484v1.542H3.696A3.694 3.694 0 0 1 0 34.473c0-.648.17-1.286.494-1.849l2.33-4.074a8.562 8.562 0 0 1 2.689 1.536L3.158 34.17a.611.611 0 0 0 .538.917h8.448a12.481 12.481 0 0 0-6.037-9.09l-1.344-.772 4.908-8.545 1.344.77a22.16 22.16 0 0 1 7.705 7.444 22.193 22.193 0 0 1 3.316 10.193h3.699a25.892 25.892 0 0 0-3.811-12.033 25.856 25.856 0 0 0-9.046-8.796l-1.344-.772 5.269-9.136a3.698 3.698 0 0 1 3.2-1.849c.648 0 1.285.17 1.847.495Z" fill="currentcolor"/>
+        </svg>
+        <h1>
+          sentry-example-page
+        </h1>
+
+        <p className="description">
+          Click the button below, and view the sample error on the Sentry <a target="_blank" href="https://sentry.gbrown.org/organizations/sentry/issues/?project=2">Issues Page</a>.
+          For more details about setting up Sentry, <a target="_blank"
+           href="https://docs.sentry.io/platforms/javascript/guides/nextjs/">read our docs</a>.
+        </p>
+
+        <button
+          type="button"
+          onClick={async () => {
+            await Sentry.startSpan({
+              name: 'Example Frontend/Backend Span',
+              op: 'test'
+            }, async () => {
+              const res = await fetch("/api/sentry-example-api");
+              if (!res.ok) {
+                setHasSentError(true);
+              }
+            });
+            throw new SentryExampleFrontendError("This error is raised on the frontend of the example page.");
+          }}
+          disabled={!isConnected}
+        >
+          <span>
+            Throw Sample Error
+          </span>
+        </button>
+
+        {hasSentError ? (
+          <p className="success">
+            Error sent to Sentry.
+          </p>
+        ) : !isConnected ? (
+          <div className="connectivity-error">
+            <p>It looks like network requests to Sentry are being blocked, which will prevent errors from being captured. Try disabling your ad-blocker to complete the test.</p>
+          </div>
+        ) : (
+          <div className="success_placeholder" />
+        )}
+
+        <div className="flex-spacer" />
+
+      </main>
+
+      <style>{`
+        main {
+          display: flex;
+          min-height: 100vh;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          gap: 16px;
+          padding: 16px;
+          font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+        }
+
+        h1 {
+          padding: 0px 4px;
+          border-radius: 4px;
+          background-color: rgba(24, 20, 35, 0.03);
+          font-family: monospace;
+          font-size: 20px;
+          line-height: 1.2;
+        }
+
+        p {
+          margin: 0;
+          font-size: 20px;
+        }
+
+        a {
+          color: #6341F0;
+          text-decoration: underline;
+          cursor: pointer;
+
+          @media (prefers-color-scheme: dark) {
+            color: #B3A1FF;
+          }
+        }
+
+        button {
+          border-radius: 8px;
+          color: white;
+          cursor: pointer;
+          background-color: #553DB8;
+          border: none;
+          padding: 0;
+          margin-top: 4px;
+
+          & > span {
+            display: inline-block;
+            padding: 12px 16px;
+            border-radius: inherit;
+            font-size: 20px;
+            font-weight: bold;
+            line-height: 1;
+            background-color: #7553FF;
+            border: 1px solid #553DB8;
+            transform: translateY(-4px);
+          }
+
+          &:hover > span {
+            transform: translateY(-8px);
+          }
+
+          &:active > span {
+            transform: translateY(0);
+          }
+
+          &:disabled {
+	            cursor: not-allowed;
+	            opacity: 0.6;
+
+	            & > span {
+	              transform: translateY(0);
+	              border: none
+	            }
+	          }
+        }
+
+        .description {
+          text-align: center;
+          color: #6E6C75;
+          max-width: 500px;
+          line-height: 1.5;
+          font-size: 20px;
+
+          @media (prefers-color-scheme: dark) {
+            color: #A49FB5;
+          }
+        }
+
+        .flex-spacer {
+          flex: 1;
+        }
+
+        .success {
+          padding: 12px 16px;
+          border-radius: 8px;
+          font-size: 20px;
+          line-height: 1;
+          background-color: #00F261;
+          border: 1px solid #00BF4D;
+          color: #181423;
+        }
+
+        .success_placeholder {
+          height: 46px;
+        }
+
+        .connectivity-error {
+          padding: 12px 16px;
+          background-color: #E50045;
+          border-radius: 8px;
+          width: 500px;
+          color: #FFFFFF;
+          border: 1px solid #A80033;
+          text-align: center;
+          margin: 0;
+        }
+
+        .connectivity-error a {
+          color: #FFFFFF;
+          text-decoration: underline;
+        }
+      `}</style>
+    </div>
+  );
+}

apps/next/src/env.js

@@ -11,12 +11,14 @@ export const env = createEnv({
     CI: z.boolean().default(true),
   },
   client: {
-    NEXT_PUBLIC_CONVEX_URL: z.url(),
     NEXT_PUBLIC_SITE_URL: z.url().default('http://localhost:3000'),
-    NEXT_PUBLIC_SENTRY_DSN: z.url(),
+    NEXT_PUBLIC_CONVEX_URL: z.url().default('https://api.dev.convex.gbrown.org'),
-    NEXT_PUBLIC_SENTRY_URL: z.url(),
+    NEXT_PUBLIC_SENTRY_DSN: z.url().default(
+      'https://96df775337cce23d925616dd5aea8857@sentry.gbrown.org/2'
+    ),
+    NEXT_PUBLIC_SENTRY_URL: z.url().default('https://sentry.gbrown.org'),
     NEXT_PUBLIC_SENTRY_ORG: z.string().default('gib'),
-    NEXT_PUBLIC_SENTRY_PROJECT_NAME: z.string(),
+    NEXT_PUBLIC_SENTRY_PROJECT_NAME: z.string().default('techtracker-next'),
   },
   runtimeEnv: {
     NODE_ENV: process.env.NODE_ENV,

apps/next/src/instrumentation-client.ts

@@ -3,14 +3,16 @@ import * as Sentry from '@sentry/nextjs';
 
 Sentry.init({
   dsn: process.env.NEXT_PUBLIC_SENTRY_DSN!,
+  integrations: [Sentry.replayIntegration()],
   // https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
   sendDefaultPii: true,
   // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
-  tracesSampleRate: 1.0,
+  tracesSampleRate: 1,
-  integrations: [Sentry.replayIntegration()],
+  enableLogs: true,
   // https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration
-  replaysSessionSampleRate: 0.1,
+  replaysSessionSampleRate: 0.5,
   replaysOnErrorSampleRate: 1.0,
+  debug: false,
 });
 // `captureRouterTransitionStart` is available from SDK version 9.12.0 onwards
 export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;

apps/next/src/instrumentation.ts

@@ -1,10 +1,3 @@
 import * as Sentry from '@sentry/nextjs';
-import type { Instrumentation } from 'next';
+export const register = async () => await import('../sentry.server.config');
-
+export const onRequestError = Sentry.captureRequestError;
-export const register = async () => {
-  await import('../sentry.server.config');
-};
-
-export const onRequestError: Instrumentation.onRequestError = (...args) => {
-  Sentry.captureRequestError(...args);
-};

bun.lock

@@ -65,7 +65,7 @@
         "@radix-ui/react-separator": "^1.1.7",
         "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-tabs": "^1.1.13",
-        "@sentry/nextjs": "^10.11.0",
+        "@sentry/nextjs": "^10",
         "@t3-oss/env-nextjs": "^0.13.8",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",