diff --git a/src/components/DocsFooter.tsx b/src/components/DocsFooter.tsx index 2fdbb0460..5f2330e7e 100644 --- a/src/components/DocsFooter.tsx +++ b/src/components/DocsFooter.tsx @@ -27,7 +27,7 @@ export const DocsPageFooter = memo( <> {prevRoute?.path || nextRoute?.path ? ( <> -
+
{prevRoute?.path ? ( - - +
+ {type} - {title} - + + {title} + +
); } diff --git a/src/components/ErrorDecoderContext.tsx b/src/components/ErrorDecoderContext.tsx new file mode 100644 index 000000000..080969efe --- /dev/null +++ b/src/components/ErrorDecoderContext.tsx @@ -0,0 +1,23 @@ +// Error Decoder requires reading pregenerated error message from getStaticProps, +// but MDX component doesn't support props. So we use React Context to populate +// the value without prop-drilling. +// TODO: Replace with React.cache + React.use when migrating to Next.js App Router + +import {createContext, useContext} from 'react'; + +const notInErrorDecoderContext = Symbol('not in error decoder context'); + +export const ErrorDecoderContext = createContext< + | {errorMessage: string | null; errorCode: string | null} + | typeof notInErrorDecoderContext +>(notInErrorDecoderContext); + +export const useErrorDecoderParams = () => { + const params = useContext(ErrorDecoderContext); + + if (params === notInErrorDecoderContext) { + throw new Error('useErrorDecoder must be used in error decoder pages only'); + } + + return params; +}; diff --git a/src/components/Layout/Feedback.tsx b/src/components/Layout/Feedback.tsx index 8639ce12c..0bdbc6b7c 100644 --- a/src/components/Layout/Feedback.tsx +++ b/src/components/Layout/Feedback.tsx @@ -4,6 +4,7 @@ import {useState} from 'react'; import {useRouter} from 'next/router'; +import cn from 'classnames'; export function Feedback({onSubmit = () => {}}: {onSubmit?: () => void}) { const {asPath} = useRouter(); @@ -60,7 +61,11 @@ function sendGAEvent(isPositive: boolean) { function SendFeedback({onSubmit}: {onSubmit: () => void}) { const [isSubmitted, setIsSubmitted] = useState(false); return ( -
+

{isSubmitted ? 'Thank you for your feedback!' : 'Is this page useful?'}

diff --git a/src/components/MDX/ErrorDecoder.tsx b/src/components/MDX/ErrorDecoder.tsx new file mode 100644 index 000000000..daa713285 --- /dev/null +++ b/src/components/MDX/ErrorDecoder.tsx @@ -0,0 +1,107 @@ +import {useEffect, useState} from 'react'; +import {useErrorDecoderParams} from '../ErrorDecoderContext'; +import cn from 'classnames'; + +function replaceArgs( + msg: string, + argList: Array, + replacer = '[missing argument]' +): string { + let argIdx = 0; + return msg.replace(/%s/g, function () { + const arg = argList[argIdx++]; + // arg can be an empty string: ?args[0]=&args[1]=count + return arg === undefined || arg === '' ? replacer : arg; + }); +} + +/** + * Sindre Sorhus + * Released under MIT license + * https://github.com/sindresorhus/linkify-urls/blob/edd75a64a9c36d7025f102f666ddbb6cf0afa7cd/index.js#L4C25-L4C137 + * + * The regex is used to extract URL from the string for linkify. + */ +const urlRegex = + /((? { + if (i % 2 === 1) { + return ( + + {message} + + ); + } + return message; + }); +} + +// `?args[]=foo&args[]=bar` +// or `// ?args[0]=foo&args[1]=bar` +function parseQueryString(search: string): Array { + const rawQueryString = search.substring(1); + if (!rawQueryString) { + return []; + } + + const args: Array = []; + + const queries = rawQueryString.split('&'); + for (let i = 0; i < queries.length; i++) { + const query = decodeURIComponent(queries[i]); + if (query.startsWith('args[')) { + args.push(query.slice(query.indexOf(']=') + 2)); + } + } + + return args; +} + +export default function ErrorDecoder() { + const {errorMessage} = useErrorDecoderParams(); + /** error messages that contain %s require reading location.search */ + const hasParams = errorMessage?.includes('%s'); + const [message, setMessage] = useState(() => + errorMessage ? urlify(errorMessage) : null + ); + + const [isReady, setIsReady] = useState(errorMessage == null || !hasParams); + + useEffect(() => { + if (errorMessage == null || !hasParams) { + return; + } + + setMessage( + urlify( + replaceArgs( + errorMessage, + parseQueryString(window.location.search), + '[missing argument]' + ) + ) + ); + setIsReady(true); + }, [hasParams, errorMessage]); + + return ( + + {message} + + ); +} diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx index cf12323bc..bf3705414 100644 --- a/src/components/MDX/MDXComponents.tsx +++ b/src/components/MDX/MDXComponents.tsx @@ -31,6 +31,8 @@ import {TocContext} from './TocContext'; import type {Toc, TocItem} from './TocContext'; import {TeamMember} from './TeamMember'; +import ErrorDecoder from './ErrorDecoder'; + function CodeStep({children, step}: {children: any; step: number}) { return ( + +In the minified production build of React, we avoid sending down full error messages in order to reduce the number of bytes sent over the wire. + + + +We highly recommend using the development build locally when debugging your app since it tracks additional debug info and provides helpful warnings about potential problems in your apps, but if you encounter an exception while using the production build, this page will reassemble the original error message. + +The full text of the error you just encountered is: + + + +This error occurs when you pass a BigInt value from a Server Component to a Client Component. diff --git a/src/content/errors/generic.md b/src/content/errors/generic.md new file mode 100644 index 000000000..27c3ca52d --- /dev/null +++ b/src/content/errors/generic.md @@ -0,0 +1,11 @@ + + +In the minified production build of React, we avoid sending down full error messages in order to reduce the number of bytes sent over the wire. + + + +We highly recommend using the development build locally when debugging your app since it tracks additional debug info and provides helpful warnings about potential problems in your apps, but if you encounter an exception while using the production build, this page will reassemble the original error message. + +The full text of the error you just encountered is: + + diff --git a/src/content/errors/index.md b/src/content/errors/index.md new file mode 100644 index 000000000..25746d25d --- /dev/null +++ b/src/content/errors/index.md @@ -0,0 +1,10 @@ + + +In the minified production build of React, we avoid sending down full error messages in order to reduce the number of bytes sent over the wire. + + + + +We highly recommend using the development build locally when debugging your app since it tracks additional debug info and provides helpful warnings about potential problems in your apps, but if you encounter an exception while using the production build, the error message will include just a link to the docs for the error. + +For an example, see: [https://react.dev/errors/149](/errors/421). diff --git a/src/content/learn/updating-arrays-in-state.md b/src/content/learn/updating-arrays-in-state.md index 5fa843301..a72d79c92 100644 --- a/src/content/learn/updating-arrays-in-state.md +++ b/src/content/learn/updating-arrays-in-state.md @@ -409,7 +409,6 @@ button { margin-left: 5px; } ```js import { useState } from 'react'; -let nextId = 3; const initialList = [ { id: 0, title: 'Big Bellies' }, { id: 1, title: 'Lunar Landscape' }, diff --git a/src/content/reference/react-dom/hooks/useFormState.md b/src/content/reference/react-dom/hooks/useFormState.md index 0a7550cda..1343d5a9d 100644 --- a/src/content/reference/react-dom/hooks/useFormState.md +++ b/src/content/reference/react-dom/hooks/useFormState.md @@ -104,7 +104,7 @@ function MyComponent() { フォームが送信されると、あなたが渡したアクション関数が呼び出されます。その返り値が、新たなフォームの state 現在値になります。 -あなたが渡すアクションは、新たな第 1 引数として、フォームの現在 stateを受け取ります。フォームが初めて送信されるとき、これはあなたが渡した初期 state になります。次回以降の送信では、アクションが前回呼び出されたときの返り値になります。残りの引数は `useFormState` を使用しなかった場合と同じです。 +あなたが渡すアクションは、新たな第 1 引数として、フォームのstate の現在値を受け取ります。フォームが初めて送信されるとき、これはあなたが渡した初期 state と等しくなります。次回以降の送信では、アクションが前回呼び出されたときの返り値になります。残りの引数は `useFormState` を使用しなかった場合と同じです。 ```js [[3, 1, "action"], [1, 1, "currentState"]] function action(currentState, formData) { diff --git a/src/content/reference/react/experimental_taintObjectReference.md b/src/content/reference/react/experimental_taintObjectReference.md index 335f659c6..b5b9e513d 100644 --- a/src/content/reference/react/experimental_taintObjectReference.md +++ b/src/content/reference/react/experimental_taintObjectReference.md @@ -64,11 +64,11 @@ experimental_taintObjectReference( #### Caveats {/*caveats*/} -- Recreating or cloning a tainted object creates a new untained object which may contain sensitive data. For example, if you have a tainted `user` object, `const userInfo = {name: user.name, ssn: user.ssn}` or `{...user}` will create new objects which are not tainted. `taintObjectReference` only protects against simple mistakes when the object is passed through to a Client Component unchanged. +- Recreating or cloning a tainted object creates a new untainted object which may contain sensitive data. For example, if you have a tainted `user` object, `const userInfo = {name: user.name, ssn: user.ssn}` or `{...user}` will create new objects which are not tainted. `taintObjectReference` only protects against simple mistakes when the object is passed through to a Client Component unchanged. -**Do not rely on just tainting for security.** Tainting an object doesn't prevent leaking of every possible derived value. For example, the clone of a tainted object will create a new untained object. Using data from a tainted object (e.g. `{secret: taintedObj.secret}`) will create a new value or object that is not tainted. Tainting is a layer of protection; a secure app will have multiple layers of protection, well designed APIs, and isolation patterns. +**Do not rely on just tainting for security.** Tainting an object doesn't prevent leaking of every possible derived value. For example, the clone of a tainted object will create a new untainted object. Using data from a tainted object (e.g. `{secret: taintedObj.secret}`) will create a new value or object that is not tainted. Tainting is a layer of protection; a secure app will have multiple layers of protection, well designed APIs, and isolation patterns. diff --git a/src/content/reference/react/forwardRef.md b/src/content/reference/react/forwardRef.md index 46711dd92..9e0ede662 100644 --- a/src/content/reference/react/forwardRef.md +++ b/src/content/reference/react/forwardRef.md @@ -42,7 +42,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { #### 注意点 {/*caveats*/} -* Strict Mode では、React は[レンダー関数が誤って純関数でなくなってしまう問題を見つけやすくする](#my-initializer-or-updater-function-runs-twice)ため、**レンダー関数を 2 回呼び出します**。これは開発環境専用の挙動であり、本番環境には影響しません。レンダー関数が純粋である場合（そうであるべきです）、これはコンポーネントのロジックに影響を与えません。呼び出しのうちの一方からの結果は無視されます。 +* Strict Mode では、React は[レンダー関数が誤って純関数でなくなってしまう問題を見つけやすくする](/reference/react/useState#my-initializer-or-updater-function-runs-twice)ため、**レンダー関数を 2 回呼び出します**。これは開発環境専用の挙動であり、本番環境には影響しません。レンダー関数が純粋である場合（そうであるべきです）、これはコンポーネントのロジックに影響を与えません。呼び出しのうちの一方からの結果は無視されます。 --- diff --git a/src/content/reference/react/useContext.md b/src/content/reference/react/useContext.md index b96981806..571cb8b32 100644 --- a/src/content/reference/react/useContext.md +++ b/src/content/reference/react/useContext.md @@ -457,7 +457,7 @@ function LoginForm() { const {setCurrentUser} = useContext(CurrentUserContext); const [firstName, setFirstName] = useState(''); const [lastName, setLastName] = useState(''); - const canLogin = firstName !== '' && lastName !== ''; + const canLogin = firstName.trim() !== '' && lastName.trim() !== ''; return ( <>