From eee2ba575df45fc688e8b19356c0bd689fbd96a1 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Fri, 25 Jun 2021 14:20:02 +0200 Subject: [PATCH 1/6] Bind sendBeacon to navigator Also ensures that even if the navigator.sendBeacon fails the fetch fallback is used. Fixes #23856. This is likely, as no reproduction was provided it was not possible to verify if it actually fixes the issue. --- packages/next/client/performance-relayer.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/next/client/performance-relayer.ts b/packages/next/client/performance-relayer.ts index 22ccf348cfbe8..3c08831a0d041 100644 --- a/packages/next/client/performance-relayer.ts +++ b/packages/next/client/performance-relayer.ts @@ -47,13 +47,22 @@ function onReport(metric: Metric): void { type: 'application/x-www-form-urlencoded', }) const vitalsUrl = 'https://vitals.vercel-insights.com/v1/vitals' - ;(navigator.sendBeacon && navigator.sendBeacon(vitalsUrl, blob)) || + const send = navigator.sendBeacon && navigator.sendBeacon.bind(navigator) + + function fallbackSend() { fetch(vitalsUrl, { body: blob, method: 'POST', credentials: 'omit', keepalive: true, }) + } + + try { + send(vitalsUrl, blob) || fallbackSend() + } catch (err) { + fallbackSend() + } } } From c2fd40030d9ecb7f616d3c23a5440bf337e878b8 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Sat, 10 Jul 2021 22:35:47 +0200 Subject: [PATCH 2/6] Check if send exists and catch fetch error --- packages/next/client/performance-relayer.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/next/client/performance-relayer.ts b/packages/next/client/performance-relayer.ts index 3c08831a0d041..db0222a0946c9 100644 --- a/packages/next/client/performance-relayer.ts +++ b/packages/next/client/performance-relayer.ts @@ -55,11 +55,15 @@ function onReport(metric: Metric): void { method: 'POST', credentials: 'omit', keepalive: true, - }) + }).catch(console.error) } try { - send(vitalsUrl, blob) || fallbackSend() + if (send) { + send(vitalsUrl, blob) + } else { + fallbackSend() + } } catch (err) { fallbackSend() } From 43131b4610d13dc2fcb4325df7bc105c9c5d4422 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Sat, 10 Jul 2021 22:38:42 +0200 Subject: [PATCH 3/6] Add comment as to why the bind is needed --- packages/next/client/performance-relayer.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/next/client/performance-relayer.ts b/packages/next/client/performance-relayer.ts index db0222a0946c9..582ae9b92fd3b 100644 --- a/packages/next/client/performance-relayer.ts +++ b/packages/next/client/performance-relayer.ts @@ -47,6 +47,8 @@ function onReport(metric: Metric): void { type: 'application/x-www-form-urlencoded', }) const vitalsUrl = 'https://vitals.vercel-insights.com/v1/vitals' + // Navigator has to be bound to ensure it does not error in some browsers + // https://xgwang.me/posts/you-may-not-know-beacon/#it-may-throw-error%2C-be-sure-to-catch const send = navigator.sendBeacon && navigator.sendBeacon.bind(navigator) function fallbackSend() { From c0422953897e37f5adb434f691df7374f69aec56 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Sat, 10 Jul 2021 22:41:39 +0200 Subject: [PATCH 4/6] Add comment about console.error usage --- packages/next/client/performance-relayer.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/next/client/performance-relayer.ts b/packages/next/client/performance-relayer.ts index 582ae9b92fd3b..5281740c7b8ea 100644 --- a/packages/next/client/performance-relayer.ts +++ b/packages/next/client/performance-relayer.ts @@ -57,6 +57,7 @@ function onReport(metric: Metric): void { method: 'POST', credentials: 'omit', keepalive: true, + // console.error is used here as when the fetch fails it does not affect functioning of the app }).catch(console.error) } From d74e75c9110e918016c8952d51a25ca2ed7698b0 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Mon, 12 Jul 2021 12:08:58 +0200 Subject: [PATCH 5/6] Update packages/next/client/performance-relayer.ts Co-authored-by: Steven --- packages/next/client/performance-relayer.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/next/client/performance-relayer.ts b/packages/next/client/performance-relayer.ts index 5281740c7b8ea..18506f96aa17a 100644 --- a/packages/next/client/performance-relayer.ts +++ b/packages/next/client/performance-relayer.ts @@ -62,11 +62,7 @@ function onReport(metric: Metric): void { } try { - if (send) { - send(vitalsUrl, blob) - } else { - fallbackSend() - } + send!(vitalsUrl, blob) } catch (err) { fallbackSend() } From 4f3a500b49cf7890116ce5b5ba035ef2e388b2aa Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Mon, 12 Jul 2021 12:10:34 +0200 Subject: [PATCH 6/6] Add why comment --- packages/next/client/performance-relayer.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/next/client/performance-relayer.ts b/packages/next/client/performance-relayer.ts index 18506f96aa17a..1ec9449b46f78 100644 --- a/packages/next/client/performance-relayer.ts +++ b/packages/next/client/performance-relayer.ts @@ -62,7 +62,8 @@ function onReport(metric: Metric): void { } try { - send!(vitalsUrl, blob) + // If send is undefined it'll throw as well. This reduces output code size. + send!(vitalsUrl, blob) } catch (err) { fallbackSend() }