From 57a19575706cfef83e1d0a8b860c3ebc65b735b0 Mon Sep 17 00:00:00 2001
From: Abhijeet Prasad <aprasad@sentry.io>
Date: Fri, 4 Aug 2023 09:45:43 -0400
Subject: [PATCH] ref(js): Add note about react error boundary and
 CaptureConsole (#7592)

---
 .../platforms/configuration/integrations/plugin.mdx  | 12 +++++++++++-
 .../guides/react/features/error-boundary.mdx         |  6 ++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/includes/platforms/configuration/integrations/plugin.mdx b/src/includes/platforms/configuration/integrations/plugin.mdx
index 481c33c2adcd0..0e124abbed417 100644
--- a/src/includes/platforms/configuration/integrations/plugin.mdx
+++ b/src/includes/platforms/configuration/integrations/plugin.mdx
@@ -34,7 +34,17 @@ Available options:
 
 _Import name: `Sentry.Integrations.CaptureConsole`_
 
-This integration captures all `Console API` calls and redirects them to Sentry using the SDK's `captureMessage` or `captureException` call, depending on the log level. It then re-triggers to preserve default native behavior:
+This integration captures all `Console API` calls and redirects them to Sentry using the SDK's `captureMessage` or `captureException` call, depending on the log level. It then re-triggers to preserve default native behavior.
+
+<PlatformSection supported={["javascript.react"]}>
+
+<Alert level="warning" title="Note">
+
+By default React [logs all errors to the console](https://github.com/facebook/react/blob/493f72b0a7111b601c16b8ad8bc2649d82c184a0/packages/react-reconciler/src/ReactFiberErrorLogger.js#L85), even if you are using an React error boundary. This means that Sentry will capture the error through the `CaptureConsole` integration and not through the error boundary. We recommend disabling logging the `error` level if using React error boundaries and the `CaptureConsole` integration.
+
+</Alert>
+
+</PlatformSection>
 
 <PlatformContent includePath="configuration/capture-console" />
 
diff --git a/src/platforms/javascript/guides/react/features/error-boundary.mdx b/src/platforms/javascript/guides/react/features/error-boundary.mdx
index 42142382e7acc..8c684297b155f 100644
--- a/src/platforms/javascript/guides/react/features/error-boundary.mdx
+++ b/src/platforms/javascript/guides/react/features/error-boundary.mdx
@@ -59,6 +59,12 @@ class App extends React.Component {
 export default App;
 ```
 
+<Alert level="warning" title="Note">
+
+By default React [logs all errors to the console](https://github.com/facebook/react/blob/493f72b0a7111b601c16b8ad8bc2649d82c184a0/packages/react-reconciler/src/ReactFiberErrorLogger.js#L85), even if you are using a React error boundary. If you are using the `CaptureConsole` integration this means that Sentry will capture the error through the `CaptureConsole` integration and not through the error boundary.
+
+</Alert>
+
 ## Options
 
 The ErrorBoundary component exposes a variety of props that can be passed in for extra configuration. There are no required options, but we highly recommend that you set a fallback component.