From 6db56a78ff8bd026e58d6be41383e109862d0e9d Mon Sep 17 00:00:00 2001 From: Stefanos Anagnostou Date: Fri, 8 Nov 2024 15:13:44 +0200 Subject: [PATCH 1/8] fix(expo): Stop silencing network errors when on Expo --- .changeset/two-bags-rhyme.md | 6 ++++++ packages/clerk-js/src/core/resources/Base.ts | 6 +++++- 2 files changed, 11 insertions(+), 1 deletion(-) create mode 100644 .changeset/two-bags-rhyme.md diff --git a/.changeset/two-bags-rhyme.md b/.changeset/two-bags-rhyme.md new file mode 100644 index 00000000000..8c13b2506b0 --- /dev/null +++ b/.changeset/two-bags-rhyme.md @@ -0,0 +1,6 @@ +--- +'@clerk/clerk-js': patch +--- + +Stop silencing network errors when on Expo. + diff --git a/packages/clerk-js/src/core/resources/Base.ts b/packages/clerk-js/src/core/resources/Base.ts index 7f032cd8c40..d462fcdfdd4 100644 --- a/packages/clerk-js/src/core/resources/Base.ts +++ b/packages/clerk-js/src/core/resources/Base.ts @@ -37,7 +37,7 @@ export abstract class BaseResource { try { fapiResponse = await BaseResource.fapiClient.request(requestInit); } catch (e) { - if (!isValidBrowserOnline()) { + if (!isValidBrowserOnline() && !this.isExpo()) { console.warn(e); return null; } else { @@ -157,4 +157,8 @@ export abstract class BaseResource { const { rotatingTokenNonce } = params || {}; return this._baseGet({ forceUpdateClient: true, rotatingTokenNonce }); } + + private static isExpo(): boolean { + return BaseResource.clerk?.sdkMetadata?.name === '@clerk/clerk-expo'; + } } From 4bb11cf14e85f7878f95557b1b29372f404f28a3 Mon Sep 17 00:00:00 2001 From: Stefanos Anagnostou Date: Mon, 11 Nov 2024 18:22:20 +0200 Subject: [PATCH 2/8] Update .changeset/two-bags-rhyme.md --- .changeset/two-bags-rhyme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/two-bags-rhyme.md b/.changeset/two-bags-rhyme.md index 8c13b2506b0..4b73bb05dbd 100644 --- a/.changeset/two-bags-rhyme.md +++ b/.changeset/two-bags-rhyme.md @@ -2,5 +2,5 @@ '@clerk/clerk-js': patch --- -Stop silencing network errors when on Expo. +Bubble up the network errors on Expo. From eab4eb7f64c13eed2828e939c67e4e59b651fe6e Mon Sep 17 00:00:00 2001 From: Stefanos Anagnostou Date: Mon, 11 Nov 2024 20:28:34 +0200 Subject: [PATCH 3/8] Introduce `experimental.rethrowOfflineNetworkErrors` Clerk Option --- .changeset/fifty-bananas-dress.md | 10 ++++++++++ packages/clerk-js/src/core/resources/Base.ts | 7 ++++--- packages/expo/src/provider/ClerkProvider.tsx | 9 ++++++++- packages/types/src/clerk.ts | 1 + 4 files changed, 23 insertions(+), 4 deletions(-) create mode 100644 .changeset/fifty-bananas-dress.md diff --git a/.changeset/fifty-bananas-dress.md b/.changeset/fifty-bananas-dress.md new file mode 100644 index 00000000000..5b080673f4c --- /dev/null +++ b/.changeset/fifty-bananas-dress.md @@ -0,0 +1,10 @@ +--- +'@clerk/clerk-js': patch +'@clerk/types': patch +'@clerk/clerk-expo': patch +--- + +Introduce the `experimental.rethrowOfflineNetworkErrors` option to the `ClerkProvider` component. + +When set to `true`, Clerk will rethrow network errors that occur while the user is offline. +On Expo, the EXPO_PUBLIC_CLERK_EXPERIMENTAL_RETHROW_OFFLINE_NETWORK_ERRORS environment variable is used. diff --git a/packages/clerk-js/src/core/resources/Base.ts b/packages/clerk-js/src/core/resources/Base.ts index 8d9dd15c61d..63b6cbc9360 100644 --- a/packages/clerk-js/src/core/resources/Base.ts +++ b/packages/clerk-js/src/core/resources/Base.ts @@ -62,7 +62,7 @@ export abstract class BaseResource { try { fapiResponse = await BaseResource.fapiClient.request(requestInit); } catch (e) { - if (!isValidBrowserOnline() && !this.isExpo()) { + if (!isValidBrowserOnline() && !this.shouldRethrowOfflineNetworkErrors()) { console.warn(e); return null; } else { @@ -188,7 +188,8 @@ export abstract class BaseResource { return this._baseGet({ forceUpdateClient: true, rotatingTokenNonce }); } - private static isExpo(): boolean { - return BaseResource.clerk?.sdkMetadata?.name === '@clerk/clerk-expo'; + private static shouldRethrowOfflineNetworkErrors(): boolean { + const experimental = BaseResource.clerk?.__internal_getOption?.('experimental'); + return experimental?.rethrowOfflineNetworkErrors || false; } } diff --git a/packages/expo/src/provider/ClerkProvider.tsx b/packages/expo/src/provider/ClerkProvider.tsx index fee776b0349..a000d7c948a 100644 --- a/packages/expo/src/provider/ClerkProvider.tsx +++ b/packages/expo/src/provider/ClerkProvider.tsx @@ -29,8 +29,12 @@ const SDK_METADATA = { }; export function ClerkProvider(props: ClerkProviderProps): JSX.Element { - const { children, tokenCache, publishableKey, __experimental_passkeys, ...rest } = props; + const { children, tokenCache, publishableKey, __experimental_passkeys, experimental, ...rest } = props; const pk = publishableKey || process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY || process.env.CLERK_PUBLISHABLE_KEY || ''; + const rethrowOfflineNetworkErrors = + experimental?.rethrowOfflineNetworkErrors || + process.env.EXPO_PUBLIC_CLERK_EXPERIMENTAL_RETHROW_OFFLINE_NETWORK_ERRORS || + false; if (isWeb()) { // This is needed in order for useOAuth to work correctly on web. @@ -55,6 +59,9 @@ export function ClerkProvider(props: ClerkProviderProps): JSX.Element { : null } standardBrowser={!isNative()} + experimental={{ + rethrowOfflineNetworkErrors, + }} > {children} diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts index d1af0b71af6..48d89b411dd 100644 --- a/packages/types/src/clerk.ts +++ b/packages/types/src/clerk.ts @@ -740,6 +740,7 @@ export type ClerkOptions = ClerkOptionsNavigation & experimental?: Autocomplete< { persistClient: boolean; + rethrowOfflineNetworkErrors: boolean; }, Record >; From 123daa6313f2072c93583786a79ceb2b02cb68c9 Mon Sep 17 00:00:00 2001 From: Stefanos Anagnostou Date: Tue, 12 Nov 2024 14:01:49 +0200 Subject: [PATCH 4/8] Remove the env variable from Expo --- .changeset/fifty-bananas-dress.md | 1 - .changeset/two-bags-rhyme.md | 6 ------ packages/expo/src/provider/ClerkProvider.tsx | 9 +-------- 3 files changed, 1 insertion(+), 15 deletions(-) delete mode 100644 .changeset/two-bags-rhyme.md diff --git a/.changeset/fifty-bananas-dress.md b/.changeset/fifty-bananas-dress.md index 5b080673f4c..ec0bdf974fb 100644 --- a/.changeset/fifty-bananas-dress.md +++ b/.changeset/fifty-bananas-dress.md @@ -7,4 +7,3 @@ Introduce the `experimental.rethrowOfflineNetworkErrors` option to the `ClerkProvider` component. When set to `true`, Clerk will rethrow network errors that occur while the user is offline. -On Expo, the EXPO_PUBLIC_CLERK_EXPERIMENTAL_RETHROW_OFFLINE_NETWORK_ERRORS environment variable is used. diff --git a/.changeset/two-bags-rhyme.md b/.changeset/two-bags-rhyme.md deleted file mode 100644 index 4b73bb05dbd..00000000000 --- a/.changeset/two-bags-rhyme.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -'@clerk/clerk-js': patch ---- - -Bubble up the network errors on Expo. - diff --git a/packages/expo/src/provider/ClerkProvider.tsx b/packages/expo/src/provider/ClerkProvider.tsx index a000d7c948a..fee776b0349 100644 --- a/packages/expo/src/provider/ClerkProvider.tsx +++ b/packages/expo/src/provider/ClerkProvider.tsx @@ -29,12 +29,8 @@ const SDK_METADATA = { }; export function ClerkProvider(props: ClerkProviderProps): JSX.Element { - const { children, tokenCache, publishableKey, __experimental_passkeys, experimental, ...rest } = props; + const { children, tokenCache, publishableKey, __experimental_passkeys, ...rest } = props; const pk = publishableKey || process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY || process.env.CLERK_PUBLISHABLE_KEY || ''; - const rethrowOfflineNetworkErrors = - experimental?.rethrowOfflineNetworkErrors || - process.env.EXPO_PUBLIC_CLERK_EXPERIMENTAL_RETHROW_OFFLINE_NETWORK_ERRORS || - false; if (isWeb()) { // This is needed in order for useOAuth to work correctly on web. @@ -59,9 +55,6 @@ export function ClerkProvider(props: ClerkProviderProps): JSX.Element { : null } standardBrowser={!isNative()} - experimental={{ - rethrowOfflineNetworkErrors, - }} > {children} From ce58447b886171b8d3131b094e7818f2b641b2ba Mon Sep 17 00:00:00 2001 From: Stefanos Anagnostou Date: Tue, 12 Nov 2024 15:01:32 +0200 Subject: [PATCH 5/8] Fix changeset --- .changeset/fifty-bananas-dress.md | 1 - 1 file changed, 1 deletion(-) diff --git a/.changeset/fifty-bananas-dress.md b/.changeset/fifty-bananas-dress.md index ec0bdf974fb..88df6f486ce 100644 --- a/.changeset/fifty-bananas-dress.md +++ b/.changeset/fifty-bananas-dress.md @@ -1,7 +1,6 @@ --- '@clerk/clerk-js': patch '@clerk/types': patch -'@clerk/clerk-expo': patch --- Introduce the `experimental.rethrowOfflineNetworkErrors` option to the `ClerkProvider` component. From b069571c43a1227a1da0d7e0baafaab7745d760c Mon Sep 17 00:00:00 2001 From: Stefanos Anagnostou Date: Tue, 12 Nov 2024 16:57:52 +0200 Subject: [PATCH 6/8] Throw ClerkRuntimeError --- packages/clerk-js/src/core/resources/Base.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/clerk-js/src/core/resources/Base.ts b/packages/clerk-js/src/core/resources/Base.ts index 63b6cbc9360..2bb2dbcf4ef 100644 --- a/packages/clerk-js/src/core/resources/Base.ts +++ b/packages/clerk-js/src/core/resources/Base.ts @@ -5,7 +5,7 @@ import type { ClerkAPIErrorJSON, ClerkResourceJSON, ClerkResourceReloadParams, D import { clerkMissingFapiClientInResources } from '../errors'; import type { FapiClient, FapiRequestInit, FapiResponse, FapiResponseJSON, HTTPMethod } from '../fapiClient'; import type { Clerk } from './internal'; -import { ClerkAPIResponseError, Client } from './internal'; +import { ClerkAPIResponseError, ClerkRuntimeError, Client } from './internal'; export type BaseFetchOptions = ClerkResourceReloadParams & { forceUpdateClient?: boolean }; @@ -62,7 +62,11 @@ export abstract class BaseResource { try { fapiResponse = await BaseResource.fapiClient.request(requestInit); } catch (e) { - if (!isValidBrowserOnline() && !this.shouldRethrowOfflineNetworkErrors()) { + if (this.shouldRethrowOfflineNetworkErrors()) { + throw new ClerkRuntimeError(e?.message || e, { + code: 'network_error', + }); + } else if (!isValidBrowserOnline()) { console.warn(e); return null; } else { From c8b87b2867395774ee5802b03809331e13acbe23 Mon Sep 17 00:00:00 2001 From: Stefanos Anagnostou Date: Tue, 12 Nov 2024 20:06:31 +0200 Subject: [PATCH 7/8] Change changeset to minor --- .changeset/fifty-bananas-dress.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/fifty-bananas-dress.md b/.changeset/fifty-bananas-dress.md index 88df6f486ce..e2be565e20b 100644 --- a/.changeset/fifty-bananas-dress.md +++ b/.changeset/fifty-bananas-dress.md @@ -1,6 +1,6 @@ --- -'@clerk/clerk-js': patch -'@clerk/types': patch +'@clerk/clerk-js': minor +'@clerk/types': minor --- Introduce the `experimental.rethrowOfflineNetworkErrors` option to the `ClerkProvider` component. From a77fcda6715e8b0a663f9c112b7c2b4f4eb8b8c9 Mon Sep 17 00:00:00 2001 From: Stefanos Anagnostou Date: Wed, 13 Nov 2024 10:27:49 +0200 Subject: [PATCH 8/8] Add TODO comment --- packages/clerk-js/src/core/resources/Base.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/clerk-js/src/core/resources/Base.ts b/packages/clerk-js/src/core/resources/Base.ts index 2bb2dbcf4ef..8f4128aad68 100644 --- a/packages/clerk-js/src/core/resources/Base.ts +++ b/packages/clerk-js/src/core/resources/Base.ts @@ -62,6 +62,7 @@ export abstract class BaseResource { try { fapiResponse = await BaseResource.fapiClient.request(requestInit); } catch (e) { + // TODO: This should be the default behavior in the next major version, as long as we have a way to handle the requests more gracefully when offline if (this.shouldRethrowOfflineNetworkErrors()) { throw new ClerkRuntimeError(e?.message || e, { code: 'network_error',