Cursor rule

1---
2globs: *.astro
3description: Error handling patterns and best practices for Astro components
4---
5 
6# Astro Error Handling Patterns
7 
8## Frontmatter Error Handling
9 
10### Individual Operation Error Handling
11Wrap each async operation in its own try-catch to isolate failures:
12 
13```astro
14---
15let userData: { user: any; error?: string } = { user: null };
16let postsData: { posts: any[]; error?: string } = { posts: [] };
17let commentsData: { comments: any[]; error?: string } = { comments: [] };
18 
19if (db) {
20  try {
21    const service = DataService.getInstance(db);
22    
23    // Each operation isolated
24    try {
25      const user = await service.getUser(userId);
26      userData = { user };
27    } catch (err) {
28      console.error('Error fetching user:', err);
29      userData = { user: null, error: err instanceof Error ? err.message : 'User error' };
30    }
31    
32    try {
33      const posts = await service.getPosts(userId);
34      postsData = { posts };
35    } catch (err) {
36      console.error('Error fetching posts:', err);
37      postsData = { posts: [], error: err instanceof Error ? err.message : 'Posts error' };
38    }
39    
40    try {
41      const comments = await service.getComments(userId);
42      commentsData = { comments };
43    } catch (err) {
44      console.error('Error fetching comments:', err);
45      commentsData = { comments: [], error: err instanceof Error ? err.message : 'Comments error' };
46    }
47    
48  } catch (err) {
49    console.error('Service initialization error:', err);
50  }
51}
52---
53```
54 
55## Template Error Display
56 
57### Consistent Error UI Pattern
58```astro
59<div class="section">
60  {data.error ? (
61    <p class="text-red-500">Error: {data.error}</p>
62  ) : data.items.length > 0 ? (
63    <div>
64      {data.items.map((item) => (
65        <div class="item">{item.name}</div>
66      ))}
67    </div>
68  ) : (
69    <p class="text-gray-500">No data available</p>
70  )}
71</div>
72```
73 
74### Error State Classes
75Use consistent Tailwind classes for error states:
76- `text-red-500` for error messages
77- `text-gray-500` for empty states
78- `text-yellow-600` for warning states
79 
80## Error Logging Strategy
81 
82### Server-Side Logging
83```astro
84---
85try {
86  const result = await service.fetchData();
87  data = { result };
88} catch (err) {
89  // Log detailed error for debugging
90  console.error('Detailed error context:', {
91    error: err,
92    symbol,
93    timestamp: new Date().toISOString(),
94    operation: 'fetchData'
95  });
96  
97  // Provide user-friendly error message
98  const userMessage = err instanceof Error ? err.message : 'Unable to load data';
99  data = { result: null, error: userMessage };
100}
101---
102```
103 
104## Database Error Handling
105 
106### Connection Availability
107```astro
108---
109const db = (Astro.locals.runtime?.env?.DB as D1Database) || null;
110 
111if (!db) {
112  console.warn('Database not available in current environment');
113  data = { items: [], error: 'Database not available' };
114} else {
115  // Proceed with database operations
116}
117---
118```
119 
120### Service Layer Error Propagation
121```astro
122---
123try {
124  const service = OptionsService.getInstance(db);
125  const result = await service.fetchData(symbol);
126  data = { result };
127} catch (err) {
128  if (err instanceof Error) {
129    // Different handling based on error type
130    if (err.message.includes('rate limit')) {
131      data = { result: null, error: 'API rate limit exceeded. Please try again later.' };
132    } else if (err.message.includes('not found')) {
133      data = { result: null, error: `Symbol ${symbol} not found.` };
134    } else {
135      data = { result: null, error: 'Unable to fetch data. Please try again.' };
136    }
137  } else {
138    data = { result: null, error: 'An unexpected error occurred.' };
139  }
140}
141---
142```
143 
144## Error Recovery Patterns
145 
146### Graceful Degradation
147```astro
148---
149// Primary data source
150let primaryData: { items: any[]; error?: string } = { items: [] };
151// Fallback data source
152let fallbackData: { items: any[]; error?: string } = { items: [] };
153 
154try {
155  const primary = await service.getPrimaryData();
156  primaryData = { items: primary };
157} catch (err) {
158  console.error('Primary data source failed:', err);
159  primaryData = { items: [], error: 'Primary source unavailable' };
160  
161  // Try fallback
162  try {
163    const fallback = await service.getFallbackData();
164    fallbackData = { items: fallback };
165  } catch (fallbackErr) {
166    console.error('Fallback data source failed:', fallbackErr);
167    fallbackData = { items: [], error: 'All data sources unavailable' };
168  }
169}
170 
171// Use the best available data
172const displayData = primaryData.items.length > 0 ? primaryData : fallbackData;
173---
174```