-
Notifications
You must be signed in to change notification settings - Fork 164
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #623 from reactjs/sync-6bfde58c
Sync with react.dev @ 6bfde58
- Loading branch information
Showing
21 changed files
with
551 additions
and
153 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| import {useEffect, useState} from 'react'; | ||
| import {useErrorDecoderParams} from '../ErrorDecoderContext'; | ||
| import cn from 'classnames'; | ||
|
|
||
| function replaceArgs( | ||
| msg: string, | ||
| argList: Array<string | undefined>, | ||
| 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 <https://sindresorhus.com> | ||
| * 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 = | ||
| /((?<!\+)https?:\/\/(?:www\.)?(?:[-\w.]+?[.@][a-zA-Z\d]{2,}|localhost)(?:[-\w.:%+~#*$!?&/=@]*?(?:,(?!\s))*?)*)/g; | ||
|
|
||
| // When the message contains a URL (like https://fb.me/react-refs-must-have-owner), | ||
| // make it a clickable link. | ||
| function urlify(str: string): React.ReactNode[] { | ||
| const segments = str.split(urlRegex); | ||
|
|
||
| return segments.map((message, i) => { | ||
| if (i % 2 === 1) { | ||
| return ( | ||
| <a | ||
| key={i} | ||
| target="_blank" | ||
| className="underline" | ||
| rel="noopener noreferrer" | ||
| href={message}> | ||
| {message} | ||
| </a> | ||
| ); | ||
| } | ||
| return message; | ||
| }); | ||
| } | ||
|
|
||
| // `?args[]=foo&args[]=bar` | ||
| // or `// ?args[0]=foo&args[1]=bar` | ||
| function parseQueryString(search: string): Array<string | undefined> { | ||
| const rawQueryString = search.substring(1); | ||
| if (!rawQueryString) { | ||
| return []; | ||
| } | ||
|
|
||
| const args: Array<string | undefined> = []; | ||
|
|
||
| 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<React.ReactNode | null>(() => | ||
| 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 ( | ||
| <code | ||
| className={cn( | ||
| 'block bg-red-100 text-red-600 py-4 px-6 mt-5 rounded-lg', | ||
| isReady ? 'opacity-100' : 'opacity-0' | ||
| )}> | ||
| <b>{message}</b> | ||
| </code> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <Intro> | ||
|
|
||
| Dans le *build* de production minifié de React, nous évitons d'inclure les messages d'erreur complets afin de réduire le nombre d'octets transmis sur le réseau. | ||
|
|
||
| </Intro> | ||
|
|
||
| Nous vous recommandons fortement d'utiliser le *build* de développement en local lorsque vous déboguez votre appli, dans la mesure où il fournit des informations de débogage supplémentaires et des avertissements utiles sur des problèmes potentiels dans vos applis, mais si vous rencontrez une exception en utilisant le *build* de production, cette page reconstruira le message d'erreur original. | ||
|
|
||
| Le texte complet de l'erreur que vous venez de rencontrer est le suivant : | ||
|
|
||
| <ErrorDecoder /> | ||
|
|
||
| Cette erreur survient lorsque vous passez une valeur `BigInt` depuis un Composant Serveur vers un Composant Client. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| <Intro> | ||
|
|
||
| Dans le *build* de production minifié de React, nous évitons d'inclure les messages d'erreur complets afin de réduire le nombre d'octets transmis sur le réseau. | ||
|
|
||
| </Intro> | ||
|
|
||
| Nous vous recommandons fortement d'utiliser le *build* de développement en local lorsque vous déboguez votre appli, dans la mesure où il fournit des informations de débogage supplémentaires et des avertissements utiles sur des problèmes potentiels dans vos applis, mais si vous rencontrez une exception en utilisant le *build* de production, cette page reconstruira le message d'erreur original. | ||
|
|
||
| Le texte complet de l'erreur que vous venez de rencontrer est le suivant : | ||
|
|
||
| <ErrorDecoder /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| <Intro> | ||
|
|
||
| Dans le *build* de production minifié de React, nous évitons d'inclure les messages d'erreur complets afin de réduire le nombre d'octets transmis sur le réseau. | ||
|
|
||
| </Intro> | ||
|
|
||
| Nous vous recommandons fortement d'utiliser le *build* de développement en local lorsque vous déboguez votre appli, dans la mesure où il fournit des informations de débogage supplémentaires et des avertissements utiles sur des problèmes potentiels dans vos applis, mais si vous rencontrez une exception en utilisant le *build* de production, le message d'erreur incluera un lien vers la documentation pour cette erreur. | ||
|
|
||
| À titre d'exemple, consultez : [https://fr.react.dev/errors/421](/errors/421). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.