13709656825

Committed 06 Mar 2025 10:42PM UTC coverage: 75.243% (-0.01%) from 75.257%

Build # 13709656825

Build Type

push

github

Committed by

web-flow

Commit Message

chore(webgpu): Improve error handling (#2329)

Run Details

2021 of 2649 branches covered (76.29%)

Branch coverage included in aggregate %.

9 of 50 new or added lines in 5 files covered. (18.0%)

1 existing line in 1 file now uncovered.

26333 of 35034 relevant lines covered (75.16%)

50.21 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

27.47

/modules/engine/src/animation-loop/make-animation-loop.ts

// luma.gl
// SPDX-License-Identifier: MIT
// Copyright (c) vis.gl contributors

import {luma, Adapter, Device} from '@luma.gl/core';
import {AnimationLoopTemplate} from './animation-loop-template';
import {AnimationLoop, AnimationLoopProps} from './animation-loop';
import type {AnimationProps} from './animation-props';

export type MakeAnimationLoopProps = Omit<
  AnimationLoopProps,
  'onCreateDevice' | 'onInitialize' | 'onRedraw' | 'onFinalize'
> & {
  /** List of adapters to use when creating the device */
  adapters?: Adapter[];
};

/**
 * Instantiates an animation loop and initializes it with the template.
 * @note The application needs to call `start()` on the returned animation loop to start the rendering loop.
 */
export function makeAnimationLoop(
  AnimationLoopTemplateCtor: typeof AnimationLoopTemplate,
  props?: MakeAnimationLoopProps
): AnimationLoop {
  let renderLoop: AnimationLoopTemplate | null = null;

  const device =
    props?.device ||
    luma.createDevice({id: 'animation-loop', adapters: props?.adapters, createCanvasContext: true});

  // Create an animation loop;
  const animationLoop = new AnimationLoop({
    ...props,

    device,

    async onInitialize(animationProps: AnimationProps): Promise<unknown> {
      clearError(animationProps.animationLoop.device!);
      try {
        // @ts-expect-error abstract to prevent instantiation
        renderLoop = new AnimationLoopTemplateCtor(animationProps);
        // Any async loading can be handled here
        return await renderLoop?.onInitialize(animationProps);
      } catch (error) {
        setError(animationProps.animationLoop.device!, error as Error);
        return null;
      }
    },

    onRender: (animationProps: AnimationProps) => renderLoop?.onRender(animationProps),

    onFinalize: (animationProps: AnimationProps) => renderLoop?.onFinalize(animationProps)
  });

  // @ts-expect-error Hack: adds info for the website to find
  animationLoop.getInfo = () => {
    // @ts-ignore
    // eslint-disable-next-line no-invalid-this
    return this.AnimationLoopTemplateCtor.info;
  };

  return animationLoop;
}

function setError(device: Device, error: Error): void {
  const canvas = device?.getDefaultCanvasContext().canvas;
  if (canvas instanceof HTMLCanvasElement) {
    canvas.style.overflow = 'visible';
    let errorDiv = document.getElementById('animation-loop-error');
    errorDiv?.remove();
    errorDiv = document.createElement('h1');
    errorDiv.id = 'animation-loop-error';
    errorDiv.innerHTML = error.message;
    errorDiv.style.position = 'absolute';
    errorDiv.style.top = '10px'; // left: 50%; transform: translate(-50%, -50%);';
    errorDiv.style.left = '10px';
    errorDiv.style.color = 'black';
    errorDiv.style.backgroundColor = 'red';
    canvas.parentElement?.appendChild(errorDiv);
    // canvas.style.position = 'absolute';
  }
}

function clearError(device: Device): void {
  const errorDiv = document.getElementById('animation-loop-error');
  if (errorDiv) {
    errorDiv.remove();
  }
}

1	// luma.gl	1✔
2	// SPDX-License-Identifier: MIT	1✔
3	// Copyright (c) vis.gl contributors	1✔
4		1✔
5	import {luma, Adapter, Device} from '@luma.gl/core';	1✔
6	import {AnimationLoopTemplate} from './animation-loop-template';	1✔
7	import {AnimationLoop, AnimationLoopProps} from './animation-loop';	1✔
8	import type {AnimationProps} from './animation-props';	1✔
9		1✔
10	export type MakeAnimationLoopProps = Omit<	1✔
11	AnimationLoopProps,	1✔
12	'onCreateDevice' \| 'onInitialize' \| 'onRedraw' \| 'onFinalize'	1✔
13	> & {	1✔
14	/** List of adapters to use when creating the device */	1✔
15	adapters?: Adapter[];	1✔
16	};	1✔
17		1✔
18	/**	1✔
19	* Instantiates an animation loop and initializes it with the template.	1✔
20	* @note The application needs to call `start()` on the returned animation loop to start the rendering loop.	1✔
21	*/	1✔
22	export function makeAnimationLoop(	1✔
23	AnimationLoopTemplateCtor: typeof AnimationLoopTemplate,	×
24	props?: MakeAnimationLoopProps	×
25	): AnimationLoop {	×
26	let renderLoop: AnimationLoopTemplate \| null = null;	×
27		×
28	const device =	×
29	props?.device \|\|	×
30	luma.createDevice({id: 'animation-loop', adapters: props?.adapters, createCanvasContext: true});	×
31		×
32	// Create an animation loop;	×
33	const animationLoop = new AnimationLoop({	×
34	...props,	×
35		×
36	device,	×
37		×
38	async onInitialize(animationProps: AnimationProps): Promise<unknown> {	×
NEW 39	clearError(animationProps.animationLoop.device!);	×
NEW 40	try {	×
NEW 41	// @ts-expect-error abstract to prevent instantiation	×
NEW 42	renderLoop = new AnimationLoopTemplateCtor(animationProps);	×
NEW 43	// Any async loading can be handled here	×
NEW 44	return await renderLoop?.onInitialize(animationProps);	×
NEW 45	} catch (error) {	×
NEW 46	setError(animationProps.animationLoop.device!, error as Error);	×
NEW 47	return null;	×
NEW 48	}	×
49	},	×
50		×
51	onRender: (animationProps: AnimationProps) => renderLoop?.onRender(animationProps),	×
52		×
53	onFinalize: (animationProps: AnimationProps) => renderLoop?.onFinalize(animationProps)	×
54	});	×
55		×
56	// @ts-expect-error Hack: adds info for the website to find	×
57	animationLoop.getInfo = () => {	×
58	// @ts-ignore	×
59	// eslint-disable-next-line no-invalid-this	×
60	return this.AnimationLoopTemplateCtor.info;	×
61	};	×
62		×
63	return animationLoop;	×
64	}	×
65		1✔
NEW 66	function setError(device: Device, error: Error): void {	×
NEW 67	const canvas = device?.getDefaultCanvasContext().canvas;	×
NEW 68	if (canvas instanceof HTMLCanvasElement) {	×
NEW 69	canvas.style.overflow = 'visible';	×
NEW 70	let errorDiv = document.getElementById('animation-loop-error');	×
NEW 71	errorDiv?.remove();	×
NEW 72	errorDiv = document.createElement('h1');	×
NEW 73	errorDiv.id = 'animation-loop-error';	×
NEW 74	errorDiv.innerHTML = error.message;	×
NEW 75	errorDiv.style.position = 'absolute';	×
NEW 76	errorDiv.style.top = '10px'; // left: 50%; transform: translate(-50%, -50%);';	×
NEW 77	errorDiv.style.left = '10px';	×
NEW 78	errorDiv.style.color = 'black';	×
NEW 79	errorDiv.style.backgroundColor = 'red';	×
NEW 80	canvas.parentElement?.appendChild(errorDiv);	×
NEW 81	// canvas.style.position = 'absolute';	×
NEW 82	}	×
NEW 83	}	×
84		1✔
NEW 85	function clearError(device: Device): void {	×
NEW 86	const errorDiv = document.getElementById('animation-loop-error');	×
NEW 87	if (errorDiv) {	×
NEW 88	errorDiv.remove();	×
NEW 89	}	×
NEW 90	}	×

visgl / luma.gl / 13709656825

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous