Observability in Godot Web games with Highlight.io

One of my recent side projects is a cosmic-themed platform for games, called Stellar Whiskers. I’ve been using the latest version of the open-source Godot Engine which can export games for the web, macOS, Linux, Windows, mobile platforms, as well as various gaming consoles.

I’ve been focusing first on implementing a simple Reversi/Othello game called Rocket Reversi. Since the game is all client side and I have a very fast and SEO-friendly setup for the website, one thing I have been missing is observability into errors from the Godot code, and also insight into how players are using it (and being able to reproduce bugs they find!)

After some research into the alternatives, I settled on highlight.io, which itself is open-source and also provides a paid hosted option. I went ahead and set up their SDK using the Other HTML option (since this page is using the Godot Web Shell and not one of the many web frameworks highlight.io supports).

I made the changed and pushed to GitHub, then my deployment pipeline took care of making it live. I immediately started seeing live sessions in the highlight.io dashboard (using their hosted option in the free tier), but after the initial Godot loading screen (which is just a standard webp file), I could see mouse movements and clicks but not the actual HTML canvas Godot was rendering to.

Before I had time to even investigate, I received an automtaed welcome email from the highlight.io team. I mentioned the problem I was having, and they pointed me at their docs on WebGL and manual snapshotting, which sounded like the exact problem I was running into.

I added this into my Godot web shell template:

H.init('<YOUR_PROJECT_ID>', {
  enableCanvasRecording: true,        // enable canvas recording
  samplingStrategy: {
      canvasManualSnapshot: 2,        // snapshot at 2 fps
      canvasMaxSnapshotDimension: 480,  // snapshot at a max 480p resolution
    // any other settings...
  },
})

This part was simple enough, but for the next step in the docs I had to figure out was calling Javascript from the Godot game loop. Fortunately, there is already a JavaScript Bridge singleton in Godot 4 which allows this.

Since I intend to release the game for platforms other than the web, I used OS.has_feature('web') to guard against this code running on other platforms, and called this from my game loop:

if OS.has_feature('web'):
    # Access and call Highlight.io's API
    JavaScriptBridge.eval("""
        var canvasElementRef = document.getElementById("canvas")
        window.H.snapshot(canvasElementRef)
    """)

I deployed again, and now I have full session replay!