Is it possible to generate a JS error from Go web assembly?

Question

Is it possible to generate a JS error from Go web assembly?

I attempted

js.Global().Call("throw", "yeet")

However, I encountered

panic: 1:1: expected operand, found 'type' [recovered] wasm_exec.f7bab17184626fa7f3ebe6c157d4026825842d39bfae444ef945e60ec7d3b0f1.js:51 panic: syscall/js: Value.Call: property throw is not a function, got undefined

It appears that there is an Error type specified in syscall/js, yet there is no mention of how to throw it https://golang.org/pkg/syscall/js/#Error

javascript go webassembly

Answer 1

Answer №1

WebAssembly does not allow for throwing JS errors directly. In JavaScript, throwing a value triggers the runtime to unwind the stack to the nearest try block or log an uncaught error. The execution of WASM happens in a sandboxed environment separate from the JS stack, as outlined in the WebAssembly docs:

Each WebAssembly module operates within a secure environment isolated from the host runtime using fault isolation techniques.

If a WASM function calls into JS code that throws an error, the WASM runtime treats it like a panic situation. While WASM does have access to traps, they are designed to halt execution at the runtime level and are not supported by Go's syscall/js module.

The recommended way to handle potentially failing code execution is by returning a Promise. This allows you to either resolve the promise on success or reject it on failure. The calling JS code can then await the promise execution within a try/catch block or use promise chaining with a .catch() callback. Here is a brief example:

func main() {
    c := make(chan struct{})

    js.Global().Set("doSomething", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
        handler := js.FuncOf(func(this js.Value, args []js.Value) interface{} {
            resolve := args[0]
            reject := args[1]

            go func() {
                data, err := doSomeWork()
                if err != nil {
                    // err should be an instance of `error`, eg `errors.New("some error")`
                    errorConstructor := js.Global().Get("Error")
                    errorObject := errorConstructor.New(err.Error())
                    reject.Invoke(errorObject)
                } else {
                    resolve.Invoke(js.ValueOf(data))
                }
            }()

            return nil
        })

        promiseConstructor := js.Global().Get("Promise")
        return promiseConstructor.New(handler)
    })

    <-c
}

Then, in your JS code:

(async () => {
  try {
    await window.doSomething();
  } catch (err) {
    console.log('caught error from WASM:', err);
  }
}();

or

window.doSomething()
  .then(_ => /* ... */)
  .catch(err => {
    console.log('caught error from WASM:', err);
  });

Answer 2

WebAssembly does not allow for throwing JS errors directly. In JavaScript, throwing a value triggers the runtime to unwind the stack to the nearest try block or log an uncaught error. The execution of WASM happens in a sandboxed environment separate from the JS stack, as outlined in the WebAssembly docs:

Each WebAssembly module operates within a secure environment isolated from the host runtime using fault isolation techniques.

If a WASM function calls into JS code that throws an error, the WASM runtime treats it like a panic situation. While WASM does have access to traps, they are designed to halt execution at the runtime level and are not supported by Go's syscall/js module.

The recommended way to handle potentially failing code execution is by returning a Promise. This allows you to either resolve the promise on success or reject it on failure. The calling JS code can then await the promise execution within a try/catch block or use promise chaining with a .catch() callback. Here is a brief example:

func main() {
    c := make(chan struct{})

    js.Global().Set("doSomething", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
        handler := js.FuncOf(func(this js.Value, args []js.Value) interface{} {
            resolve := args[0]
            reject := args[1]

            go func() {
                data, err := doSomeWork()
                if err != nil {
                    // err should be an instance of `error`, eg `errors.New("some error")`
                    errorConstructor := js.Global().Get("Error")
                    errorObject := errorConstructor.New(err.Error())
                    reject.Invoke(errorObject)
                } else {
                    resolve.Invoke(js.ValueOf(data))
                }
            }()

            return nil
        })

        promiseConstructor := js.Global().Get("Promise")
        return promiseConstructor.New(handler)
    })

    <-c
}

Then, in your JS code:

(async () => {
  try {
    await window.doSomething();
  } catch (err) {
    console.log('caught error from WASM:', err);
  }
}();

or

window.doSomething()
  .then(_ => /* ... */)
  .catch(err => {
    console.log('caught error from WASM:', err);
  });

Answer 3

Answer №2

My perspective differs from @superhawk610 on this matter

Throwing a JS error from WebAssembly is not something that can be easily done

While it is technically possible to throw an error, the practicality of it may be questionable. In most cases, implementing some Promise logic as suggested by @superhawk610 would be more reasonable. However, if you are determined to throw an exception, here is a simple example.

example

1. Create a throw function stub

// Throw function stub for throwing javascript exceptions
// No implementation!
func Throw(exception string, message string)

2. Provide assembler hint with yourpkg_js.s file

// Implementation for throwing javascript exceptions
TEXT ·Throw(SB), NOSPLIT, $0
  CallImport
  RET

3. Extend wasm_exec / your wasm importObject with a js callback

this.importObject = {
  go: {
    // ...

    // func Throw(exception string, message string)
    '<your-pkg-import-path>.Throw': (sp) => {
      const exception = loadString(sp + 8)
      const message = loadString(sp + 24)
      const throwable = globalThis[exception](message)
      throw throwable
    }
  }
}

Now you can throw errors using the Error class name and a custom message. For example:

func main () {
  Throw("TypeError", "invalid arguments")
}

Answer 4

My perspective differs from @superhawk610 on this matter

Throwing a JS error from WebAssembly is not something that can be easily done

While it is technically possible to throw an error, the practicality of it may be questionable. In most cases, implementing some Promise logic as suggested by @superhawk610 would be more reasonable. However, if you are determined to throw an exception, here is a simple example.

example

1. Create a throw function stub

// Throw function stub for throwing javascript exceptions
// No implementation!
func Throw(exception string, message string)

2. Provide assembler hint with yourpkg_js.s file

// Implementation for throwing javascript exceptions
TEXT ·Throw(SB), NOSPLIT, $0
  CallImport
  RET

3. Extend wasm_exec / your wasm importObject with a js callback

this.importObject = {
  go: {
    // ...

    // func Throw(exception string, message string)
    '<your-pkg-import-path>.Throw': (sp) => {
      const exception = loadString(sp + 8)
      const message = loadString(sp + 24)
      const throwable = globalThis[exception](message)
      throw throwable
    }
  }
}

Now you can throw errors using the Error class name and a custom message. For example:

func main () {
  Throw("TypeError", "invalid arguments")
}

Is it possible to generate a JS error from Go web assembly?

Answer №1

Answer №2

example

Similar questions

Saving an item in the state following a function execution

Conceal on External Click with AngularJS

I keep encountering a 404 error page not found whenever I try to use the useRouter function. What could

JavaScript code that exhibits a sandwich pattern

Asynchronous JavaScript combined with a for loop

What is the best way to conceal the dt tag when the dd tag contains no value

Sending properties through the React Router to a specific component

Utilizing CSS to showcase various sections of a webpage

Issue: Unable to reach essential Node.js modules

An error has been detected by Internet Explorer 8 at line number 373402504

Showing error messages to users with Angular and Firebase

Guide to troubleshooting JavaScript in Firefox using Visual Studio 2008?

What is the best way to determine the position of an internal SVG element in relation to the viewport of an outer SVG element?

What is the best way to transfer a JavaScript variable to a PHP file and then store it in a PHP variable?

How to display a variety of JSON data in different templates with unique variables using angularjs

Issue encountered while trying to retrieve element within unnamed function in ajax system

Issue with Javascript/Jquery functionality within a PHP script

Creating routes in Node.js after setting up middleware

Enhance JavaScript by incorporating the selected value of an HTML dropdown menu

The system does not acknowledge 'CI' as a command that can be used internally or externally, functioning program, or batch file