0Pricing
WebAssembly (WASM) for High Performance Apps · Lezione

Gestione degli errori e delle eccezioni

Apprenda strategie solide per propagare e gestire efficacemente errori ed eccezioni tra codice WASM e JavaScript.

Gestione degli errori e delle eccezioni è una lezione WebAssembly (WASM) for High Performance Apps gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento WebAssembly (WASM) for High Performance Apps, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso WebAssembly (WASM) for High Performance Apps include 4 lezioni in totale.

Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.

Why Error Handling Matters

When your WebAssembly (WASM) module interacts with JavaScript, things can go wrong. Maybe a calculation fails, an input is invalid, or a browser API call doesn't work as expected.

Proper error handling ensures your application remains stable and provides meaningful feedback to users or developers. It's about gracefully managing unexpected situations across language boundaries.

Errors in WASM Host Languages

WebAssembly itself doesn't have a concept of "exceptions" like JavaScript or Java. Instead, languages compiled to WASM (like Rust or C++) often use return types or specific data structures to signal errors.

  • Rust: Employs the Result<T, E> enum, which can be either Ok(T) for success or Err(E) for failure.
  • C/C++: Often uses return values (e.g., -1 for error) or sets global error indicators.

Our focus is on how these language-specific error patterns translate across the WASM-JavaScript boundary.

Propagating WASM Errors to JS

The goal is to make errors originating in your WASM module appear as standard JavaScript Error objects. This allows JavaScript to use its familiar try...catch mechanism.

Tools like wasm-bindgen help bridge this gap by automatically converting Rust's Result::Err variants into JavaScript exceptions. It's crucial for seamless interoperation.

Rust WASM Error Example

Here's a Rust function compiled to WASM that might return an error. Notice the Result<i32, JsValue> return type. JsValue is a generic type for anything that can cross the JS boundary.

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn divide_numbers(a: i32, b: i32) -> Result<i32, JsValue> {
    if b == 0 {
        // Return a JavaScript error value
        return Err(JsValue::from_str("Cannot divide by zero!"));
    }
    Ok(a / b)
}
// This is a complete Rust module (lib.rs content).
// Exported functions like divide_numbers are its entry points for JavaScript.

Catching WASM Errors in JS

Once your WASM module propagates an error, JavaScript can catch it using a standard try...catch block. The error object caught will be a JavaScript Error, allowing you to inspect its message and potentially other properties.

This makes integrating WASM errors into your existing JavaScript error handling flow very straightforward and familiar.

JS Consuming WASM Errors

This JavaScript code loads our WASM module and attempts to call the divide_numbers function. Observe how the try...catch block handles the division-by-zero error from WASM.

// Assume 'wasm' is the loaded WASM module from Rust
// This is typical for 'wasm-bindgen' projects.

async function runWasmExample() {
  // In a real app, this would load your .wasm and .js glue code
  const wasm = { divide_numbers: (a, b) => {
    if (b === 0) throw new Error("Cannot divide by zero!");
    return a / b;
  }};

  try {
    // This call will succeed
    let result1 = wasm.divide_numbers(10, 2);
    console.log("10 / 2 =", result1); // Output: 5

    // This call will throw an error from WASM (simulated here)
    let result2 = wasm.divide_numbers(10, 0);
    console.log("10 / 0 =", result2); // This line won't be reached
  } catch (e) {
    console.error("Caught WASM error:", e.message);
    // Output: Caught WASM error: Cannot divide by zero!
  }
}

runWasmExample();

JS Errors in WASM Callbacks

What if your WASM module calls a JavaScript function (a "callback") that then throws an error? How does WASM react?

When a JavaScript function invoked by WASM throws an error, that error is typically caught by the wasm-bindgen glue code and propagated back into the WASM side as a JsValue error. Your Rust code can then handle it using the Result type, just like errors originating in Rust.

WASM Handling JS Callback Errors

Here's a Rust function that calls a JavaScript callback. The JavaScript callback might fail, and the Rust code handles that potential error.

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern "C" {
    // Import a JS function that might throw an error
    // The `catch` attribute ensures JS errors are converted to Rust `Result::Err`
    #[wasm_bindgen(catch)]
    fn js_might_fail(value: i32) -> Result<i32, JsValue>;
}

#[wasm_bindgen]
pub fn call_js_and_handle_error(input: i32) -> Result<String, JsValue> {
    match js_might_fail(input) {
        Ok(result) => Ok(format!("JS callback succeeded: {}", result)),
        Err(e) => {
            // Convert JsValue error back to a string for our Rust Result
            let error_msg = e.as_string().unwrap_or_else(|| "Unknown JS error".into());
            Err(JsValue::from_str(&format!("JS callback failed: {}", error_msg)))
        }
    }
}
// This is a complete Rust module (lib.rs content).

Custom Error Types for Clarity

For more specific error handling, you can define custom error types in Rust and map them to JavaScript Error types. wasm-bindgen allows you to control how your Rust errors are represented in JavaScript.

This improves clarity for JavaScript consumers, allowing them to differentiate between various error conditions originating from your WASM module.

  • Define specific Rust enums for errors.
  • Implement From<YourError> for JsValue to convert them.
  • Use #[wasm_bindgen(js_name = MyCustomError)] for custom JS error names.

Best Practices for Error Handling

Effective error handling is key for maintainable and robust WASM applications:

  • Be Explicit: Clearly define error conditions and return types in your WASM code.
  • Log Errors: Use console.error or a logging utility in JavaScript to record WASM errors.
  • Graceful Degradation: Design your application to continue functioning, even if a WASM component encounters a non-critical error.
  • Test Error Paths: Ensure your error handling logic is thoroughly tested to cover all failure scenarios.

Error Propagation Check

Consider the following Rust WebAssembly function and the JavaScript code that interacts with it. What will the JavaScript console output when runExample() is called?

Rust WASM Module (lib.rs):

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn check_value(value: i32) -> Result<String, JsValue> {
    if value < 0 {
        Err(JsValue::from_str("Value cannot be negative!"))
    } else if value == 0 {
        Ok("Value is zero.".into())
    } else {
        Ok(format!("Value is positive: {}", value))
    }
}

JavaScript Host Code:

// Assume 'wasm' is the loaded WASM module via wasm-bindgen
async function runExample() {
  // For context, 'wasm' would be loaded like this:
  // const wasm = await import('./my_wasm_module.js'); 

  // For this question, assume 'wasm.check_value' behaves as defined in Rust.
  const wasm = {
    check_value: (val) => {
      if (val < 0) throw new Error("Value cannot be negative!");
      if (val === 0) return "Value is zero.";
      return `Value is positive: ${val}`;
    }
  };

  try {
    console.log(wasm.check_value(5));
    console.log(wasm.check_value(-1)); // This will throw
  } catch (e) {
    console.error("Caught error:", e.message);
  }
  console.log(wasm.check_value(0)); // This line is outside the try...catch
}
runExample();

Recap: Robust Error Handling

In this lesson, we explored how to handle errors and exceptions when interoperating between WebAssembly and JavaScript. We learned:

  • WASM's host languages use specific patterns (like Rust's Result type) for errors.
  • wasm-bindgen automates the propagation of WASM errors to JavaScript Error objects.
  • JavaScript's try...catch can effectively handle errors thrown by WASM modules.
  • WASM can also handle errors from JavaScript callbacks it invokes.

Mastering error handling is crucial for building reliable and user-friendly WASM applications.

Domande Frequenti

La lezione «Gestione degli errori e delle eccezioni» è gratuita?

Sì — il testo completo di «Gestione degli errori e delle eccezioni» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso WebAssembly (WASM) for High Performance Apps, passa a CoddyKit PRO. Il corso WebAssembly (WASM) for High Performance Apps include 4 lezioni in totale.

Cosa imparerò in «Gestione degli errori e delle eccezioni»?

Apprenda strategie solide per propagare e gestire efficacemente errori ed eccezioni tra codice WASM e JavaScript. Eserciti WebAssembly (WASM) for High Performance Apps con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare WebAssembly (WASM) for High Performance Apps?

Non è richiesta alcuna esperienza precedente. WebAssembly (WASM) for High Performance Apps su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Gestione degli errori e delle eccezioni»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione WebAssembly (WASM) for High Performance Apps?

Sì. Ogni lezione WebAssembly (WASM) for High Performance Apps include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Operazioni asincrone con WASM
  2. Callback JavaScript personalizzate
  3. Gestione degli errori e delle eccezioni
  4. Condivisione della memoria e degli array tipizzati tra i confini JS/WASM
← Torna a WebAssembly (WASM) for High Performance Apps