Skip to content

Commit

Permalink
docs: added error reporting
Browse files Browse the repository at this point in the history
  • Loading branch information
ryanflorence committed Nov 20, 2024
1 parent 11ae512 commit 43c5387
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 2 deletions.
1 change: 0 additions & 1 deletion docs/how-to/error-boundary.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ import { Route } from "./+types/root";
export function ErrorBoundary({
error,
}: Route.ErrorBoundaryProps) {
console.error(error);
if (isRouteErrorResponse(error)) {
return (
<>
Expand Down
34 changes: 33 additions & 1 deletion docs/how-to/error-reporting.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,36 @@
---
title: Error Reporting
hidden: true
---

# Error Reporting

React Router catches errors in your route modules and sends them to [error boundaries](./error-boundary) to prevent blank pages when errors occur. However, ErrorBoundary isn't sufficient for logging and reporting errors. To access these caught errors, use the handleError export of the server entry module.

## 1. Reveal the server entry

If you don't see `entry.server.tsx` in your app directory, you're using a default entry. Reveal it with this cli command:

```shellscript nonumber
react-router reveal
```

## 2. Export your error handler

This function is called whenever React Router catches an error in your application on the server.

```tsx filename=entry.server.tsx
import { type HandleErrorFunction } from "react-router";

export const handleError: HandleErrorFunction = (
error,
{ request }
) => {
// React Router may abort some interrupted requests, don't log those
if (!request.signal.aborted) {
myReportError(error);

// make sure to still log the error so you can see it
console.error(error);
}
};
```

0 comments on commit 43c5387

Please sign in to comment.