How to handle errors in Replit apps

1// Node.js / Express example
2app.get('/api/users', async (req, res) => {
3  try {
4    const result = await pool.query('SELECT * FROM users LIMIT 50');
5    res.json(result.rows);
6  } catch (error) {
7    console.error('Database query failed:', error.message);
8    
9    const isProduction = process.env.REPLIT_DEPLOYMENT === '1';
10    res.status(500).json({
11      error: isProduction
12        ? 'Unable to load users. Please try again later.'
13        : error.message,
14    });
15  }
16});

1// Global handlers for Node.js
2process.on('uncaughtException', (error) => {
3  console.error('Uncaught Exception:', error.message);
4  // Log to monitoring service if available
5  process.exit(1); // Exit and let Replit restart
6});
7
8process.on('unhandledRejection', (reason) => {
9  console.error('Unhandled Rejection:', reason);
10});
11
12// Express error-handling middleware (must have 4 params)
13app.use((err, req, res, next) => {
14  console.error('Express error:', err.message);
15  const isProduction = process.env.REPLIT_DEPLOYMENT === '1';
16  res.status(err.status || 500).json({
17    error: isProduction
18      ? 'Something went wrong. Please try again.'
19      : err.message,
20  });
21});

1// src/components/ErrorBoundary.tsx
2import React, { Component, ErrorInfo, ReactNode } from 'react';
3
4interface Props {
5  children: ReactNode;
6  fallback?: ReactNode;
7}
8
9interface State {
10  hasError: boolean;
11  error: Error | null;
12}
13
14class ErrorBoundary extends Component<Props, State> {
15  state: State = { hasError: false, error: null };
16
17  static getDerivedStateFromError(error: Error): State {
18    return { hasError: true, error };
19  }
20
21  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
22    console.error('React error boundary caught:', error, errorInfo);
23  }
24
25  render() {
26    if (this.state.hasError) {
27      return this.props.fallback || (
28        <div style={{ padding: '2rem', textAlign: 'center' }}>
29          <h2>Something went wrong</h2>
30          <p>Please refresh the page to try again.</p>
31        </div>
32      );
33    }
34    return this.props.children;
35  }
36}
37
38export default ErrorBoundary;
39
40// Usage in App.tsx:
41// <ErrorBoundary><YourApp /></ErrorBoundary>

1// Graceful degradation with fallback data
2async function getProducts(req, res) {
3  try {
4    const result = await pool.query('SELECT * FROM products LIMIT 50');
5    res.json({ source: 'live', data: result.rows });
6  } catch (dbError) {
7    console.error('Database unavailable:', dbError.message);
8    
9    // Try cached data if database is down
10    try {
11      const cached = getCachedProducts();
12      if (cached) {
13        res.json({
14          source: 'cache',
15          data: cached,
16          notice: 'Showing cached data. Live data temporarily unavailable.',
17        });
18        return;
19      }
20    } catch (cacheError) {
21      console.error('Cache also failed:', cacheError.message);
22    }
23    
24    // Final fallback
25    res.status(503).json({
26      error: 'Service temporarily unavailable. Please try again shortly.',
27    });
28  }
29}

1app.post('/api/users', (req, res) => {
2  const { name, email, age } = req.body;
3  const errors = [];
4
5  if (!name || typeof name !== 'string' || name.trim().length === 0) {
6    errors.push('Name is required and must be a non-empty string.');
7  }
8  if (!email || !email.includes('@')) {
9    errors.push('A valid email address is required.');
10  }
11  if (age !== undefined && (typeof age !== 'number' || age < 0 || age > 150)) {
12    errors.push('Age must be a number between 0 and 150.');
13  }
14
15  if (errors.length > 0) {
16    return res.status(400).json({ errors });
17  }
18
19  // Process valid input...
20});