Improve safety of Blurhash component (#14278)
There was a missed empty hash check. As well as rendering is now wrapped in try/catch block, so app won't crash if any Blurhash component fails to render its contents as it's not that critical.
This commit is contained in:
		
							parent
							
								
									6fda3cbbeb
								
							
						
					
					
						commit
						3ef94c0044
					
				
					 1 changed files with 10 additions and 6 deletions
				
			
		| 
						 | 
				
			
			@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 | 
			
		|||
 | 
			
		||||
/**
 | 
			
		||||
 * @typedef BlurhashPropsBase
 | 
			
		||||
 * @property {string} hash Hash to render
 | 
			
		||||
 * @property {string?} hash Hash to render
 | 
			
		||||
 * @property {number} width
 | 
			
		||||
 * Width of the blurred region in pixels. Defaults to 32
 | 
			
		||||
 * @property {number} [height]
 | 
			
		||||
| 
						 | 
				
			
			@ -37,13 +37,17 @@ function Blurhash({
 | 
			
		|||
    const { current: canvas } = canvasRef;
 | 
			
		||||
    canvas.width = canvas.width; // resets canvas
 | 
			
		||||
 | 
			
		||||
    if (dummy) return;
 | 
			
		||||
    if (dummy || !hash) return;
 | 
			
		||||
 | 
			
		||||
    try {
 | 
			
		||||
      const pixels = decode(hash, width, height);
 | 
			
		||||
      const ctx = canvas.getContext('2d');
 | 
			
		||||
      const imageData = new ImageData(pixels, width, height);
 | 
			
		||||
 | 
			
		||||
      ctx.putImageData(imageData, 0, 0);
 | 
			
		||||
    } catch (err) {
 | 
			
		||||
      console.error('Blurhash decoding failure', { err, hash });
 | 
			
		||||
    }
 | 
			
		||||
  }, [dummy, hash, width, height]);
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		
		Reference in a new issue