Add Sentry integration to Nuxt configuration and update .gitignore

- Included '@sentry/nuxt' module in nuxt.config.ts for error tracking.
- Configured Sentry organization and project settings.
- Added .env.sentry-build-plugin to .gitignore for sensitive configuration management.

.cursor/mcp.json

@@ -0,0 +1,7 @@
+{
+  "mcpServers": {
+    "Sentry": {
+      "url": "https://mcp.sentry.dev/mcp/gamivip/javascript-nuxt"
+    }
+  }
+}

.gitignore

@@ -22,3 +22,6 @@ logs
 .env
 .env.*
 !.env.example
+
+# Sentry Config File
+.env.sentry-build-plugin

app/pages/sentry-example-page.vue

@@ -0,0 +1,221 @@
+<!--
+This is just a very simple page with a button to throw an example error.
+Feel free to delete this file.
+-->
+
+<script setup>
+  import * as Sentry from '@sentry/nuxt';
+
+  class SentryExampleFrontendError extends Error {
+    constructor(message) {
+      super(message);
+      this.name = "SentryExampleFrontendError";
+    }
+  }
+
+  const hasSentError = ref(false);
+  const isConnected = ref(true);
+  
+  onMounted(async () => {
+    try {
+      const result = await Sentry.diagnoseSdkConnectivity();
+      isConnected.value = result !== 'sentry-unreachable';
+    } catch (error) {
+      isConnected.value = false;
+    }
+  });
+  
+  async function getSentryData() {
+    await Sentry.startSpan(
+      {
+        name: 'Example Frontend Span',
+        op: 'test'
+      },
+      async () => {
+        const res = await $fetch('/api/sentry-example-api', { 
+          method: 'GET',
+          ignoreResponseError: true 
+        }).catch(() => null);
+        if (!res) {
+          hasSentError.value = true;
+        }
+      }
+    );
+    throw new SentryExampleFrontendError("This error is raised on the frontend of the example page.");
+  }
+</script>
+
+<template>
+  <title>Sentry Onboarding</title>
+  <div>
+    <main>
+      <div class="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 class="description">
+        Click the button below, and view the sample error on the Sentry <a target="_blank" href="https://gamivip.sentry.io/issues/?project=4510503931346944">Issues Page</a>.
+        For more details about setting up Sentry, <a target="_blank" href="https://docs.sentry.io/platforms/javascript/guides/nuxt/">read our docs</a>.
+      </p>
+
+      <button
+        type="button"
+        @click="getSentryData"
+        :disabled="!isConnected"
+      >
+        <span>
+          Throw Sample Error
+        </span>
+      </button>
+
+      <p v-if="hasSentError" class="success">
+        Sample error was sent to Sentry.
+      </p>
+      <div v-else-if="!isConnected" class="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 v-else class="success_placeholder" />
+
+      <div class="flex-spacer" />
+    </main>
+  </div>
+</template>
+
+<style scoped>
+  :global(body) {
+    margin: 0;
+
+    @media (prefers-color-scheme: dark) {
+      color: #ededed;
+      background-color: #0a0a0a;
+    }
+  }
+
+  main {
+    display: flex;
+    min-height: 100vh;
+    box-sizing: border-box;
+    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;
+    margin: 0;
+    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>
+

nuxt.config.ts

@@ -11,6 +11,7 @@ export default defineNuxtConfig({
     '@nuxt/image',
     '@nuxtjs/i18n',
     '@vueuse/nuxt',
+    '@sentry/nuxt/module',
   ],
   devtools: { enabled: true },
   css: ['~/assets/css/main.css'],
@@ -23,6 +24,9 @@ export default defineNuxtConfig({
       googleClientId: process.env.NUXT_PUBLIC_GOOGLE_CLIENT_ID,
     },
   },
+  sourcemap: {
+    client: 'hidden',
+  },
   compatibilityDate: '2025-07-15',
   vite: {
     plugins: [
@@ -74,4 +78,8 @@ export default defineNuxtConfig({
       { code: 'zh', name: '简体中文', file: 'zh.json' },
     ],
   },
+  sentry: {
+    org: 'gamivip',
+    project: 'javascript-nuxt',
+  },
 })

package.json

@@ -16,6 +16,7 @@
     "@nuxt/image": "2.0.0",
     "@nuxtjs/i18n": "10.2.1",
     "@pinia/nuxt": "0.11.3",
+    "@sentry/nuxt": "^10",
     "@vant/nuxt": "^1.0.7",
     "@vueuse/nuxt": "14.1.0",
     "apng-js": "^1.1.5",
@@ -43,5 +44,8 @@
     "sass": "^1.94.0",
     "typescript": "^5.9.3",
     "vite-svg-loader": "^5.1.0"
+  },
+  "resolutions": {
+    "@vercel/nft": "^0.27.4"
   }
 }

sentry.client.config.ts

@@ -0,0 +1,32 @@
+import * as Sentry from "@sentry/nuxt";
+
+Sentry.init({
+  // If set up, you can use your runtime config here
+  // dsn: useRuntimeConfig().public.sentry.dsn,
+  dsn: "https://5a42d73350e084df0891c0c7e0e5ba3a@o4510503923220480.ingest.us.sentry.io/4510503931346944",
+
+  // 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()],
+
+  // Enable logs to be sent to Sentry
+  enableLogs: true,
+
+  // Enable sending of user PII (Personally Identifiable Information)
+  // https://docs.sentry.io/platforms/javascript/guides/nuxt/configuration/options/#sendDefaultPii
+  sendDefaultPii: true,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+});

sentry.server.config.ts

@@ -0,0 +1,19 @@
+import * as Sentry from "@sentry/nuxt";
+ 
+Sentry.init({
+  dsn: "https://5a42d73350e084df0891c0c7e0e5ba3a@o4510503923220480.ingest.us.sentry.io/4510503931346944",
+
+  // We recommend adjusting this value in production, or using tracesSampler
+  // for finer control
+  tracesSampleRate: 1.0,
+
+  // Enable logs to be sent to Sentry
+  enableLogs: true,
+
+  // Enable sending of user PII (Personally Identifiable Information)
+  // https://docs.sentry.io/platforms/javascript/guides/nuxt/configuration/options/#sendDefaultPii
+  sendDefaultPii: true,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+});