You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This example illustrates the use of an explicit error boundary in React Server Components to handle errors thrown by a server component. It highlights that the implementation is similar to client components, with the key distinction being that the error boundary itself is a server component. The example utilizes the `react-error-boundary` library to create the error boundary, although it notes that developers can also create their own custom error boundaries.
2
+
3
+
The provided code defines a `PageWithBoundary` component that includes an `ErrorBoundary` wrapping an `ErrorComponent`. When the `ErrorComponent` throws an error, the `ErrorBoundary` catches it and renders a fallback component, `ErrorFallback`, which displays an error message. This approach enhances user experience by providing a clear indication of an error, rather than showing a generic error or nothing at all.
4
+
5
+
Overall, this example serves as a practical demonstration of error handling in React Server Components, emphasizing the importance of user-friendly error management.
This example demonstrates how to handle errors in React Server Components using the `error.tsx` convention. When a page throws an error, you can create an `error.tsx` file in the same or a parent directory to display a custom error message instead of the default error output.
2
+
3
+
The example includes a page component that intentionally throws an error within an `ErrorComponent`. Since the error is not caught within the component, the custom error message defined in `error.tsx` is rendered instead. The `error.tsx` file must be a client component because error handling occurs on the client side.
4
+
5
+
The provided code snippets illustrate the setup: the main page component includes an error-throwing component, while the `error.tsx` file defines a user-friendly error message. This approach enhances user experience by providing clearer feedback when errors occur, although it affects the entire app. The document also suggests that using explicit error boundaries can be a more refined way to manage errors, allowing other content on the page to remain visible.
This example demonstrates the behavior of a React page when an error is thrown in a component without an error boundary to catch it. The `NoHandling` component includes an `ErrorComponent` that intentionally throws an error. When this occurs, the error propagates up to the nearest error boundary, which in this case is the root of the application. The output differs between development and production modes, affecting the overall user experience negatively. The example suggests improving error handling by implementing either an explicit error boundary or using a dedicated error handling component.
This example demonstrates how to implement error handling and retry functionality in React Server Components using an error boundary. The main component, `ResettablePage`, includes a child component, `ErrorComponent`, which randomly throws an error 50% of the time. When an error occurs, a fallback UI defined in `error.tsx` is displayed, featuring a "Retry" button that allows users to reset the page without refreshing the browser.
2
+
3
+
The `ErrorComponent` simulates a delay before potentially throwing an error, while the `ErrorMessage` component manages the retry logic. It uses the `useRouter` hook from Next.js to refresh the page when the "Retry" button is clicked. A spinner is shown during the reset process to enhance user experience.
4
+
5
+
Key points include:
6
+
- The `reset()` function provided by Next.js only resets the state of the error boundary, not the page itself.
7
+
- The `router.refresh()` method is called to re-render the entire page, which is wrapped in a `startTransition` to prevent UI flickering.
8
+
- The example emphasizes the importance of providing users with a way to recover from errors gracefully.
9
+
10
+
For more advanced error handling, the document suggests implementing retry functionality at the component level instead of the page level.
This example demonstrates how to handle errors in React Server Components using an `ErrorBoundary`. The main component, `ResettablePage`, includes a child component, `ErrorComponent`, which has a 50% chance of throwing an error. If an error occurs, the `ErrorBoundary` catches it and displays an `ErrorFallback` component, which includes a Reset button.
2
+
3
+
The `ErrorComponent` simulates a delay before potentially throwing an error, and if it succeeds, it renders a message. The `ErrorFallback` component provides a user-friendly way to retry loading the component by calling a `retry` function that refreshes the page using `router.refresh()`. This function is wrapped in a `startTransition` to prevent UI flickering during the refresh process.
4
+
5
+
The example emphasizes that while the `resetErrorBoundary` function resets the error state, it does not refresh the page; instead, `router.refresh()` is necessary for that. This approach allows users to recover from errors without needing to refresh the entire page, enhancing the user experience.
This example demonstrates the use of React Server Components without employing `<Suspense>` boundaries or a `loading.tsx` file. It illustrates a scenario where data is fetched from a simulated fast database, which returns results in approximately 20 milliseconds. The code defines an asynchronous function, `slowDataLoad`, that mimics a database call and resolves after a short delay. The main component, `Page`, awaits this data and renders it alongside a header and a note about the absence of `<Suspense>`. The key takeaway is that for quick data fetches, the lack of `<Suspense>` does not negatively impact performance, but developers should be cautious as slower fetches could lead to degraded user experience.
This example demonstrates the use of React Server Components with `<Suspense>` boundaries to optimize UI rendering. It showcases how to render static content immediately while handling asynchronous data fetching in a non-blocking manner. The main component, `Page`, includes a `DataComponent` that simulates a 3-second data fetch. By wrapping `DataComponent` in a `<Suspense>` boundary, the static content is rendered right away, and a loading placeholder is displayed until the data is ready. Once the data is fetched, it is streamed to the browser as part of the same HTTP request. This approach allows for efficient rendering and improved user experience by minimizing wait times for the user.
0 commit comments