diff --git a/CHANGELOG.md b/CHANGELOG.md index 25013f85a..279688f27 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ - 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(remix): Add connectivity check to example page([#967](https://github.com/getsentry/sentry-wizard/pull/967)) ## 4.7.0 diff --git a/src/remix/sdk-example.ts b/src/remix/sdk-example.ts index 631a71fd5..7627afcaa 100644 --- a/src/remix/sdk-example.ts +++ b/src/remix/sdk-example.ts @@ -52,7 +52,7 @@ export function getSentryExamplePageContents(options: { : `https://${options.orgSlug}.sentry.io/issues/?project=${options.projectId}`; return `import * as Sentry from "@sentry/remix"; -import { useState } from "react"; +import { useState, useEffect } from "react"; export const meta = () => { return [ @@ -62,6 +62,15 @@ export const meta = () => { export default function SentryExamplePage() { const [hasSentError, setHasSentError] = useState(false); + const [isConnected, setIsConnected] = useState(true); + + useEffect(() => { + async function checkConnectivity() { + const result = await Sentry.diagnoseSdkConnectivity(); + setIsConnected(result !== 'sentry-unreachable'); + } + checkConnectivity(); + }, [setIsConnected]); 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.
+