WASM support

[nowiwr01w]

Problem Statement

Hi, guys
What do you think about supporting Kotlin/Wasm target for this library? Are there any plans for it?
It would be great

Solution Brainstorm

No response

[buenaflor]

Hi, of course if there is enough demand we will support it.

But currently there is no plan to tackle this.

We can keep this issue open and let people upvote it so we know how many people are interested

[chrisjenx]

Vote here for WASM support too please

[oblakr24]

Here is my workaround which uses the JS interop via the JS Sentry SDK:

Note: if you use a browser extension such as UBlock Origin, it may block the outgoing Sentry requests, so you may have to disable it.

1. add the npm dependency

   wasmJsMain.dependencies {
          ...
            implementation(npm("@sentry/browser", "8.26.0"))
        }

2. define the external interfaces

package sentry

@JsModule("@sentry/browser")
external object SentryJs {
    fun init(options: JsAny)
    fun captureException(e: JsAny)
    fun captureMessage(message: String)
    fun addBreadcrumb(message: String)
}

fun createOptions(dsn: String): JsAny = js("""
    ({
    dsn: dsn,
  // Tracing
  debug: true,
  tracesSampleRate: 1.0, //  Capture 100% of the transactions
  // Session Replay
  replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
  replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
  // Set profilesSampleRate to 1.0 to profile every transaction.
  // Since profilesSampleRate is relative to tracesSampleRate,
  // the final profiling rate can be computed as tracesSampleRate * profilesSampleRate
  // For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would
  // results in 25% of transactions being profiled (0.5*0.5=0.25)
  profilesSampleRate: 1.0
  })
""")

fun createErrorMessage(message: String): JsAny =
    js("new Error(message)")

fun createErrorWithStackTrace(message: String, stackTrace: String, className: String): JsAny =
    js(
        """
        (() => {
            const err = new Error(message);
            err.stack = stackTrace;
            err.name = className;
            return err;
        })()
    """
    )

3. now you can use it similarly to the KMP lib:

  val dsn = "..."
  SentryJs.init(createOptions(dsn = dsn))


SentryJs.addBreadcrumb("Breadcrumb 1")

val e: Throwable? = ...
 if (e != null) {
      val stackTrace = e.stackTraceToString()
      val error = createErrorWithStackTrace(
          message = "$msg: ${e.message}",
          stackTrace = stackTrace,
          className = e::class.simpleName ?: "Throwable"
      )
      SentryJs.captureException(error)
  } else {
      SentryJs.captureException(createErrorMessage("$msg: ${e?.message}"))
  }

[bruno-garcia]

Did you guys figure out the symbolication part of it? To upload symbols and then build the stack traces the 'right way' so we can symbolicate server side?

Just put this ticket together but from my tests, that was an issue on .NET still. That's opened here:

• Blazor - WebAssembly build_id section dotnet/runtime#91049

[buenaflor]

I haven't taken a deep dive yet, also depends on what kotlin/wasm produces, might either be dwarf or sourcemap

[chrisjenx]

If we could get some no-op js/wasmJs modules shipped while y'all work out the best steps forwards, right now, can't add sentry to a js/wasm kmm project due to the missing variants :(

[buenaflor]

@chrisjenx hm yeah no-ops for wasm and js for now sounds good, should also be relatively low effort

Created an issue: #288