Skip to content

Commit ac98187

Browse files
fix(ui): runtime errors related to calling reduce on array iterator
Fix an issue in certain browsers/builds causing a runtime error. A zod enum has a .options property, which is an array of all the options for the enum. This is handy for when you need to derive something from a zod schema. In this case, we represented the possible focus regions in the zod enum, then derived a mapping of region names to set of target HTML elements. Why isn't important, but suffice to say, we were using the .options property for this. But actually, we were using .options.values(), then calling .reduce() on that. An array's .values() method returns an _array iterator_. Array iterators do not have .reduce() methods! Except, apparently in some environments they do - it depends on the JS engine and whether or not polyfills for iterator helpers were included in the build. Turns out my dev environment - and most user browsers - do provide .reduce(), so we didn't catch this error. It took a large deployment and error monitoring to catch it. I've refactored the code to totally avoid deriving data from zod in this way.
1 parent fc71849 commit ac98187

File tree

1 file changed

+7
-8
lines changed
  • invokeai/frontend/web/src/common/hooks

1 file changed

+7
-8
lines changed

invokeai/frontend/web/src/common/hooks/focus.ts

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { atom, computed } from 'nanostores';
66
import type { RefObject } from 'react';
77
import { useEffect } from 'react';
88
import { objectKeys } from 'tsafe';
9-
import z from 'zod/v4';
109

1110
/**
1211
* We need to manage focus regions to conditionally enable hotkeys:
@@ -28,10 +27,7 @@ import z from 'zod/v4';
2827

2928
const log = logger('system');
3029

31-
/**
32-
* The names of the focus regions.
33-
*/
34-
const zFocusRegionName = z.enum([
30+
const REGION_NAMES = [
3531
'launchpad',
3632
'viewer',
3733
'gallery',
@@ -41,13 +37,16 @@ const zFocusRegionName = z.enum([
4137
'workflows',
4238
'progress',
4339
'settings',
44-
]);
45-
export type FocusRegionName = z.infer<typeof zFocusRegionName>;
40+
] as const;
41+
/**
42+
* The names of the focus regions.
43+
*/
44+
export type FocusRegionName = (typeof REGION_NAMES)[number];
4645

4746
/**
4847
* A map of focus regions to the elements that are part of that region.
4948
*/
50-
const REGION_TARGETS: Record<FocusRegionName, Set<HTMLElement>> = zFocusRegionName.options.values().reduce(
49+
const REGION_TARGETS: Record<FocusRegionName, Set<HTMLElement>> = REGION_NAMES.reduce(
5150
(acc, region) => {
5251
acc[region] = new Set<HTMLElement>();
5352
return acc;

0 commit comments

Comments
 (0)