# Add an observable: "onErrorObservable" for textures

**URL:** <https://forum.babylonjs.com/t/add-an-observable-onerrorobservable-for-textures/54231>\
**Category:** Completed Features\
**Created:** [October 20, 2024, 4:18pm UTC](https://forum.babylonjs.com/t/add-an-observable-onerrorobservable-for-textures/54231 "2024-10-20T16:18:21Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dad72](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dad72/32/13_2.png) [@Dad72](https://forum.babylonjs.com/u/Dad72)\
**Post date:** [October 20, 2024, 4:18pm UTC](https://forum.babylonjs.com/t/add-an-observable-onerrorobservable-for-textures/54231/1 "2024-10-20T16:18:21Z")

</div>

Hello,

Currently we can load a texture and check that it is valid with the observable: texture.onLoadObservable, but we cannot use an observable to check its loading failure.

Here is what I would like to be able to do:

```auto
setBoxTexture() {
    const textureUrl = prompt("URL texture :", "Assets/Textures/s05_stwl_s_01.png");
    
	const boxMaterial = new BABYLON.StandardMaterial("boxMaterial", this.scene);
    
    if (textureUrl) {
        const texture = new BABYLON.Texture(textureUrl, this.scene, false, false, BABYLON.Texture.BILINEAR_SAMPLINGMODE, null, null, null, null);
        
        texture.onLoadObservable.add(() => {
            boxMaterial.diffuseTexture = texture; 
        });

        texture.onErrorObservable.add(() => {
            console.error("Error loading texture. Application of default color.");
            boxMaterial.diffuseColor = new BABYLON.Color3(0.07, 0, 0.8); 
        });

    } else {
        boxMaterial.diffuseColor = new BABYLON.Color3(0.07, 0, 0.8);
    }
    
    this.tempBox.material = boxMaterial;
}

```

Currently I did it using texture.isReady() like this:  
(It’s the same function, but without the loading error observable.)

```auto
setBoxTexture() {
	const textureUrl = prompt("URL texture :", "Assets/Textures/s05_stwl_s_01.png");
	
	const boxMaterial = new BABYLON.StandardMaterial("boxMaterial", this.scene);
	
	if (textureUrl) {
		const texture = new BABYLON.Texture(textureUrl, this.scene, false, false, BABYLON.Texture.BILINEAR_SAMPLINGMODE);
		
		texture.onLoadObservable.add(() => {

			if (texture.isReady()) {
				boxMaterial.diffuseTexture = texture; 
			} else {
				console.error("Error loading texture. Application of default color.");
				boxMaterial.diffuseColor = new BABYLON.Color3(0.07, 0, 0.8); // Couleur par défaut
			}
		});

	} else {
		boxMaterial.diffuseColor = new BABYLON.Color3(0.07, 0, 0.8); // Couleur par défaut
	}
	
	this.tempBox.material = boxMaterial; 
}

```

The question is would it be useful to add **onErrorObservable** to verify that the texture failed to load.

---

<div class="post-metadata">

**Author:** ![shaderbytes](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/shaderbytes/32/174_2.png) [@shaderbytes](https://forum.babylonjs.com/u/shaderbytes)\
**Post date:** [October 20, 2024, 8:31pm UTC](https://forum.babylonjs.com/t/add-an-observable-onerrorobservable-for-textures/54231/2 "2024-10-20T20:31:07Z")

</div>

technically you are using the wrong function, you should not use `isReady` to check for loading error.

`isReady` can be false after a successful texture load for a few frames due to it still being set up internally ( creating mipmaps and whatever else ) then it becomes true.

The correct function to use is `isReadyOrNotBlocking`

code looks like this :

```auto
/**
     * Get if the texture is ready to be consumed (either it is ready or it is not blocking)
     * @returns true if ready, not blocking or if there was an error loading the texture
     */
    public isReadyOrNotBlocking(): boolean {
        return !this.isBlocking || this.isReady() || this.loadingError;
    }

```

The texture class does accept an error callback as one of the arguments :

`* new Texture(url, sceneOrEngine?, noMipmapOrOptions?, invertY?, samplingMode?, onLoad?, onError?, buffer?, deleteBuffer?, format?, mimeType?, loaderOptions?, creationFlags?, forcedExtension?): [Texture](https://doc.babylonjs.com/typedoc/classes/BABYLON.Texture)`

( I cant wait for the day these functions accept a single options argument haha ) anyway…

The Texture class does have a property getter named `loadingError` which you can use to know if an error occurred .( returns a boolean )

If you use the callback it will be passed an object with two properties , “message” and “exception”

---

<div class="post-metadata">

**Author:** ![Dad72](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dad72/32/13_2.png) [@Dad72](https://forum.babylonjs.com/u/Dad72)\
**Post date:** [October 20, 2024, 9:22pm UTC](https://forum.babylonjs.com/t/add-an-observable-onerrorobservable-for-textures/54231/3 "2024-10-20T21:22:50Z")

</div>

In fact, it was in the case where the texture URL is bad, the texture does not load. So I wanted to display a color by default instead of a texture which fails.

But maybe my approach is not the right one. Hence my proposal to add a observable onError on a texture.

I suspected that isReady is not appropriate here, even though it seems to work.

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [October 21, 2024, 4:19pm UTC](https://forum.babylonjs.com/t/add-an-observable-onerrorobservable-for-textures/54231/4 "2024-10-21T16:19:12Z")

</div>

if you can provide a PG that illustrates what you want I should be able to help (either with an observable or anything that could help)

---

<div class="post-metadata">

**Author:** ![Dad72](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dad72/32/13_2.png) [@Dad72](https://forum.babylonjs.com/u/Dad72)\
**Post date:** [October 21, 2024, 4:47pm UTC](https://forum.babylonjs.com/t/add-an-observable-onerrorobservable-for-textures/54231/5 "2024-10-21T16:47:43Z")

</div>

Hi DK,

The PG works. I commented on what I would like to do with an `onErrorObservable` and another comment where I use `isReady` which is less appropriate.  
I know there is also an onError in the BABYLON.Texture constructor that can do this. But I told myself that this could perhaps also be done with an observable like for `texture.onLoadObservable`

It’s just an idea I’m proposing. I did this intuitively, thinking that we could do it (onErrorObservable like onLoadObservable), and I saw that this observable did not exist.

> **[Babylon.js Playground](https://www.babylonjs-playground.com/#6AGYHC%231)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

- If you enter a url in the dialog this assigns a texture.
- If we leave a string empty, this assigns a color.
- If the URL is bad, capture the error and display a color instead of the texture.

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [October 21, 2024, 6:07pm UTC](https://forum.babylonjs.com/t/add-an-observable-onerrorobservable-for-textures/54231/6 "2024-10-21T18:07:44Z")

</div>



---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [October 21, 2024, 7:31pm UTC](https://forum.babylonjs.com/t/add-an-observable-onerrorobservable-for-textures/54231/7 "2024-10-21T19:31:12Z")

</div>



---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [October 21, 2024, 7:35pm UTC](https://forum.babylonjs.com/t/add-an-observable-onerrorobservable-for-textures/54231/8 "2024-10-21T19:35:00Z")

</div>

Guess what it is somehow already supported:  
[Babylon.js Playground](https://www.babylonjs-playground.com/#6AGYHC#2)

The nuance is that because the error can happen in so many different places we had to put it on a static function for each endpoint to call it

---

<div class="post-metadata">

**Author:** ![Dad72](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dad72/32/13_2.png) [@Dad72](https://forum.babylonjs.com/u/Dad72)\
**Post date:** [October 21, 2024, 8:24pm UTC](https://forum.babylonjs.com/t/add-an-observable-onerrorobservable-for-textures/54231/9 "2024-10-21T20:24:05Z")

</div>

It’s cool. So BABYLON.Texture.OnTextureLoadErrorObservable takes into account the texture being loaded?

And then to know which texture is the problem we do:

```auto
BABYLON.Texture.OnTextureLoadErrorObservable.add((data) => {
            console.log(data.url); 
});

```

Seems good to me.

Thanks Dk