Công cụ để testing và debug mã trạng thái HTTP

Giới thiệu về HTTP Status Codes

HTTP Status Codes (mã trạng thái HTTP) là các số ba chữ số mà server trả về để thông báo kết quả của request từ client. Chúng được chia thành 5 nhóm chính:

• 1xx (100-199): Thông tin phản hồi (Informational responses)
• 2xx (200-299): Thành công (Successful responses)
• 3xx (300-399): Chuyển hướng (Redirection messages)
• 4xx (400-499): Lỗi từ phía client (Client error responses)
• 5xx (500-599): Lỗi từ phía server (Server error responses)

Tại sao cần Testing HTTP Status Codes?

Khi phát triển ứng dụng web, việc xử lý đúng các mã trạng thái HTTP là rất quan trọng:

• Debugging: Xác định và sửa lỗi trong ứng dụng
• Error Handling: Xử lý các tình huống lỗi một cách graceful
• User Experience: Hiển thị thông báo phù hợp cho người dùng
• API Testing: Đảm bảo API hoạt động đúng trong mọi trường hợp
• Monitoring: Theo dõi tình trạng hoạt động của hệ thống

Công cụ Testing HTTP Status Codes

1. Mock.HTTPStatus.io

URL: https://mock.httpstatus.io

Đặc điểm:

• Chỉ hỗ trợ HTTPS và GET requests
• Hỗ trợ redirect chains
• Có thể set delay cho response
• Hỗ trợ custom headers
• Simulates redirect chains

Cách sử dụng cơ bản:

https://mock.httpstatus.io/200  # Trả về status 200
https://mock.httpstatus.io/404  # Trả về status 404
https://mock.httpstatus.io/500  # Trả về status 500

Tính năng nâng cao:

• Delay: https://mock.httpstatus.io/200?delay=5000 (delay 5 giây)
• Redirect chain: https://mock.httpstatus.io/chain?count=3 (3 redirects)
• Custom headers: Sử dụng header x-response: HeaderName:HeaderValue

2. HTTPco.de

URL: https://httpco.de

Đặc điểm:

• Đơn giản và dễ sử dụng
• Hỗ trợ đầy đủ các status codes
• Có documentation chi tiết về từng mã
• Lưu ý: Status codes 1xx hiện chưa hoạt động đúng

Cách sử dụng:

https://httpco.de/200  # OK
https://httpco.de/404  # Not Found
https://httpco.de/500  # Internal Server Error

Hướng dẫn Testing với các công cụ phổ biến

1. Command Line Tools

Curl:

# Test cơ bản
curl https://httpco.de/404

# Xem headers chi tiết
curl -v https://httpco.de/404

# Test với mock service
curl -H "x-response: Custom-Header:CustomValue" https://mock.httpstatus.io/200

HTTPie:

# Test cơ bản
http https://httpco.de/404

# Verbose output
http -v https://httpco.de/404

2. PHP Testing

<?php
/**
 * Test HTTP status codes với PHP
 */

function testHttpStatus($url) {
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HEADER, true);
    curl_setopt($ch, CURLOPT_NOBODY, false);
    
    $response = curl_exec($ch);
    $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    $headerSize = curl_getinfo($ch, CURLINFO_HEADER_SIZE);
    
    curl_close($ch);
    
    return [
        'status_code' => $httpCode,
        'headers' => substr($response, 0, $headerSize),
        'body' => substr($response, $headerSize)
    ];
}

// Test các status codes khác nhau
$testCases = [
    'Success' => 'https://httpco.de/200',
    'Not Found' => 'https://httpco.de/404',
    'Server Error' => 'https://httpco.de/500',
    'Redirect' => 'https://httpco.de/301'
];

foreach ($testCases as $description => $url) {
    echo "Testing: $description\n";
    $result = testHttpStatus($url);
    echo "Status Code: {$result['status_code']}\n";
    echo "---\n";
}

/**
 * Test error handling trong WordPress
 */
function handle_api_response($response) {
    if (is_wp_error($response)) {
        return ['error' => 'Request failed'];
    }
    
    $status_code = wp_remote_retrieve_response_code($response);
    $body = wp_remote_retrieve_body($response);
    
    switch ($status_code) {
        case 200:
            return json_decode($body, true);
        case 404:
            return ['error' => 'Resource not found'];
        case 500:
            return ['error' => 'Server error occurred'];
        default:
            return ['error' => "Unexpected status code: $status_code"];
    }
}

// Sử dụng trong WordPress
$response = wp_remote_get('https://httpco.de/404');
$result = handle_api_response($response);

3. JavaScript Testing

/**
 * Test HTTP status codes với JavaScript
 */

// Async/Await approach
async function testHttpStatus(url) {
    try {
        const response = await fetch(url);
        
        return {
            status: response.status,
            statusText: response.statusText,
            headers: Object.fromEntries(response.headers.entries()),
            body: await response.text()
        };
    } catch (error) {
        return {
            error: error.message
        };
    }
}

// Test function với error handling
async function handleApiResponse(url) {
    const result = await testHttpStatus(url);
    
    if (result.error) {
        console.error('Request failed:', result.error);
        return null;
    }
    
    switch (result.status) {
        case 200:
            console.log('Success:', result.body);
            return result.body;
        case 404:
            console.warn('Resource not found');
            return null;
        case 500:
            console.error('Server error');
            return null;
        default:
            console.warn(`Unexpected status: ${result.status}`);
            return null;
    }
}

// Test cases
const testUrls = [
    'https://httpco.de/200',
    'https://httpco.de/404',
    'https://httpco.de/500',
    'https://mock.httpstatus.io/200?delay=2000'
];

// Chạy tests
async function runTests() {
    for (const url of testUrls) {
        console.log(`Testing: ${url}`);
        await handleApiResponse(url);
        console.log('---');
    }
}

// jQuery AJAX approach (cho WordPress admin)
function testWithJQuery(statusCode) {
    $.ajax({
        url: `https://httpco.de/${statusCode}`,
        method: 'GET',
        success: function(data, textStatus, xhr) {
            console.log(`Status ${statusCode}: Success`);
            console.log('Response:', data);
        },
        error: function(xhr, textStatus, errorThrown) {
            console.log(`Status ${statusCode}: ${xhr.status} - ${textStatus}`);
        },
        complete: function(xhr) {
            console.log('Request completed with status:', xhr.status);
        }
    });
}

// Test redirects với fetch
async function testRedirect() {
    try {
        const response = await fetch('https://mock.httpstatus.io/chain?count=3', {
            redirect: 'follow' // Tự động follow redirects
        });
        
        console.log('Final status:', response.status);
        console.log('Final URL:', response.url);
    } catch (error) {
        console.error('Redirect test failed:', error);
    }
}

Các Trường hợp Sử dụng Thực tế

1. Testing API Error Handling

// WordPress REST API endpoint testing
function test_wp_api_endpoints() {
    $endpoints = [
        '/wp-json/wp/v2/posts/999999', // Test 404
        '/wp-json/wp/v2/users/me',     // Test authentication
        '/wp-json/wp/v2/posts',        // Test success
    ];
    
    foreach ($endpoints as $endpoint) {
        $response = wp_remote_get(home_url($endpoint));
        $status = wp_remote_retrieve_response_code($response);
        
        echo "Endpoint: $endpoint - Status: $status\n";
    }
}

2. Form Submission Testing

// Test form submission với different status codes
async function testFormSubmission(formData, testStatus = 200) {
    const testUrl = `https://mock.httpstatus.io/${testStatus}`;
    
    try {
        const response = await fetch(testUrl, {
            method: 'POST', // Chú ý: mock service chỉ hỗ trợ GET
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(formData)
        });
        
        return handleFormResponse(response);
    } catch (error) {
        return { success: false, error: error.message };
    }
}

function handleFormResponse(response) {
    switch (response.status) {
        case 200:
        case 201:
            return { success: true, message: 'Form submitted successfully' };
        case 400:
            return { success: false, error: 'Invalid form data' };
        case 422:
            return { success: false, error: 'Validation failed' };
        case 500:
            return { success: false, error: 'Server error. Please try again.' };
        default:
            return { success: false, error: 'Unexpected error occurred' };
    }
}

3. Retry Logic Testing

async function fetchWithRetry(url, maxRetries = 3, delay = 1000) {
    for (let i = 0; i < maxRetries; i++) {
        try {
            const response = await fetch(url);
            
            // Retry on 5xx errors
            if (response.status >= 500) {
                if (i === maxRetries - 1) {
                    throw new Error(`Server error after ${maxRetries} attempts`);
                }
                await new Promise(resolve => setTimeout(resolve, delay));
                continue;
            }
            
            return response;
        } catch (error) {
            if (i === maxRetries - 1) {
                throw error;
            }
            await new Promise(resolve => setTimeout(resolve, delay));
        }
    }
}

// Test retry logic
fetchWithRetry('https://mock.httpstatus.io/503')
    .then(response => console.log('Success:', response.status))
    .catch(error => console.error('Failed:', error.message));

Best Practices

1. Comprehensive Error Handling

• Luôn xử lý tất cả các trường hợp status code có thể xảy ra
• Hiển thị thông báo lỗi rõ ràng và hữu ích cho người dùng
• Log errors để debugging

2. Testing Strategy

• Test cả success và error cases
• Simulate network issues và timeouts
• Test với dữ liệu edge cases

3. User Experience

function showUserFriendlyMessage(statusCode) {
    const messages = {
        400: 'Có lỗi trong dữ liệu bạn gửi. Vui lòng kiểm tra lại.',
        401: 'Bạn cần đăng nhập để thực hiện hành động này.',
        403: 'Bạn không có quyền thực hiện hành động này.',
        404: 'Không tìm thấy trang hoặc tài nguyên bạn yêu cầu.',
        500: 'Có lỗi xảy ra từ phía server. Vui lòng thử lại sau.',
        503: 'Dịch vụ tạm thời không khả dụng. Vui lòng thử lại sau.'
    };
    
    return messages[statusCode] || 'Có lỗi không xác định xảy ra.';
}

Kết luận

Việc testing và debug HTTP status codes là một phần quan trọng trong quá trình phát triển web. Hai công cụ mock.httpstatus.io và httpco.de cung cấp một cách đơn giản và hiệu quả để test cách ứng dụng của bạn xử lý các tình huống khác nhau.

Hãy nhớ rằng việc xử lý error một cách graceful không chỉ giúp ứng dụng của bạn ổn định hơn mà còn cải thiện đáng kể trải nghiệm người dùng. Luôn test cả success và failure cases để đảm bảo ứng dụng hoạt động tốt trong mọi tình huống.