feat(nextjs): add connectivity check to example page (#951)

Author: shellmayr

CHANGELOG.md

@@ -1,8 +1,9 @@
 # Changelog
 
 ## Unreleased
-
 - test(react-native): Add E2E Tests for React Native and Expo projects ([#884](https://github.com/getsentry/sentry-wizard/pull/884))
+- feat(nextjs): Add connectivity check to example page([#951](https://github.com/getsentry/sentry-wizard/pull/951))
+
 
 ## 4.7.0
 

src/nextjs/templates.ts

@@ -233,10 +233,19 @@ export function getSentryExamplePageContents(options: {
     options.useClient ? '"use client";\n\n' : ''
   }import Head from "next/head";
 import * as Sentry from "@sentry/nextjs";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 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>
@@ -283,11 +292,16 @@ export default function Page() {
           <p className="success">
             Sample error was sent to Sentry.
           </p>
+        ) : !isConnected ? (
+          <div className="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/nextjs/troubleshooting/#the-sdk-is-not-sending-any-data">the troubleshooting guide</a>.</p>
+          </div>
         ) : (
           <div className="success_placeholder" />
         )}
 
         <div className="flex-spacer" />
+        
         <p className="description">
           Adblockers will prevent errors from being sent to Sentry.
         </p>
@@ -388,6 +402,22 @@ export default function Page() {
         .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>
   );