Log errors in RouteErrorBoundary to Sentry

Using captureRemixErrorBoundaryError() is what Sentry's docs recommend
for Remix, so that approach was chosen here. Remix provides handleError
approach, but their docs apply it only on server side (as we do in
entry.server.tsx), so it wasn't applied here.

Author: anttimaki

apps/cyberstorm-remix/app/commonComponents/ErrorBoundary/RouteErrorBoundary.tsx

@@ -1,5 +1,6 @@
-import type { JSX } from "react";
+import { useEffect, type JSX } from "react";
 import { isRouteErrorResponse, useRouteError } from "react-router";
+import { captureRemixErrorBoundaryError } from "@sentry/remix";
 
 import { ApiError } from "@thunderstore/thunderstore-api";
 
@@ -15,6 +16,17 @@ type StatusCode = number | "???";
 export function RouteErrorBoundary() {
   const error = useRouteError();
 
+  // Seeing double console logs caused by React's strictMode (that
+  // *should* happen only in dev mode) makes me want to ensure any
+  // rerenders don't get logged in Sentry twice.
+  useEffect(() => {
+    if (error && import.meta.env.PROD) {
+      captureRemixErrorBoundaryError(error);
+    } else if (error) {
+      console.error("Error boundary caught error", error);
+    }
+  }, [error]);
+
   let statusCode: StatusCode = "???";
 
   if (isRouteErrorResponse(error)) {

apps/cyberstorm-remix/docs/error-boundary.md

@@ -16,7 +16,6 @@ export { RouteErrorBoundary as ErrorBoundary } from "app/commonComponents/ErrorB
 
 - Consider replacing the error boundary in `root.tsx` with this one
 - Use `RouteErrorBoundary` in route components
-- Investigate if [error reporting](https://reactrouter.com/how-to/error-reporting) (via Sentry) should be done separately or implement as a part of the error boundary
 - Add "retry buttons" (e.g. reloading the page on 500 series of errors)
 - As `RouteErrorBoundary` is all-or-nothing solution when it comes to rendering, consider if there's a need for more granular non-route component level error boundaries. We might not need or want to use them, as error boundaries are intended more for render time errors, and any errors caused by user interaction should be handled by the component logic itself
   - If it turns out we don't want other error boundaries, consider renaming `RouteErrorBoundary` to just `ErrorBoundary`