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
Copy file name to clipboardExpand all lines: .claude/docs/projects - react-improvements.md
+8-41Lines changed: 8 additions & 41 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -14,17 +14,12 @@
14
14
15
15
## FlareErrorBoundary: `fallback` property
16
16
17
-
### Inspiration
18
-
19
-
-[Sentry ErrorBoundary `fallback`](https://docs.sentry.io/platforms/javascript/guides/react/features/error-boundary/#fallback-ui-options) -- supports a static element and a render function receiving `{ error, componentStack, resetError }`
20
-
-[react-error-boundary](https://github.com/bvaughn/react-error-boundary) -- the most popular standalone error boundary library, supports `fallback`, `fallbackRender`, and `FallbackComponent` as three separate props
21
-
22
17
### Why
23
18
24
19
Without a `fallback` prop, the error boundary rendered nothing when an error was caught, giving users no way to
25
-
show a recovery UI. Every major competitor supports this.
20
+
show a recovery UI.
26
21
27
-
Our implementation combines the static and render function approaches into a single `fallback` prop (like Sentry), and
22
+
Our implementation combines the static and render function approaches into a single `fallback` prop, and
28
23
passes `componentStack` as a parsed string array rather than a raw string.
29
24
30
25
The `fallback` prop accepts either a static `ReactNode` or a render function. The render function receives the caught
@@ -53,12 +48,6 @@ The `fallback` prop accepts either a static `ReactNode` or a render function. Th
53
48
54
49
## FlareErrorBoundary: `onError` callback
55
50
56
-
### Inspiration
57
-
58
-
-[Sentry ErrorBoundary `onError`](https://docs.sentry.io/platforms/javascript/guides/react/features/error-boundary/#options-reference) -- called when the boundary encounters an error
59
-
-[react-error-boundary `onError`](https://github.com/bvaughn/react-error-boundary?tab=readme-ov-file#onerror) -- same concept, receives `(error, info)`
60
-
61
-
62
51
### Why
63
52
64
53
Developers need a hook to perform side effects when an error is caught -- logging to a secondary service,
@@ -77,12 +66,6 @@ showing a toast, updating app state, etc. This fires *after* the error has been
77
66
78
67
## FlareErrorBoundary: `beforeCapture` callback
79
68
80
-
### Inspiration
81
-
82
-
-[Sentry ErrorBoundary `beforeCapture`](https://docs.sentry.io/platforms/javascript/guides/react/features/error-boundary/#options-reference) -- the only competitor that offers this; receives the Sentry scope to set tags and context before the event is sent
83
-
84
-
No other competitor (Datadog, Bugsnag, Rollbar, LogRocket) provides an equivalent hook.
85
-
86
69
### Why
87
70
88
71
Fires *before* the error is reported to Flare, giving developers a chance to attach custom context, tags, or
@@ -102,11 +85,6 @@ the developer decide what to include rather than trying to automatically seriali
-[react-error-boundary `onReset`](https://github.com/bvaughn/react-error-boundary?tab=readme-ov-file#onreset) -- the primary inspiration; called when the boundary resets, receives details about what triggered the reset
108
-
-[Sentry ErrorBoundary `onReset`](https://github.com/getsentry/sentry-javascript/blob/master/packages/react/src/errorboundary.tsx) -- exists in Sentry's source code (receives `error, componentStack, eventId`) but is not documented in their official docs
109
-
110
88
### Why
111
89
112
90
When the error boundary resets (either via `resetErrorBoundary()` from the fallback or via `resetKeys`
@@ -129,14 +107,6 @@ error allows conditional cleanup based on what went wrong.
129
107
130
108
## FlareErrorBoundary: `resetKeys` property
131
109
132
-
### Inspiration
133
-
134
-
-[react-error-boundary `resetKeys`](https://github.com/bvaughn/react-error-boundary?tab=readme-ov-file#resetkeys) -- the sole source for this pattern; Sentry does not offer it
135
-
136
-
This is a feature unique to react-error-boundary that neither Sentry nor any other error tracking competitor provides.
137
-
When any value in the `resetKeys` array changes between renders (compared via `Object.is`), the boundary automatically
138
-
resets and re-renders its children.
139
-
140
110
### Why
141
111
142
112
Allows automatic reset of the error boundary when certain values change. Common use case: resetting the
@@ -165,19 +135,16 @@ function App() {
165
135
166
136
### Inspiration
167
137
168
-
-[Sentry `reactErrorHandler`](https://docs.sentry.io/platforms/javascript/guides/react/features/error-boundary/#error-hooks-vs-errorboundary) -- provides `Sentry.reactErrorHandler()` for all three React 19 root error hooks, with an optional callback parameter
169
138
-[React 19 `createRoot` error handling docs](https://react.dev/reference/react-dom/client/createRoot#parameters) -- the React docs describing `onCaughtError`, `onUncaughtError`, and `onRecoverableError`
170
139
171
-
Our API mirrors Sentry's approach: a wrapper function that accepts an optional callback. The key difference is that
172
-
`flareReactErrorHandler` also handles non-Error values (strings, objects) by converting them to proper Error instances
173
-
via `convertToError()`, making it more resilient to edge cases.
174
-
175
140
### Why
176
141
177
142
React 19 introduced `onCaughtError`, `onUncaughtError`, and `onRecoverableError` callbacks on `createRoot`.
178
-
These are root-level error handlers that catch errors *without* requiring an ErrorBoundary wrapper. At the time of
179
-
implementation, only Sentry and Datadog supported this -- Bugsnag, Rollbar, and LogRocket did not. This puts Flare ahead
180
-
of most competitors for React 19 support.
143
+
These are root-level error handlers that catch errors *without* requiring an ErrorBoundary wrapper.
144
+
145
+
`flareReactErrorHandler` is a wrapper function that accepts an optional callback. It also handles non-Error values
146
+
(strings, objects) by converting them to proper Error instances via `convertToError()`, making it more resilient to
0 commit comments