Total.js v5: How to Define Routes for Internal Errors

In Total.js, you can define custom routes to handle errors like 404 Not Found or 500 Internal Server Error. This lets you display custom error messages and pages when something goes wrong in your app, improving user experience.

In this post, we'll explore how to define error routes for different HTTP status codes, set status codes using $.res.send(), and customize error responses in a simple way.

How It Works (Same as Previous Versions of Total.js)

The way you define error routes in Total.js v5 is similar to previous versions. You can use the ROUTE function with an HTTP status code to specify what happens when an error occurs.

Here’s a simple example of how it works:

ROUTE('#404', notfound_handler);  // Handles 404 errors
ROUTE('#500', servererror_handler);  // Handles 500 errors (not recommended for custom use)

Sending Custom Error Responses

In Total.js, you can send a custom response with an error code using $.res.send(code, body). This method sets the HTTP status code and sends a response back to the user.

Here’s an example of handling a 404 Not Found error:

function notfound_handler($) {
    $.res.send(404, '404 Page Not Found');  // Sends a 404 status with a custom message
}

This method uses the Response.send() function, which works like this:

Response.send([code], body, [type]);

• code: The HTTP status code (e.g., 404).
• body: The response body, which can be a string, object, or boolean. Objects are serialized to JSON automatically.
• type: (Optional) The content type of the response (e.g., text/html or application/json).

Example for Multiple Error Codes

You can define custom routes for various HTTP errors, such as 403 Forbidden, 404 Not Found, and 503 Service Unavailable, using $.res.send():

ROUTE('#403', forbidden_handler);   // Handles 403 Forbidden
ROUTE('#404', notfound_handler);    // Handles 404 Not Found
ROUTE('#503', serviceunavailable_handler);  // Handles 503 Service Unavailable

Avoid Custom 500 Error Routes

While you can create custom routes for most errors, it’s not recommended to create a custom route for 500 Internal Server Error. If there’s an error in the handler, it could cause an infinite loop, continuously triggering the error.

Let Total.js handle 500 errors automatically to avoid these risks.

Customizing Error Responses

You can customize and localize error messages using @(message) for multi-language support. This is helpful if your app serves users in different languages.

Here’s an example of a localized 403 Forbidden error:

function forbidden_handler($) {
    $.res.send(403, '@(Access Denied: You are not allowed here)');  // Localized message
}

The @(message) syntax allows Total.js to translate the message based on the user’s language settings.

Example: Handling Multiple Errors with Custom Responses

Here’s a full example showing how to handle multiple error routes in Total.js:

exports.install = function() {
    ROUTE('#403', forbidden_handler);   // Handle 403 Forbidden
    ROUTE('#404', notfound_handler);    // Handle 404 Not Found
    ROUTE('#503', serviceunavailable_handler);  // Handle 503 Service Unavailable
};

// Custom 403 Forbidden handler
function forbidden_handler($) {
    $.res.send(403, '@(Access Denied: You are not allowed here)');
}

// Custom 404 Not Found handler
function notfound_handler($) {
    $.res.send(404, '404 Page Not Found');  // Sends a custom 404 message
}

// Custom 503 Service Unavailable handler
function serviceunavailable_handler($) {
    $.res.send(503, 'Service temporarily unavailable. Please try again later.');
}

In this example:

• We handle 403, 404, and 503 errors.
• We use $.res.send(code, body) to set the HTTP status code and send a custom error message.
• The 403 handler uses @(message) for localized error messages.

Conclusion

Defining error routes in Total.js allows you to provide custom error messages and pages, improving user experience when things go wrong. Here’s a summary of what we covered:

• Use ROUTE('#code', handler) to handle errors like 403, 404, and 503.
• Use $.res.send(code, body) to set the HTTP status code and send a custom response.
• Avoid creating custom routes for 500 Internal Server Error to prevent infinite loops.
• Localize error messages using @(message) to support multiple languages.

By following these steps, you can make sure your application handles errors effectively while giving users clear and helpful information.