From 717f9b5da0e6d148f6aa8896138720bdf5d2f33a Mon Sep 17 00:00:00 2001
From: Kathryn Middleton
Date: Tue, 24 Oct 2023 10:35:15 -0400
Subject: [PATCH 1/5] Remove unsupported ga-lite and update existing calls to
GA4 (#6366)
* Cleanup old ga-lite tag and refactor GA4
* cleanup
* cleanup2
---
.env.production | 2 +-
package.json | 1 -
src/components/Layout/Feedback.tsx | 15 ++++++---------
src/pages/_app.tsx | 17 +++++++++--------
src/pages/_document.tsx | 4 ++--
src/siteConfig.js | 1 -
yarn.lock | 5 -----
7 files changed, 18 insertions(+), 27 deletions(-)
diff --git a/.env.production b/.env.production
index d25eb7dd4b..e403f96b68 100644
--- a/.env.production
+++ b/.env.production
@@ -1 +1 @@
-NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'
\ No newline at end of file
+NEXT_PUBLIC_GA_TRACKING_ID = 'G-B1E83PJ3RT'
\ No newline at end of file
diff --git a/package.json b/package.json
index 472ef79c91..b5e07d70a8 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,6 @@
"classnames": "^2.2.6",
"date-fns": "^2.16.1",
"debounce": "^1.2.1",
- "ga-lite": "^2.1.4",
"github-slugger": "^1.3.0",
"next": "^13.4.1",
"next-remote-watch": "^1.0.0",
diff --git a/src/components/Layout/Feedback.tsx b/src/components/Layout/Feedback.tsx
index 2bf9afe575..86fc91350a 100644
--- a/src/components/Layout/Feedback.tsx
+++ b/src/components/Layout/Feedback.tsx
@@ -4,7 +4,6 @@
import {useState} from 'react';
import {useRouter} from 'next/router';
-import {ga} from '../../utils/analytics';
export function Feedback({onSubmit = () => {}}: {onSubmit?: () => void}) {
const {asPath} = useRouter();
@@ -48,14 +47,12 @@ const thumbsDownIcon = (
function sendGAEvent(isPositive: boolean) {
// Fragile. Don't change unless you've tested the network payload
// and verified that the right events actually show up in GA.
- ga(
- 'send',
- 'event',
- 'button',
- 'feedback',
- window.location.pathname,
- isPositive ? '1' : '0'
- );
+ // @ts-ignore
+ gtag('event', 'feedback', {
+ event_category: 'button',
+ event_label: window.location.pathname,
+ value: isPositive ? 1 : 0,
+ });
}
function SendFeedback({onSubmit}: {onSubmit: () => void}) {
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 7173759688..5431f87cc9 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -5,7 +5,6 @@
import {useEffect} from 'react';
import {AppProps} from 'next/app';
import {useRouter} from 'next/router';
-import {ga} from '../utils/analytics';
import '@docsearch/css';
import '../styles/algolia.css';
@@ -13,13 +12,13 @@ import '../styles/index.css';
import '../styles/sandpack.css';
if (typeof window !== 'undefined') {
- if (process.env.NODE_ENV === 'production') {
- ga('create', process.env.NEXT_PUBLIC_GA_TRACKING_ID, 'auto');
- ga('send', 'pageview');
- }
const terminationEvent = 'onpagehide' in window ? 'pagehide' : 'unload';
window.addEventListener(terminationEvent, function () {
- ga('send', 'timing', 'JS Dependencies', 'unload');
+ // @ts-ignore
+ gtag('event', 'timing', {
+ event_label: 'JS Dependencies',
+ event: 'unload',
+ });
});
}
@@ -44,8 +43,10 @@ export default function MyApp({Component, pageProps}: AppProps) {
useEffect(() => {
const handleRouteChange = (url: string) => {
const cleanedUrl = url.split(/[\?\#]/)[0];
- ga('set', 'page', cleanedUrl);
- ga('send', 'pageview');
+ // @ts-ignore
+ gtag('event', 'pageview', {
+ event_label: cleanedUrl,
+ });
};
router.events.on('routeChangeComplete', handleRouteChange);
return () => {
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index d8fb0c6212..823ca0b718 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -11,11 +11,11 @@ const MyDocument = () => {
diff --git a/src/siteConfig.js b/src/siteConfig.js
index c676ca6e29..0ada6b934d 100644
--- a/src/siteConfig.js
+++ b/src/siteConfig.js
@@ -17,5 +17,4 @@ exports.siteConfig = {
apiKey: 'e8451218980a351815563de007648b00',
indexName: 'beta-react',
},
- googleAnalyticsTagId: 'G-B1E83PJ3RT',
};
diff --git a/yarn.lock b/yarn.lock
index 8a3183cd5a..c7b0f980e1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2765,11 +2765,6 @@ functional-red-black-tree@^1.0.1:
resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
-ga-lite@^2.1.4:
- version "2.1.4"
- resolved "https://registry.yarnpkg.com/ga-lite/-/ga-lite-2.1.4.tgz#f0c1fd3234bc44d8b15db640a93b34dbce84d43a"
- integrity sha512-OJqPbutD8SfgF8SebyLh0uHdpQH32d5TuviXao5yPjyO2sGW3Gm+ooDmOhvXITgPepwwKxzv7ZMVKk2/hg/+lg==
-
gensync@^1.0.0-beta.2:
version "1.0.0-beta.2"
resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
From bbdbaca1ef8b2e84bb660250703cb56400d3b83a Mon Sep 17 00:00:00 2001
From: Soichiro Miki
Date: Wed, 25 Oct 2023 04:06:25 +0900
Subject: [PATCH 2/5] Fixes related to "Your UI as a Tree" (#6374)
---
src/content/learn/describing-the-ui.md | 12 ++++++++++--
src/content/learn/understanding-your-ui-as-a-tree.md | 2 +-
2 files changed, 11 insertions(+), 3 deletions(-)
diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md
index e8b6440aa9..167fe5b703 100644
--- a/src/content/learn/describing-the-ui.md
+++ b/src/content/learn/describing-the-ui.md
@@ -530,13 +530,21 @@ React uses trees to model the relationships between components and modules.
A React render tree is a representation of the parent and child relationship between components.
-An example React render tree.
+
+
+An example React render tree.
+
+
Components near the top of the tree, near the root component, are considered top-level components. Components with no child components are leaf components. This categorization of components is useful for understanding data flow and rendering performance.
Modelling the relationship between JavaScript modules is another useful way to understand your app. We refer to it as a module dependency tree.
-An example module dependency tree.
+
+
+An example module dependency tree.
+
+
A dependency tree is often used by build tools to bundle all the relevant JavaScript code for the client to download and render. A large bundle size regresses user experience for React apps. Understanding the module dependency tree is helpful to debug such issues.
diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md
index 2a5a24b85c..98f60cea8c 100644
--- a/src/content/learn/understanding-your-ui-as-a-tree.md
+++ b/src/content/learn/understanding-your-ui-as-a-tree.md
@@ -253,7 +253,7 @@ With conditional rendering, across different renders, the render tree may render
In this example, depending on what `inspiration.type` is, we may render `` or ``. The render tree may be different for each render pass.
-Although render trees may differ across render pases, these trees are generally helpful for identifying what the top-level and leaf components are in a React app. Top-level components are the components nearest to the root component and affect the rendering performance of all the components beneath them and often contain the most complexity. Leaf components are near the bottom of the tree and have no child components and are often frequently re-rendered.
+Although render trees may differ across render passes, these trees are generally helpful for identifying what the *top-level* and *leaf components* are in a React app. Top-level components are the components nearest to the root component and affect the rendering performance of all the components beneath them and often contain the most complexity. Leaf components are near the bottom of the tree and have no child components and are often frequently re-rendered.
Identifying these categories of components are useful for understanding data flow and performance of your app.
From 63f947024966a71370b3b9ba131fb78f8ced7c59 Mon Sep 17 00:00:00 2001
From: Kathryn Middleton
Date: Tue, 24 Oct 2023 14:26:01 -0700
Subject: [PATCH 3/5] Add Error Boundary to useTransition API docs (#6354)
* Add Error Boundary to useTransition docs
* add Error Boundary to useTransition
* Use Canary
* Add Error Boundary to useTransition API docs
* Update src/components/MDX/Sandpack/Preview.tsx
Co-authored-by: Jan Kassens
* Update src/content/reference/react/useTransition.md
Co-authored-by: Luna
* Update src/content/reference/react/useTransition.md
Co-authored-by: Luna
* Add Error Boundary to useTransition docs
* add Error Boundary to useTransition
* Use Canary
* Add Error Boundary to useTransition API docs
* Update src/components/MDX/Sandpack/Preview.tsx
Co-authored-by: Jan Kassens
* Update src/content/reference/react/useTransition.md
Co-authored-by: Luna
* Update src/content/reference/react/useTransition.md
Co-authored-by: Luna
* Address comments and update usage example
* Address comments and update usage example
* Update src/content/reference/react/useTransition.md
Co-authored-by: Luna
---------
Co-authored-by: Jan Kassens
Co-authored-by: Luna
---
src/components/MDX/Sandpack/Preview.tsx | 6 +
src/content/reference/react/useTransition.md | 111 +++++++++++++++++--
src/sidebarReference.json | 3 +-
3 files changed, 111 insertions(+), 9 deletions(-)
diff --git a/src/components/MDX/Sandpack/Preview.tsx b/src/components/MDX/Sandpack/Preview.tsx
index 8d83d98678..059645550c 100644
--- a/src/components/MDX/Sandpack/Preview.tsx
+++ b/src/components/MDX/Sandpack/Preview.tsx
@@ -52,6 +52,12 @@ export function Preview({
rawError = null;
}
+ // When throwing a new Error in Sandpack - we want to disable the dev error dialog
+ // to show the Error Boundary fallback
+ if (rawError && rawError.message.includes(`throw Error('Example error')`)) {
+ rawError = null;
+ }
+
// Memoized because it's fed to debouncing.
const firstLintError = useMemo(() => {
if (lintErrors.length === 0) {
diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md
index a6fcde7107..1d808aac25 100644
--- a/src/content/reference/react/useTransition.md
+++ b/src/content/reference/react/useTransition.md
@@ -1,5 +1,6 @@
---
title: useTransition
+canary: true
---
@@ -151,7 +152,7 @@ export default function TabContainer() {
function selectTab(nextTab) {
startTransition(() => {
- setTab(nextTab);
+ setTab(nextTab);
});
}
@@ -823,7 +824,7 @@ function use(promise) {
reason => {
promise.status = 'rejected';
promise.reason = reason;
- },
+ },
);
throw promise;
}
@@ -1017,7 +1018,7 @@ function use(promise) {
reason => {
promise.status = 'rejected';
promise.reason = reason;
- },
+ },
);
throw promise;
}
@@ -1288,7 +1289,7 @@ function use(promise) {
reason => {
promise.status = 'rejected';
promise.reason = reason;
- },
+ },
);
throw promise;
}
@@ -1332,7 +1333,7 @@ function use(promise) {
reason => {
promise.status = 'rejected';
promise.reason = reason;
- },
+ },
);
throw promise;
}
@@ -1379,9 +1380,9 @@ async function getBio() {
setTimeout(resolve, 500);
});
- return `The Beatles were an English rock band,
- formed in Liverpool in 1960, that comprised
- John Lennon, Paul McCartney, George Harrison
+ return `The Beatles were an English rock band,
+ formed in Liverpool in 1960, that comprised
+ John Lennon, Paul McCartney, George Harrison
and Ringo Starr.`;
}
@@ -1501,6 +1502,100 @@ main {
---
+### Displaying an error to users with a error boundary {/*displaying-an-error-to-users-with-error-boundary*/}
+
+
+
+Error Boundary for useTransition is currently only available in React's canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
+
+
+
+If a function passed to `startTransition` throws an error, you can display an error to your user with an [error boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). To use an error boundary, wrap the component where you are calling the `useTransition` in an error boundary. Once the function passed to `startTransition` errors, the fallback for the error boundary will be displayed.
+
+
+
+```js AddCommentContainer.js active
+import { useTransition } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+
+export function AddCommentContainer() {
+ return (
+ ⚠️Something went wrong}>
+
+
+ );
+}
+
+function addComment(comment) {
+ // For demonstration purposes to show Error Boundary
+ if(comment == null){
+ throw Error('Example error')
+ }
+}
+
+function AddCommentButton() {
+ const [pending, startTransition] = useTransition();
+
+ return (
+
+ );
+}
+```
+
+```js App.js hidden
+import { AddCommentContainer } from "./AddCommentContainer.js";
+
+export default function App() {
+ return ;
+}
+```
+
+```js index.js hidden
+// TODO: update to import from stable
+// react instead of canary once the `use`
+// Hook is in a stable release of React
+import React, { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './styles.css';
+
+// TODO: update this example to use
+// the Codesandbox Server Component
+// demo environment once it is created
+import App from './App';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+
+
+
+);
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "canary",
+ "react-dom": "canary",
+ "react-scripts": "^5.0.0",
+ "react-error-boundary": "4.0.3"
+ },
+ "main": "/index.js"
+}
+```
+
+
+---
+
## Troubleshooting {/*troubleshooting*/}
### Updating an input in a transition doesn't work {/*updating-an-input-in-a-transition-doesnt-work*/}
diff --git a/src/sidebarReference.json b/src/sidebarReference.json
index 3c8daf71ab..acc93328ac 100644
--- a/src/sidebarReference.json
+++ b/src/sidebarReference.json
@@ -73,7 +73,8 @@
},
{
"title": "useTransition",
- "path": "/reference/react/useTransition"
+ "path": "/reference/react/useTransition",
+ "canary": true
}
]
},
From 2779615e647f3a99d95b6daf072426e222d5fdd3 Mon Sep 17 00:00:00 2001
From: Sophie Alpert
Date: Tue, 24 Oct 2023 15:00:26 -0700
Subject: [PATCH 4/5] Warn about low entropy in taintUniqueValue.md (#6379)
* Warn about low entropy in taintUniqueValue.md
* Update src/content/reference/react/experimental_taintUniqueValue.md
Co-authored-by: Jan Kassens
---------
Co-authored-by: Jan Kassens
---
src/content/reference/react/experimental_taintUniqueValue.md | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/content/reference/react/experimental_taintUniqueValue.md b/src/content/reference/react/experimental_taintUniqueValue.md
index a67eebf77c..e26c29bfec 100644
--- a/src/content/reference/react/experimental_taintUniqueValue.md
+++ b/src/content/reference/react/experimental_taintUniqueValue.md
@@ -67,7 +67,8 @@ experimental_taintUniqueValue(
#### Caveats {/*caveats*/}
-- Deriving new values from tainted values can compromise tainting protection. New values created by uppercasing tainted values, concatenating tainted string values into a larger string, converting tainted values to base64, substringing tainted values, and other similar transformations are not tainted unless you explicity call `taintUniqueValue` on these newly created values.
+* Deriving new values from tainted values can compromise tainting protection. New values created by uppercasing tainted values, concatenating tainted string values into a larger string, converting tainted values to base64, substringing tainted values, and other similar transformations are not tainted unless you explicity call `taintUniqueValue` on these newly created values.
+* Do not use `taintUniqueValue` to protect low-entropy values such as PIN codes or phone numbers. If any value in a request is controlled by an attacker, they could infer which value is tainted by enumerating all possible values of the secret.
---
From a05681733f36c8d0b030df957113cc2d8969affa Mon Sep 17 00:00:00 2001
From: Xavi Lee
Date: Wed, 25 Oct 2023 08:58:47 +0800
Subject: [PATCH 5/5] fix conflicts
---
src/content/learn/describing-the-ui.md | 16 ++++------------
.../learn/understanding-your-ui-as-a-tree.md | 4 ----
.../react/experimental_taintUniqueValue.md | 6 +-----
src/content/reference/react/useTransition.md | 4 ----
4 files changed, 5 insertions(+), 25 deletions(-)
diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md
index 29b894ad8b..a0ee098f3c 100644
--- a/src/content/learn/describing-the-ui.md
+++ b/src/content/learn/describing-the-ui.md
@@ -533,29 +533,21 @@ React 使用树形关系建模以展示组件和模块之间的关系。
React 渲染树是组件之间父子关系的表示。
-<<<<<<< HEAD
-示例的 React 渲染树
-=======
-
+
-An example React render tree.
+示例的 React 渲染树
->>>>>>> 2779615e647f3a99d95b6daf072426e222d5fdd3
位于树顶部、靠近根组件的组件被视为顶层组件。没有子组件的组件被称为叶子组件。对组件的这种分类对于理解数据流和渲染性能非常有用。
对 JavaScript 模块之间的关系进行建模是了解应用程序的另一种有用方式。我们将其称为模块依赖树。
-<<<<<<< HEAD
-示例的模块依赖树
-=======
-
+
-An example module dependency tree.
+示例的模块依赖树
->>>>>>> 2779615e647f3a99d95b6daf072426e222d5fdd3
构建工具经常使用依赖树来捆绑客户端下载和渲染所需的所有 JavaScript 代码。对于 React 应用程序，打包大小会导致用户体验退化。了解模块依赖树有助于调试此类问题。
diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md
index a22bb7607b..484f3156df 100644
--- a/src/content/learn/understanding-your-ui-as-a-tree.md
+++ b/src/content/learn/understanding-your-ui-as-a-tree.md
@@ -252,11 +252,7 @@ export default [
在这个示例中，根据 `inspiration.type` 的值可能会渲染 `` 或 ``。每次渲染过程的渲染树可能都不同。
-<<<<<<< HEAD
尽管渲染树可能在不同的渲染过程中有所不同，但通常这些树有助于识别 React 应用程序中的顶级和叶子组件。顶级组件是离根组件最近的组件，它们影响其下所有组件的渲染性能，通常包含最多复杂性。叶子组件位于树的底部，没有子组件，通常会频繁重新渲染。
-=======
-Although render trees may differ across render passes, these trees are generally helpful for identifying what the *top-level* and *leaf components* are in a React app. Top-level components are the components nearest to the root component and affect the rendering performance of all the components beneath them and often contain the most complexity. Leaf components are near the bottom of the tree and have no child components and are often frequently re-rendered.
->>>>>>> 2779615e647f3a99d95b6daf072426e222d5fdd3
识别这些组件类别有助于理解应用程序的数据流和性能。
diff --git a/src/content/reference/react/experimental_taintUniqueValue.md b/src/content/reference/react/experimental_taintUniqueValue.md
index efdd30b92a..9cf7db206a 100644
--- a/src/content/reference/react/experimental_taintUniqueValue.md
+++ b/src/content/reference/react/experimental_taintUniqueValue.md
@@ -67,12 +67,8 @@ experimental_taintUniqueValue(
#### 注意 {/*caveats*/}
-<<<<<<< HEAD
-- 从受标记的值派生新值可能会破坏标记保护。通过将受标记的值大写、将受标记的字符串值连接成较大的字符串、将受标记的值转换为 base64、对受标记的值进行子字符串操作以及其他类似的转换来创建的新值，除非明确调用 `taintUniqueValue` 标记这些新创建的值，否则它们不会受到标记。
-=======
-* Deriving new values from tainted values can compromise tainting protection. New values created by uppercasing tainted values, concatenating tainted string values into a larger string, converting tainted values to base64, substringing tainted values, and other similar transformations are not tainted unless you explicity call `taintUniqueValue` on these newly created values.
+* 从受标记的值派生新值可能会破坏标记保护。通过将受标记的值大写、将受标记的字符串值连接成较大的字符串、将受标记的值转换为 base64、对受标记的值进行子字符串操作以及其他类似的转换来创建的新值，除非明确调用 `taintUniqueValue` 标记这些新创建的值，否则它们不会受到标记。
* Do not use `taintUniqueValue` to protect low-entropy values such as PIN codes or phone numbers. If any value in a request is controlled by an attacker, they could infer which value is tainted by enumerating all possible values of the secret.
->>>>>>> 2779615e647f3a99d95b6daf072426e222d5fdd3
---
diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md
index 79e929cd3f..cdfa651dba 100644
--- a/src/content/reference/react/useTransition.md
+++ b/src/content/reference/react/useTransition.md
@@ -1502,9 +1502,6 @@ main {
---
-<<<<<<< HEAD
-## 疑难解答 {/*troubleshooting*/}
-=======
### Displaying an error to users with a error boundary {/*displaying-an-error-to-users-with-error-boundary*/}
@@ -1600,7 +1597,6 @@ root.render(
---
## Troubleshooting {/*troubleshooting*/}
->>>>>>> 2779615e647f3a99d95b6daf072426e222d5fdd3
### 在 transition 中无法更新输入框内容 {/*updating-an-input-in-a-transition-doesnt-work*/}