Skip to content

Commit defae97

Browse files
justin808claude
andcommitted
docs: Address code review feedback on improved error messages
Addressed all 5 code review comments: 1. Updated pack generation docs to mention Shakapacker precompile hook 2. Added layout instructions showing javascript_pack_tag and stylesheet_pack_tag 3. Fixed PackUtils reference to correct PackerUtils 4. Clarified "catch errors" to specify React component errors, hydration mismatches, and SSR-specific issues 5. Removed COMMON_COMPONENT_NAMES constant - these generic component names don't belong in a framework-level library All SmartError tests continue to pass. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent d139027 commit defae97

File tree

2 files changed

+21
-24
lines changed

2 files changed

+21
-24
lines changed

docs/guides/improved-error-messages.md

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ React on Rails supports automatic bundling, which eliminates the need for manual
3939
```
4040

4141
3. **Generate bundles:**
42+
Bundles are automatically generated during asset precompilation via the Shakapacker precompile hook. For manual generation during development:
4243
```bash
4344
bundle exec rake react_on_rails:generate_packs
4445
```
@@ -57,7 +58,7 @@ Component 'HelloWorld' not found
5758

5859
**After:**
5960

60-
```
61+
````
6162
❌ React on Rails Error
6263
6364
🔍 Problem:
@@ -93,6 +94,13 @@ If you prefer manual registration:
9394
9495
2. Import the component:
9596
import HelloWorld from './components/HelloWorld';
97+
98+
3. Include the bundle in your layout (e.g., `app/views/layouts/application.html.erb`):
99+
```erb
100+
<%= javascript_pack_tag 'application' %>
101+
<%= stylesheet_pack_tag 'application' %>
102+
````
103+
96104
```
97105
98106
### Enhanced SSR Errors
@@ -108,6 +116,7 @@ Server-side rendering errors now include:
108116
**Example SSR Error:**
109117
110118
```
119+
111120
❌ React on Rails Server Rendering Error
112121

113122
Component: HelloWorldApp
@@ -123,13 +132,14 @@ The component tried to access 'window' which doesn't exist on the server.
123132

124133
Solutions:
125134
• Wrap browser API calls in useEffect:
126-
useEffect(() => { /* DOM operations here */ }, [])
135+
useEffect(() => { /_ DOM operations here _/ }, [])
127136

128137
• Check if running in browser:
129-
if (typeof window !== 'undefined') { /* browser code */ }
138+
if (typeof window !== 'undefined') { /_ browser code _/ }
130139

131140
• Use dynamic import for browser-only code
132-
```
141+
142+
````
133143
134144
## Ruby Configuration
135145
@@ -142,10 +152,10 @@ raise ReactOnRails::SmartError.new(
142152
error_type: :component_not_registered,
143153
component_name: "MyComponent",
144154
additional_context: {
145-
available_components: ReactOnRails::WebpackerUtils.registered_components
155+
available_components: ReactOnRails::PackerUtils.registered_components
146156
}
147157
)
148-
```
158+
````
149159

150160
### Error Types
151161

@@ -160,7 +170,7 @@ Available error types:
160170
## Best Practices
161171

162172
1. **Prefer auto-bundling** for new components to avoid registration issues
163-
2. **Use server-side rendering** to catch errors early in development
173+
2. **Use server-side rendering** to catch React component errors, hydration mismatches, and SSR-specific issues (like accessing browser APIs) during development before they reach production
164174
3. **Check error messages carefully** - they include specific solutions
165175
4. **Keep components in standard locations** for better error detection
166176

lib/react_on_rails/smart_error.rb

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,6 @@ module ReactOnRails
88
class SmartError < Error
99
attr_reader :component_name, :error_type, :props, :js_code, :additional_context
1010

11-
COMMON_COMPONENT_NAMES = %w[
12-
App
13-
HelloWorld
14-
Header
15-
Footer
16-
Navigation
17-
Sidebar
18-
Dashboard
19-
UserProfile
20-
ProductList
21-
ProductCard
22-
LoginForm
23-
RegisterForm
24-
].freeze
25-
2611
def initialize(error_type:, component_name: nil, props: nil, js_code: nil, **additional_context)
2712
@error_type = error_type
2813
@component_name = component_name
@@ -310,8 +295,10 @@ def troubleshooting_section
310295
def find_similar_components(name)
311296
return [] unless additional_context[:available_components]
312297

313-
available = additional_context[:available_components] + COMMON_COMPONENT_NAMES
314-
available.uniq!
298+
available = additional_context[:available_components]
299+
return [] if available.empty?
300+
301+
available = available.uniq
315302

316303
# Simple similarity check - could be enhanced with Levenshtein distance
317304
similar = available.select do |comp|

0 commit comments

Comments
 (0)