feat: add Sentry error tracking integration

- Introduced SentryErrorButton component to demonstrate error tracking.
- Updated nuxt.config.ts to include Sentry module and configuration.
- Added Sentry client and server configuration files for error reporting.
- Updated package.json to include @sentry/nuxt and updated dependencies.
- Integrated SentryErrorButton component into the cookbook page.

.env.example

@@ -1 +1,2 @@
 NUXT_API_URL=https://www.themealdb.com/api/json/v1/1/
+NUXT_PUBLIC_SENTRY_DSN=

.gitignore

@@ -23,3 +23,5 @@ logs
 .env.*
 !.env.example
 .aider*
+# Sentry Config File
+.env.sentry-build-plugin

components/SentryErrorButton.vue

@@ -0,0 +1,91 @@
+<!--
+This is just a very simple component that throws an example error.
+Feel free to delete this file.
+-->
+
+<script setup>
+import * as Sentry from "@sentry/nuxt";
+
+const hasSentError = ref(false);
+
+const throwError = () => {
+  Sentry.startSpan(
+    {
+      name: "Example Frontend Span",
+      op: "test",
+    },
+    () => {
+      hasSentError.value = true;
+      throw new Error("Sentry Example Error");
+    },
+  );
+};
+</script>
+
+<template>
+  <div v-if="hasSentError" class="success">
+    Sample error was sent to Sentry.
+  </div>
+  <button v-else @click="throwError">
+    <span>Throw Sample Error</span>
+  </button>
+</template>
+
+<style scoped>
+button {
+  border-radius: 8px;
+  color: white;
+  cursor: pointer;
+  background-color: #553db8;
+  border: none;
+  padding: 0;
+  margin-top: 4px;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    sans-serif;
+
+  & > 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);
+  }
+}
+
+.success {
+  width: max-content;
+  padding: 12px 16px;
+  border-radius: 8px;
+  font-size: 20px;
+  line-height: 1;
+  background-color: #00f261;
+  border: 1px solid #00bf4d;
+  color: #181423;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    sans-serif;
+}
+</style>

nuxt.config.ts

@@ -6,6 +6,7 @@ export default defineNuxtConfig({
     "@nuxt/eslint",
     "@nuxt/image",
     "@nuxtjs/robots",
+    "@sentry/nuxt/module",
     "@vueuse/nuxt",
     "nuxt-delay-hydration",
     "nuxt-icon",
@@ -57,8 +58,26 @@ export default defineNuxtConfig({
     // The private keys which are only available server-side
     apiUrl: "",
     // Keys within public are also exposed client-side
+    public: {
+      sentry: {
+        dsn: "",
+      },
+    },
   },
 
   ssr: true,
   compatibilityDate: "2024-12-13",
+
+  sentry: {
+    sourceMapsUploadOptions: {
+      org: "ruidy",
+      project: "meal-planner",
+    },
+
+    autoInjectServerSentry: "top-level-import",
+  },
+
+  sourcemap: {
+    client: "hidden",
+  },
 });

package.json

@@ -16,15 +16,16 @@
     "@nuxt/eslint": "^0.7.6",
     "@nuxt/image": "^1.10.0",
     "@nuxtjs/robots": "5.0.1",
+    "@sentry/nuxt": "^9",
     "@trpc/client": "^10.45.2",
     "@trpc/server": "^10.45.2",
     "@vueuse/nuxt": "12.0.0",
-    "nuxt": "^3.16.2",
+    "nuxt": "^3.17.4",
     "nuxt-icon": "^0.6.10",
     "trpc-nuxt": "^0.10.22",
-    "vue": "^3.5.13",
-    "vue-router": "^4.5.0",
-    "zod": "^3.24.2"
+    "vue": "^3.5.15",
+    "vue-router": "^4.5.1",
+    "zod": "^3.25.28"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.16",
@@ -35,5 +36,8 @@
     "prettier": "3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "tailwindcss": "^3.4.17"
+  },
+  "overrides": {
+    "@vercel/nft": "^0.27.4"
   }
 }

pages/cookbook.vue

@@ -6,6 +6,7 @@ const cookbook = useStorage<Recipe[]>("cookbook", [], localStorage);
 
 <template>
   <main>
+    <sentry-error-button />
     <div
       v-if="cookbook.length === 0"
       class="flex justify-center items-center min-h-screen"

sentry.client.config.ts

@@ -0,0 +1,23 @@
+import * as Sentry from "@sentry/nuxt";
+
+Sentry.init({
+  dsn: useRuntimeConfig().public.sentry.dsn,
+  // We recommend adjusting this value in production, or using tracesSampler for finer control
+  tracesSampleRate: 1.0,
+  // This sets the sample rate to be 10%. You may want this to be 100% while
+  // in development and sample at a lower rate in production
+  replaysSessionSampleRate: 0.1,
+  // If the entire session is not sampled, use the below sample rate to sample
+  // sessions when an error occurs.
+  replaysOnErrorSampleRate: 1.0,
+  // If you don't want to use Session Replay, just remove the line below:
+  integrations: [
+    Sentry.replayIntegration(),
+    Sentry.consoleLoggingIntegration(),
+  ],
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+  _experiments: {
+    enableLogs: true,
+  },
+});

sentry.server.config.ts

@@ -0,0 +1,9 @@
+import * as Sentry from "@sentry/nuxt";
+
+Sentry.init({
+  dsn: useRuntimeConfig().public.sentry.dsn,
+  // We recommend adjusting this value in production, or using tracesSampler for finer control
+  tracesSampleRate: 1.0,
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+});