diff --git a/CHANGELOG.md b/CHANGELOG.md index 93dbf6f5e..85248fa08 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/nextjs/templates.ts b/src/nextjs/templates.ts index cfccdc8da..b81767535 100644 --- a/src/nextjs/templates.ts +++ b/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 (
Sample error was sent to Sentry.
+ ) : !isConnected ? ( +The Sentry SDK is not able to reach Sentry right now - this may be due to an adblocker. For more information, see the troubleshooting guide.
+Adblockers will prevent errors from being sent to Sentry.
@@ -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; + } \`}