ref(nuxt): Add instument.server.mjs to preview script (#38)

* add instument.server.mjs

* add sourcemaps options

* add yarn.lock

Author: s1gr1d

apps/nuxt/components/ErrorButton.vue

@@ -0,0 +1,9 @@
+<script setup>
+const triggerError = () => {
+  throw new Error('Nuxt Button Error');
+};
+</script>
+
+<template>
+  <button id="errorBtn" @click="triggerError">Trigger Error</button>
+</template>

apps/nuxt/nuxt.config.ts

@@ -2,5 +2,13 @@
 export default defineNuxtConfig({
   devtools: { enabled: true },
   modules: ['@sentry/nuxt/module'],
+  sentry:{
+    debug: false,
+    sourceMapsUploadOptions: {
+      org: "org",
+      project: "proj",
+      authToken: process.env.SENTRY_AUTH_TOKEN,
+    },
+  },
   debug: false,
 });

apps/nuxt/package.json

@@ -6,12 +6,12 @@
     "build": "nuxt build",
     "dev": "nuxt dev",
     "generate": "nuxt generate",
-    "preview": "nuxt preview",
+    "preview": "NODE_OPTIONS='--import ./public/instrument.server.mjs' nuxt preview",
     "postinstall": "nuxt prepare",
     "clean": "npx nuxi cleanup"
   },
   "dependencies": {
-    "@sentry/nuxt": "8.17.0",
+    "@sentry/nuxt": "8.20.0",
     "nuxt": "^3.12.2"
   },
   "//": {
@@ -20,6 +20,8 @@
       "@sentry/core": "file:.yalc/@sentry/core",
       "@sentry/node": "file:.yalc/@sentry/node",
       "@sentry/nuxt": "file:.yalc/@sentry/nuxt",
+      "@sentry/opentelemetry": "file:.yalc/@sentry/opentelemetry",
+      "@sentry/types": "file:.yalc/@sentry/types",
       "@sentry/utils": "file:.yalc/@sentry/utils",
       "@sentry/vue": "file:.yalc/@sentry/vue"
     }

apps/nuxt/pages/client-error.vue

@@ -0,0 +1,7 @@
+<script setup>
+import ErrorButton from '../components/ErrorButton.vue';
+</script>
+
+<template>
+  <ErrorButton />
+</template>

apps/nuxt/pages/index.vue

@@ -1,13 +1,3 @@
 <template>
-  <div><button @click="triggerError">Trigger Error</button><br /></div>
-</template>
-
-<script>
-export default {
-  methods: {
-    triggerError() {
-      throw new Error('This is a test error for Sentry');
-    },
-  },
-};
-</script>
+  <h1>Hello!</h1>
+</template>

apps/nuxt/pages/test-param/[param].vue

@@ -1,3 +1,4 @@
 <template>
   <p>{{ $route.params.param }} - {{ $route.params.param }}</p>
+  <ErrorButton />
 </template>

apps/nuxt/public/instrument.server.mjs

@@ -0,0 +1,9 @@
+import * as Sentry from '@sentry/nuxt';
+
+if(process.env.SENTRY_DSN) {
+  Sentry.init({
+    dsn: process.env.SENTRY_DSN,
+    tracesSampleRate: 1,
+    debug: true,
+  });
+}

apps/nuxt/sentry.client.config.ts

@@ -3,6 +3,5 @@ import * as Sentry from '@sentry/nuxt';
 Sentry.init({
   dsn: 'your-dsn',
   debug: true,
-  tracesSampleRate: 1,
-  integrations: [Sentry.browserTracingIntegration()],
+  tracesSampleRate: 1
 });