show nothing if spine-player has an error

jojo

When there's a cors error loading the spine files, a really jarring screen renders with the error text like this (I blurred out for privacy). How can we make it just render nothing if there's been an error? Instead of rendering the error right on the page like this

Thanks

Davide

jojo

As Spinebot said, you can add an error callback that is invoked when an error occurs.
Within that callback you can access the respective HTMLElement and modify it.

For example:

error: (player) => {
    player.dom.querySelector(".spine-player-error").innerText = "";
}

From the player instance you always have access to:

player.parent // the player container
player.dom // the player dom element
player.canvas // the html canvas

Another approach you might use without accessing any of that is to add some custom css (with important rules, cause inline style has more specificity). For example:

<style>
	.spine-player-error {
		color: rgba(0,0,0,0) !important;
		user-select: none;
	}
</style>

Spinebot

To prevent the Spine Player from displaying an error message directly on the page when there's an error, such as a CORS issue, you can modify the error handling in the player configuration. You can set a custom error handler in the configuration object passed to the Spine Player. This handler can be used to suppress the default error display and instead perform a custom action, such as logging the error or simply doing nothing. Here's an example of how you might configure this:

const player = new spine.SpinePlayer("player-container", {
    jsonUrl: "path/to/your/spine.json",
    atlasUrl: "path/to/your/spine.atlas",
    error: function(error) {
        console.error("Spine Player error:", error);
        // Do nothing or handle the error as needed
    }
});

By providing a custom function for the error property, you can control what happens when an error occurs, such as logging it to the console or ignoring it entirely.