From 2335fe7acffffff3557eb5a1708d38f8a4335203 Mon Sep 17 00:00:00 2001
From: Simon Hellmayr <simon.hellmayr@sentry.io>
Date: Thu, 17 Apr 2025 13:23:15 +0200
Subject: [PATCH 1/4] feat(nuxt): add bad connection detection to example page

---
 src/nuxt/templates.ts | 116 ++++++++++--------------------------------
 1 file changed, 27 insertions(+), 89 deletions(-)

diff --git a/src/nuxt/templates.ts b/src/nuxt/templates.ts
index 6b62fdc53..ad00a244b 100644
--- a/src/nuxt/templates.ts
+++ b/src/nuxt/templates.ts
@@ -158,6 +158,16 @@ Feel free to delete this file.
   import { useFetch} from '#imports'
 
   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;
+    }
+  });
   
   function getSentryData() {
     Sentry.startSpan(
@@ -189,7 +199,7 @@ Feel free to delete this file.
       </h1>
 
       <p class="description">
-        Click the button below, and view the sample error on the Sentry <a target="_blank" href="${issuesPageLink}">Issues Page</a>. 
+        Click the button below, and view the sample error on the Sentry <a target="_blank" href="https://simon-test-us.sentry.io/issues/?project=4509162143678464">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>
 
@@ -205,6 +215,9 @@ Feel free to delete this file.
       <p v-if="hasSentError" class="success">
         Sample error was sent to Sentry.
       </p>
+      <div v-else-if="!isConnected" class="connectivity-error">
+        <p>The Sentry SDK is not able to reach Sentry right now - this may be due to an adblocker. For more information, see <a target="_blank" href="https://docs.sentry.io/platforms/javascript/guides/nuxt/troubleshooting/#the-sdk-is-not-sending-any-data">the troubleshooting guide</a>.</p>
+      </div>
       <div v-else class="success_placeholder" />
 
       <div class="flex-spacer" />
@@ -321,98 +334,23 @@ Feel free to delete this file.
   .success_placeholder {
     height: 46px;
   }
-</style>
-`;
-}
-
-export function getSentryExampleApiTemplate() {
-  return `// This is just a very simple API route that throws an example error.
-// Feel free to delete this file.
-import { defineEventHandler } from '#imports';
-
-export default defineEventHandler(() => {
-  throw new Error("Sentry Example API Route Error");
-});
-`;
-}
-
-export function getSentryErrorButtonTemplate() {
-  return `<!--
-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;
+  .connectivity-error {
     padding: 12px 16px;
+    background-color: #E50045;
     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;
+    width: 500px;
+    color: #FFFFFF;
+    border: 1px solid #A80033;
+    text-align: center;
+    margin: 0;
+  }
+  
+  .connectivity-error a {
+    color: #FFFFFF;
+    text-decoration: underline;
   }
 </style>
+
 `;
 }

From 2651ca1e06c68d58deb4914606bdd826ae76cc5b Mon Sep 17 00:00:00 2001
From: Simon Hellmayr <simon.hellmayr@sentry.io>
Date: Thu, 17 Apr 2025 13:24:05 +0200
Subject: [PATCH 2/4] add changelog

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 25013f85a..834a1dd7a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,8 @@
 - feat(nextjs): Add connectivity check to example page([#951](https://github.com/getsentry/sentry-wizard/pull/951))
 - feat(nextjs): Improve error names in example page to better differentiate between frontend and API errors ([#944](https://github.com/getsentry/sentry-wizard/pull/944))
 - fix(remix): linting issues in generated client init code ([#949](https://github.com/getsentry/sentry-wizard/pull/949))
+- feat(nuxt): Add connectivity check to example page ([#966](https://github.com/getsentry/sentry-wizard/pull/966))
+
 
 ## 4.7.0
 

From d39fa6c273ddc4f009d31f86440a20eded6d70d0 Mon Sep 17 00:00:00 2001
From: Simon Hellmayr <simon.hellmayr@sentry.io>
Date: Thu, 17 Apr 2025 13:26:39 +0200
Subject: [PATCH 3/4] revert the oopsie

---
 src/nuxt/templates.ts | 92 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 92 insertions(+)

diff --git a/src/nuxt/templates.ts b/src/nuxt/templates.ts
index ad00a244b..e3a5d6b77 100644
--- a/src/nuxt/templates.ts
+++ b/src/nuxt/templates.ts
@@ -354,3 +354,95 @@ Feel free to delete this file.
 
 `;
 }
+
+export function getSentryExampleApiTemplate() {
+  return `// This is just a very simple API route that throws an example error.
+// Feel free to delete this file.
+import { defineEventHandler } from '#imports';
+
+export default defineEventHandler(() => {
+  throw new Error("Sentry Example API Route Error");
+});
+`;
+}
+
+export function getSentryErrorButtonTemplate() {
+  return `<!--
+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>
+`;
+}

From 84ddbbd86bcf375bfdaaafcd2e09a248d2e1dfbc Mon Sep 17 00:00:00 2001
From: Simon Hellmayr <simon.hellmayr@sentry.io>
Date: Thu, 17 Apr 2025 13:27:32 +0200
Subject: [PATCH 4/4] fix url

---
 src/nuxt/templates.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/nuxt/templates.ts b/src/nuxt/templates.ts
index e3a5d6b77..536257a9b 100644
--- a/src/nuxt/templates.ts
+++ b/src/nuxt/templates.ts
@@ -199,7 +199,7 @@ Feel free to delete this file.
       </h1>
 
       <p class="description">
-        Click the button below, and view the sample error on the Sentry <a target="_blank" href="https://simon-test-us.sentry.io/issues/?project=4509162143678464">Issues Page</a>. 
+        Click the button below, and view the sample error on the Sentry <a target="_blank" href="${issuesPageLink}">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>