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 (
@@ -103,6 +112,10 @@ export default function SentryExamplePage() {

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.

+
) : (
)} @@ -214,6 +227,22 @@ const styles = \` .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; + } \`; `; }