DEV Community

Vigilmon
Vigilmon

Posted on

How to Monitor Your Leptos (Rust) App with Vigilmon

#rust #leptos #monitoring #webassembly

How to Monitor Your Leptos (Rust) App with Vigilmon

Leptos is a full-stack Rust web framework for building fast, reactive web applications using WebAssembly on the client and Axum on the server. If you're using Leptos, you're probably building something that needs to be extremely reliable. This guide shows you how to monitor your Leptos application with Vigilmon.

What to Monitor in a Leptos App

A Leptos app typically has:

  1. The server-side Axum backend — serves SSR pages and handles API calls
  2. Static assets — the WASM bundle and JS glue code
  3. API routes — your server functions (#[server] macros)
  4. Database or external APIs — whatever your backend queries

Step 1: Add a Health Endpoint to Your Leptos Server

Leptos uses Axum under the hood. Add a health route to your server:

use axum::{
    routing::get,
    Router,
    response::IntoResponse,
    http::StatusCode,
};

async fn health() -> impl IntoResponse {
    (StatusCode::OK, "OK")
}

// In your router setup
pub fn router() -> Router {
    Router::new()
        .route("/health", get(health))
        // ... your other routes
        .leptos_routes(&leptos_options, routes, App)
}
Enter fullscreen mode Exit fullscreen mode

Verify it works:

curl http://localhost:3000/health
# Expected: OK
Enter fullscreen mode Exit fullscreen mode

Step 2: Add a Database Health Check (Optional)

If your Leptos server uses SQLite, PostgreSQL, or another database, extend the health check:

async fn health(
    State(pool): State<PgPool>,
) -> impl IntoResponse {
    match sqlx::query("SELECT 1").fetch_one(&pool).await {
        Ok(_) => (StatusCode::OK, "OK"),
        Err(e) => (StatusCode::SERVICE_UNAVAILABLE, "DB error"),
    }
}
Enter fullscreen mode Exit fullscreen mode

This confirms both the server process and database connectivity.

Step 3: Set Up a Vigilmon Monitor

  1. Sign up at vigilmon.online
  2. Click + New Monitor
  3. Configure:
    • URL: https://yourleptos.app/health
    • Method: GET
    • Expected status: 200
    • Expected body contains: OK
    • Check interval: every 1-3 minutes
  4. Add alert channels
  5. Click Save Monitor

Step 4: Monitor WASM Bundle Availability

Leptos apps serve a WASM bundle. If CDN or static file serving breaks, the app loads but fails to hydrate. Monitor the WASM bundle URL:

  • URL: https://yourleptos.app/pkg/your_app_bg.wasm
  • Expected status: 200
  • Expected headers contain: application/wasm (if your server sets the correct MIME type)

This catches broken deployments where the server is up but the frontend assets are missing.

Step 5: Monitor Your Server Functions

Leptos server functions (#[server]) are exposed as POST endpoints. For critical ones, create a lightweight test endpoint:

#[server(HealthServerFn, "/api")]
pub async fn health_server_fn() -> Result<String, ServerFnError> {
    Ok("ok".to_string())
}
Enter fullscreen mode Exit fullscreen mode

In Vigilmon, add a POST monitor targeting /api/health_server_fn to confirm server functions are reachable.

Step 6: SSL Monitoring

Leptos apps served over TLS need SSL certificate monitoring. In Vigilmon:

  • Enable SSL monitoring for your domain
  • Set a 14-day expiry alert so you're never surprised by an expired cert

In Rust/Axum, TLS is often handled by a reverse proxy (nginx, Caddy) or a platform like Fly.io. Either way, Vigilmon monitors the cert from the client's perspective.

Step 7: Configure Alerts

For a Rust app, configure:

  • Email alerts to your inbox
  • Slack webhook to your #engineering channel
  • Optional: PagerDuty if your app needs 24/7 coverage

Because Rust apps compile to efficient binaries, they tend to be stable once deployed — but the deployment infrastructure (load balancers, DNS, CDN) can still fail.

Leptos-Specific Tips

CSR vs SSR: If you're using client-side rendering only (WASM), your "server" might be a static host. Monitor the host URL and ensure the WASM bundle loads.

Actix vs Axum: If you're using the Actix backend feature of Leptos, the health route setup is similar — just add a route handler to your Actix app.

Release builds: Debug WASM builds are much larger and slower. Make sure your health check tests your production release build.

Conclusion

Leptos is an excellent framework for building reliable Rust web apps. Adding a health endpoint and connecting it to Vigilmon gives you the observability to match the reliability your app already aims for.

Monitor your Leptos app with Vigilmon →

Vigilmon provides free uptime monitoring for HTTP/HTTPS endpoints with instant alert notifications.

Top comments (0)