From e1ee335f0464d943ee5410e0bcb07c1d122d9451 Mon Sep 17 00:00:00 2001 From: Simon Hellmayr Date: Tue, 15 Apr 2025 14:53:12 +0200 Subject: [PATCH 1/6] feat(nextjs): add connectivity check to example page --- CHANGELOG.md | 1 + src/nextjs/templates.ts | 73 ++++++++++++++++++++++++++++++++++++++--- 2 files changed, 69 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 93dbf6f5e..3af305322 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ - feat(cocoa): Update snippets to use new UI Profiling configureation ([#933](https://github.com/getsentry/sentry-wizard/pull/933)) - fix(react-native): Handles xcode build phase patching failure ([#866](https://github.com/getsentry/sentry-wizard/pull/866)) - feat(react-native): Add a Session Replay step ([#915](https://github.com/getsentry/sentry-wizard/pull/915)) +- feat(nextjs): Add connectivity check to example page([#XXX](https://github.com/getsentry/sentry-wizard/pull/XXX)) ## 4.6.0 diff --git a/src/nextjs/templates.ts b/src/nextjs/templates.ts index cfccdc8da..766b43ee8 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 (
@@ -246,9 +255,25 @@ export default function Page() {
+ {!isConnected && ( +
+
+ + + + + +
+
+

Sentry is currently unreachable

+

This may be due to an ad blocker or a configuration issue. For more information, see the troubleshooting guide.

+
+
+ )} +
- +

sentry-example-page @@ -288,9 +313,12 @@ export default function Page() { )}
-

- Adblockers will prevent errors from being sent to Sentry. -

+ + {isConnected && ( +

+ Adblockers will prevent errors from being sent to Sentry. +

+ )}

); From 4acb691cfe81a93dfbc78ada61d4616d9b9af385 Mon Sep 17 00:00:00 2001 From: Simon Hellmayr Date: Tue, 15 Apr 2025 15:07:32 +0200 Subject: [PATCH 2/6] use toast instead of banner --- CHANGELOG.md | 4 +-- src/nextjs/templates.ts | 77 +++++++++++++++++++++++++---------------- 2 files changed, 50 insertions(+), 31 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3af305322..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 @@ -11,7 +12,6 @@ - feat(cocoa): Update snippets to use new UI Profiling configureation ([#933](https://github.com/getsentry/sentry-wizard/pull/933)) - fix(react-native): Handles xcode build phase patching failure ([#866](https://github.com/getsentry/sentry-wizard/pull/866)) - feat(react-native): Add a Session Replay step ([#915](https://github.com/getsentry/sentry-wizard/pull/915)) -- feat(nextjs): Add connectivity check to example page([#XXX](https://github.com/getsentry/sentry-wizard/pull/XXX)) ## 4.6.0 diff --git a/src/nextjs/templates.ts b/src/nextjs/templates.ts index 766b43ee8..e424f7560 100644 --- a/src/nextjs/templates.ts +++ b/src/nextjs/templates.ts @@ -255,22 +255,6 @@ export default function Page() {
- {!isConnected && ( -
-
- - - - - -
-
-

Sentry is currently unreachable

-

This may be due to an ad blocker or a configuration issue. For more information, see the troubleshooting guide.

-
-
- )} -
@@ -314,13 +298,27 @@ export default function Page() {
- {isConnected && ( -

- Adblockers will prevent errors from being sent to Sentry. -

- )} +

+ Adblockers will prevent errors from being sent to Sentry. +

+ {!isConnected && ( +
+
+ + + + + +
+
+

Sentry is currently unreachable

+

This may be due to an ad blocker or a configuration issue. For more information, see the troubleshooting guide.

+
+
+ )} + ); From aba14eb2ca458e6f1eddfdf9dd82302073e6c21e Mon Sep 17 00:00:00 2001 From: Simon Hellmayr Date: Tue, 15 Apr 2025 15:08:12 +0200 Subject: [PATCH 3/6] what is that a doing there --- src/nextjs/templates.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/nextjs/templates.ts b/src/nextjs/templates.ts index e424f7560..83c190bc6 100644 --- a/src/nextjs/templates.ts +++ b/src/nextjs/templates.ts @@ -257,7 +257,7 @@ export default function Page() {
- +

sentry-example-page From b7b38698694df5da422c5f4a51e455b0dff2a5a5 Mon Sep 17 00:00:00 2001 From: Simon Hellmayr Date: Tue, 15 Apr 2025 15:08:39 +0200 Subject: [PATCH 4/6] whitspace --- src/nextjs/templates.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/nextjs/templates.ts b/src/nextjs/templates.ts index 83c190bc6..187192e05 100644 --- a/src/nextjs/templates.ts +++ b/src/nextjs/templates.ts @@ -297,7 +297,6 @@ export default function Page() { )}
-

Adblockers will prevent errors from being sent to Sentry.

From a1c48bf74351539e3839a90205b73edffac653c1 Mon Sep 17 00:00:00 2001 From: Simon Hellmayr Date: Tue, 15 Apr 2025 17:23:53 +0200 Subject: [PATCH 5/6] work in feedback; move to center, make less alarming and remove icon --- src/nextjs/templates.ts | 75 +++++++---------------------------------- 1 file changed, 12 insertions(+), 63 deletions(-) diff --git a/src/nextjs/templates.ts b/src/nextjs/templates.ts index 187192e05..6b9b44755 100644 --- a/src/nextjs/templates.ts +++ b/src/nextjs/templates.ts @@ -292,32 +292,21 @@ export default function Page() {

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 or a configuration issue. For more information, see the troubleshooting guide.

+
) : (
)}
+

Adblockers will prevent errors from being sent to Sentry.

- {!isConnected && ( -
-
- - - - - -
-
-

Sentry is currently unreachable

-

This may be due to an ad blocker or a configuration issue. For more information, see the troubleshooting guide.

-
-
- )} -