atomirx 0.0.1 → 0.0.4

package/src/react/rx.tsx

@@ -1,14 +1,58 @@
-import { memo } from "react";
+import {
+  Component,
+  memo,
+  ReactElement,
+  ReactNode,
+  Suspense,
+  ErrorInfo,
+  useCallback,
+  useRef,
+} from "react";
 import { Atom, Equality } from "../core/types";
-import { useValue } from "./useValue";
+import { useSelector } from "./useSelector";
 import { shallowEqual } from "../core/equality";
 import { isAtom } from "../core/isAtom";
-import { ContextSelectorFn } from "../core/select";
+import { ReactiveSelector, SelectContext } from "../core/select";
+
+/**
+ * Options for rx() with inline loading/error handling and memoization control.
+ */
+export interface RxOptions<T> {
+  /** Equality function for value comparison */
+  equals?: Equality<T>;
+  /** Render function for loading state */
+  loading?: () => ReactNode;
+  /** Render function for error state */
+  error?: (props: { error: unknown }) => ReactNode;
+
+  /**
+   * Dependencies array for selector memoization.
+   *
+   * Controls when the selector callback is recreated:
+   * - **Atom shorthand** (`rx(atom$)`): Always memoized by atom reference (deps ignored)
+   * - **Function selector without deps**: No memoization (recreated every render)
+   * - **Function selector with `deps: []`**: Stable forever (never recreated)
+   * - **Function selector with `deps: [a, b]`**: Recreated when deps change
+   *
+   * @example
+   * ```tsx
+   * // No memoization (default for functions) - selector recreated every render
+   * rx(({ read }) => read(count$) * 2)
+   *
+   * // Stable selector - never recreated
+   * rx(({ read }) => read(count$) * 2, { deps: [] })
+   *
+   * // Recreate when multiplier changes
+   * rx(({ read }) => read(count$) * multiplier, { deps: [multiplier] })
+   * ```
+   */
+  deps?: unknown[];
+}
 
 /**
  * Reactive inline component that renders atom values directly in JSX.
  *
- * `rx` is a convenience wrapper around `useValue` that returns a memoized
+ * `rx` is a convenience wrapper around `useSelector` that returns a memoized
  * React component instead of a value. This enables fine-grained reactivity
  * without creating separate components for each reactive value.
  *
@@ -18,25 +62,54 @@ import { ContextSelectorFn } from "../core/select";
  *
  * ```tsx
  * // ❌ WRONG - Don't use async function
- * rx(async ({ get }) => {
+ * rx(async ({ read }) => {
  *   const data = await fetch('/api');
  *   return data.name;
  * });
  *
  * // ❌ WRONG - Don't return a Promise
- * rx(({ get }) => fetch('/api').then(r => r.json()));
+ * rx(({ read }) => fetch('/api').then(r => r.json()));
  *
- * // ✅ CORRECT - Create async atom and read with get()
+ * // ✅ CORRECT - Create async atom and read with read()
  * const data$ = atom(fetch('/api').then(r => r.json()));
- * rx(({ get }) => get(data$).name); // Suspends until resolved
+ * rx(({ read }) => read(data$).name); // Suspends until resolved
+ * ```
+ *
+ * ## IMPORTANT: Do NOT Use try/catch - Use safe() Instead
+ *
+ * **Never wrap `read()` calls in try/catch blocks.** The `read()` function throws
+ * Promises when atoms are loading (Suspense pattern). A try/catch will catch
+ * these Promises and break the Suspense mechanism.
+ *
+ * ```tsx
+ * // ❌ WRONG - Catches Suspense Promise, breaks loading state
+ * rx(({ read }) => {
+ *   try {
+ *     return <span>{read(user$).name}</span>;
+ *   } catch (e) {
+ *     return <span>Error</span>; // Catches BOTH errors AND loading promises!
+ *   }
+ * });
+ *
+ * // ✅ CORRECT - Use safe() to catch errors but preserve Suspense
+ * rx(({ read, safe }) => {
+ *   const [err, user] = safe(() => read(user$));
+ *   if (err) return <span>Error: {err.message}</span>;
+ *   return <span>{user.name}</span>;
+ * });
  * ```
  *
+ * The `safe()` utility:
+ * - **Catches errors** and returns `[error, undefined]`
+ * - **Re-throws Promises** to preserve Suspense behavior
+ * - Returns `[undefined, result]` on success
+ *
  * ## Why Use `rx`?
  *
  * Without `rx`, you need a separate component to subscribe to an atom:
  * ```tsx
  * function PostsList() {
- *   const posts = useValue(postsAtom);
+ *   const posts = useSelector(postsAtom);
  *   return posts.map((post) => <Post post={post} />);
  * }
  *
@@ -54,8 +127,8 @@ import { ContextSelectorFn } from "../core/select";
  * function Page() {
  *   return (
  *     <Suspense fallback={<Loading />}>
- *       {rx(({ get }) =>
- *         get(postsAtom).map((post) => <Post post={post} />)
+ *       {rx(({ read }) =>
+ *         read(postsAtom).map((post) => <Post post={post} />)
  *       )}
  *     </Suspense>
  *   );
@@ -73,7 +146,7 @@ import { ContextSelectorFn } from "../core/select";
  *
  * ## Async Atoms (Suspense-Style API)
  *
- * `rx` inherits the Suspense-style API from `useValue`:
+ * `rx` inherits the Suspense-style API from `useSelector`:
  * - **Loading state**: The getter throws a Promise (triggers Suspense)
  * - **Error state**: The getter throws the error (triggers ErrorBoundary)
  * - **Resolved state**: The getter returns the value
@@ -84,7 +157,7 @@ import { ContextSelectorFn } from "../core/select";
  *   return (
  *     <ErrorBoundary fallback={<div>Error!</div>}>
  *       <Suspense fallback={<div>Loading...</div>}>
- *         {rx(({ get }) => get(userAtom).name)}
+ *         {rx(({ read }) => read(userAtom).name)}
  *       </Suspense>
  *     </ErrorBoundary>
  *   );
@@ -93,9 +166,9 @@ import { ContextSelectorFn } from "../core/select";
  *
  * Or catch errors in the selector to handle loading/error inline:
  * ```tsx
- * {rx(({ get }) => {
+ * {rx(({ read }) => {
  *   try {
- *     return get(userAtom).name;
+ *     return read(userAtom).name;
  *   } catch {
  *     return "Loading...";
  *   }
@@ -103,13 +176,37 @@ import { ContextSelectorFn } from "../core/select";
  * ```
  *
  * @template T - The type of the selected/derived value
- * @param selector - Context-based selector function with `{ get, all, any, race, settled }`.
+ * @param selector - Context-based selector function with `{ read, all, any, race, settled }`.
  *                   Must return sync value, not a Promise.
  * @param equals - Equality function or shorthand ("strict", "shallow", "deep").
  *                 Defaults to "shallow".
  * @returns A React element that renders the selected value
  * @throws Error if selector returns a Promise or PromiseLike
  *
+ * ## IMPORTANT: Atom Value Must Be ReactNode
+ *
+ * When using the shorthand `rx(atom)`, the atom's value must be a valid `ReactNode`
+ * (string, number, boolean, null, undefined, or React element). Objects and arrays
+ * are NOT valid ReactNode values and will cause React to throw an error.
+ *
+ * ```tsx
+ * // ✅ CORRECT - Atom contains ReactNode (number)
+ * const count$ = atom(5);
+ * rx(count$);
+ *
+ * // ✅ CORRECT - Atom contains ReactNode (string)
+ * const name$ = atom("John");
+ * rx(name$);
+ *
+ * // ❌ WRONG - Atom contains object (not ReactNode)
+ * const user$ = atom({ name: "John", age: 30 });
+ * rx(user$); // React error: "Objects are not valid as a React child"
+ *
+ * // ✅ CORRECT - Use selector to extract ReactNode from object
+ * rx(({ read }) => read(user$).name);
+ * rx(({ read }) => <UserCard user={read(user$)} />);
+ * ```
+ *
  * @example Shorthand - render atom value directly
  * ```tsx
  * const count = atom(5);
@@ -124,7 +221,7 @@ import { ContextSelectorFn } from "../core/select";
  * const count = atom(5);
  *
  * function DoubledCounter() {
- *   return <div>Doubled: {rx(({ get }) => get(count) * 2)}</div>;
+ *   return <div>Doubled: {rx(({ read }) => read(count) * 2)}</div>;
  * }
  * ```
  *
@@ -136,7 +233,7 @@ import { ContextSelectorFn } from "../core/select";
  * function FullName() {
  *   return (
  *     <div>
- *       {rx(({ get }) => `${get(firstName)} ${get(lastName)}`)}
+ *       {rx(({ read }) => `${read(firstName)} ${read(lastName)}`)}
  *     </div>
  *   );
  * }
@@ -163,14 +260,14 @@ import { ContextSelectorFn } from "../core/select";
  *   return (
  *     <div>
  *       <header>
- *         <Suspense fallback="...">{rx(({ get }) => get(userAtom).name)}</Suspense>
+ *         <Suspense fallback="...">{rx(({ read }) => read(userAtom).name)}</Suspense>
  *       </header>
  *       <main>
  *         <Suspense fallback="...">
- *           {rx(({ get }) => get(postsAtom).length)} posts
+ *           {rx(({ read }) => read(postsAtom).length)} posts
  *         </Suspense>
  *         <Suspense fallback="...">
- *           {rx(({ get }) => get(notificationsAtom).length)} notifications
+ *           {rx(({ read }) => read(notificationsAtom).length)} notifications
  *         </Suspense>
  *       </main>
  *     </div>
@@ -187,8 +284,8 @@ import { ContextSelectorFn } from "../core/select";
  * function Info() {
  *   return (
  *     <div>
- *       {rx(({ get }) =>
- *         get(showDetails) ? get(details) : get(summary)
+ *       {rx(({ read }) =>
+ *         read(showDetails) ? read(details) : read(summary)
  *       )}
  *     </div>
  *   );
@@ -203,7 +300,7 @@ import { ContextSelectorFn } from "../core/select";
  *   return (
  *     <div>
  *       {rx(
- *         ({ get }) => get(user).name,
+ *         ({ read }) => read(user).name,
  *         (a, b) => a === b // Only re-render if name string changes
  *       )}
  *     </div>
@@ -221,7 +318,7 @@ import { ContextSelectorFn } from "../core/select";
  *     <Suspense fallback={<Loading />}>
  *       {rx(({ all }) => {
  *         // Use all() to wait for multiple atoms
- *         const [user, posts] = all([userAtom, postsAtom]);
+ *         const [user, posts] = all([user$, posts$]);
  *         return <DashboardContent user={user} posts={posts} />;
  *       })}
  *     </Suspense>
@@ -252,23 +349,133 @@ import { ContextSelectorFn } from "../core/select";
  * ```
  */
 // Overload: Pass atom directly to get its value (shorthand)
-export function rx<T>(atom: Atom<T>, equals?: Equality<Awaited<T>>): Awaited<T>;
+export function rx<T extends ReactNode | PromiseLike<ReactNode>>(
+  atom: Atom<T>,
+  options?: Equality<T> | RxOptions<T>
+): ReactElement;
 
 // Overload: Context-based selector function
-export function rx<T>(selector: ContextSelectorFn<T>, equals?: Equality<T>): T;
+export function rx<T extends ReactNode | PromiseLike<ReactNode>>(
+  selector: ReactiveSelector<T>,
+  options?: Equality<T> | RxOptions<T>
+): ReactElement;
 
 export function rx<T>(
-  selectorOrAtom: ContextSelectorFn<T> | Atom<T>,
-  equals?: Equality<unknown>
-): T {
+  selectorOrAtom: ReactiveSelector<T> | Atom<T>,
+  options?: Equality<unknown> | RxOptions<unknown>
+): ReactElement {
+  // Normalize options
+  const normalizedOptions: RxOptions<unknown> | undefined =
+    options === undefined
+      ? undefined
+      : typeof options === "object" &&
+          options !== null &&
+          !Array.isArray(options) &&
+          ("equals" in options || "loading" in options || "error" in options)
+        ? (options as RxOptions<unknown>)
+        : { equals: options as Equality<unknown> };
+
   return (
     <Rx
       selectorOrAtom={
-        selectorOrAtom as ContextSelectorFn<unknown> | Atom<unknown>
+        selectorOrAtom as ReactiveSelector<unknown> | Atom<unknown>
       }
-      equals={equals}
+      options={normalizedOptions}
     />
-  ) as unknown as T;
+  );
+}
+
+/**
+ * Internal ErrorBoundary for rx with error handler.
+ */
+interface RxErrorBoundaryProps {
+  children: ReactNode;
+  onError?: (props: { error: unknown }) => ReactNode;
+}
+
+interface RxErrorBoundaryState {
+  error: unknown | null;
+}
+
+class RxErrorBoundary extends Component<
+  RxErrorBoundaryProps,
+  RxErrorBoundaryState
+> {
+  state: RxErrorBoundaryState = { error: null };
+
+  static getDerivedStateFromError(error: unknown): RxErrorBoundaryState {
+    return { error };
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  componentDidCatch(_error: Error, _errorInfo: ErrorInfo) {
+    // Error already captured in state
+  }
+
+  render() {
+    if (this.state.error !== null && this.props.onError) {
+      return <>{this.props.onError({ error: this.state.error })}</>;
+    }
+
+    if (this.state.error !== null) {
+      // No handler - re-throw to parent ErrorBoundary
+      throw this.state.error;
+    }
+
+    return this.props.children;
+  }
+}
+
+/**
+ * Internal component that renders the selector value.
+ */
+function RxInner(props: {
+  selector: ReactiveSelector<unknown>;
+  equals?: Equality<unknown>;
+}) {
+  const selected = useSelector(props.selector, props.equals);
+  return <>{selected ?? null}</>;
+}
+
+/**
+ * Wrapper component to defer loading() call until actually needed.
+ */
+function RxLoadingFallback(props: { render: () => ReactNode }) {
+  return <>{props.render()}</>;
+}
+
+/**
+ * Optional Suspense wrapper - only wraps if fallback is provided.
+ */
+function RxSuspenseWrapper(props: {
+  fallback?: () => ReactNode;
+  children: ReactNode;
+}) {
+  if (props.fallback) {
+    return (
+      <Suspense fallback={<RxLoadingFallback render={props.fallback} />}>
+        {props.children}
+      </Suspense>
+    );
+  }
+  return <>{props.children}</>;
+}
+
+/**
+ * Optional ErrorBoundary wrapper - only wraps if onError is provided.
+ */
+function RxErrorWrapper(props: {
+  onError?: (props: { error: unknown }) => ReactNode;
+  children: ReactNode;
+}) {
+  if (props.onError) {
+    return (
+      <RxErrorBoundary onError={props.onError}>
+        {props.children}
+      </RxErrorBoundary>
+    );
+  }
+  return <>{props.children}</>;
 }
 
 /**
@@ -277,24 +484,48 @@ export function rx<T>(
  * Memoized with React.memo to ensure:
  * 1. Parent components don't cause unnecessary re-renders
  * 2. Only atom changes trigger re-renders
- * 3. Props comparison is shallow (selectorOrAtom, equals references)
+ * 3. Props comparison is shallow (selectorOrAtom, options references)
  *
  * Renders `selected ?? null` to handle null/undefined values gracefully in JSX.
  */
 const Rx = memo(
   function Rx(props: {
-    selectorOrAtom: ContextSelectorFn<unknown> | Atom<unknown>;
-    equals?: Equality<unknown>;
+    selectorOrAtom: ReactiveSelector<unknown> | Atom<unknown>;
+    options?: RxOptions<unknown>;
   }) {
-    // Convert atom shorthand to context selector
-    const selector: ContextSelectorFn<unknown> = isAtom(props.selectorOrAtom)
-      ? ({ get }) => get(props.selectorOrAtom as Atom<unknown>)
-      : (props.selectorOrAtom as ContextSelectorFn<unknown>);
+    // Store latest selector/atom in ref to avoid stale closures
+    const selectorRef = useRef(props.selectorOrAtom);
+    selectorRef.current = props.selectorOrAtom;
+
+    // Compute memoization dependencies:
+    // - Atom: always include atom reference for stability
+    // - Function + no deps: new object each render (no memoization)
+    // - Function + deps: use provided deps for controlled memoization
+    const isAtomInput = isAtom(props.selectorOrAtom);
+    const userDeps = props.options?.deps;
+    const deps = isAtomInput
+      ? [props.selectorOrAtom, ...(userDeps ?? [])] // Atom: stable + optional user deps
+      : (userDeps ?? [{}]); // Function: user deps or no memoization
+
+    // Memoized selector that reads from ref to always get latest value
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const selector = useCallback(
+      (context: SelectContext) =>
+        isAtom(selectorRef.current)
+          ? context.read(selectorRef.current as Atom<unknown>)
+          : (selectorRef.current as ReactiveSelector<unknown>)(context),
+      deps
+    );
 
-    const selected = useValue(selector, props.equals);
-    return <>{selected ?? null}</>;
+    return (
+      <RxErrorWrapper onError={props.options?.error}>
+        <RxSuspenseWrapper fallback={props.options?.loading}>
+          <RxInner selector={selector} equals={props.options?.equals} />
+        </RxSuspenseWrapper>
+      </RxErrorWrapper>
+    );
   },
   (prev, next) =>
     shallowEqual(prev.selectorOrAtom, next.selectorOrAtom) &&
-    prev.equals === next.equals
+    shallowEqual(prev.options, next.options)
 );

package/src/react/useAction.test.ts

@@ -28,9 +28,7 @@ describe.each(wrappers)("useAction - $mode", ({ mode, renderHook }) => {
     it("should execute on mount when lazy is false", () => {
       const fn = vi.fn(() => "result");
 
-      const { result } = renderHook(() =>
-        useAction(fn, { lazy: false })
-      );
+      const { result } = renderHook(() => useAction(fn, { lazy: false }));
 
       // Sync function completes immediately, so status is success
       expect(result.current.status).toBe("success");
@@ -47,9 +45,7 @@ describe.each(wrappers)("useAction - $mode", ({ mode, renderHook }) => {
           })
       );
 
-      const { result } = renderHook(() =>
-        useAction(fn, { lazy: false })
-      );
+      const { result } = renderHook(() => useAction(fn, { lazy: false }));
 
       expect(result.current.status).toBe("loading");
       // In strict mode, effects run twice
@@ -248,7 +244,9 @@ describe.each(wrappers)("useAction - $mode", ({ mode, renderHook }) => {
         result.current();
       });
 
-      expect(fn).toHaveBeenCalledWith({ signal: expect.any(AbortSignal) });
+      expect(fn).toHaveBeenCalledWith(
+        expect.objectContaining({ signal: expect.any(AbortSignal) })
+      );
     });
 
     it("should create new AbortSignal per call", () => {
@@ -802,7 +800,7 @@ describe.each(wrappers)("useAction - $mode", ({ mode, renderHook }) => {
   describe("atom deps", () => {
     it("should execute when atom in deps changes", () => {
       const userId = atom(1);
-      const fn = vi.fn(() => `user-${userId.value}`);
+      const fn = vi.fn(() => `user-${userId.get()}`);
 
       const { result } = renderHook(() =>
         useAction(fn, { lazy: false, deps: [userId] })
@@ -825,7 +823,7 @@ describe.each(wrappers)("useAction - $mode", ({ mode, renderHook }) => {
     it("should NOT re-execute when atom value is shallowly equal", () => {
       // Use atom with shallow equals so it doesn't notify on shallow equal values
       const config = atom({ page: 1 }, { equals: "shallow" });
-      const fn = vi.fn(() => `page-${config.value?.page}`);
+      const fn = vi.fn(() => `page-${config.get()?.page}`);
 
       renderHook(() => useAction(fn, { lazy: false, deps: [config] }));
 
@@ -847,7 +845,7 @@ describe.each(wrappers)("useAction - $mode", ({ mode, renderHook }) => {
       // Even if atom notifies, if the selected values are shallow equal,
       // the effect should not re-run
       const userId = atom(1);
-      const fn = vi.fn(() => `user-${userId.value}`);
+      const fn = vi.fn(() => `user-${userId.get()}`);
 
       renderHook(() => useAction(fn, { lazy: false, deps: [userId] }));
 
@@ -866,7 +864,7 @@ describe.each(wrappers)("useAction - $mode", ({ mode, renderHook }) => {
 
     it("should re-execute when atom value changes (not shallow equal)", () => {
       const config = atom({ page: 1 });
-      const fn = vi.fn(() => `page-${config.value?.page}`);
+      const fn = vi.fn(() => `page-${config.get()?.page}`);
 
       const { result } = renderHook(() =>
         useAction(fn, { lazy: false, deps: [config] })
@@ -915,7 +913,7 @@ describe.each(wrappers)("useAction - $mode", ({ mode, renderHook }) => {
 
     it("should NOT track atoms when lazy is true (default)", () => {
       const userId = atom(1);
-      const fn = vi.fn(() => `user-${userId.value}`);
+      const fn = vi.fn(() => `user-${userId.get()}`);
 
       renderHook(() => useAction(fn, { lazy: true, deps: [userId] }));
 
@@ -936,7 +934,7 @@ describe.each(wrappers)("useAction - $mode", ({ mode, renderHook }) => {
       const fn = vi.fn(({ signal }: { signal: AbortSignal }) => {
         signals.push(signal);
         return new Promise<string>((resolve) => {
-          setTimeout(() => resolve(`user-${userId.value}`), 1000);
+          setTimeout(() => resolve(`user-${userId.get()}`), 1000);
         });
       });
 
@@ -958,7 +956,7 @@ describe.each(wrappers)("useAction - $mode", ({ mode, renderHook }) => {
     it("should work with multiple atoms in deps", () => {
       const userId = atom(1);
       const orgId = atom(100);
-      const fn = vi.fn(() => `user-${userId.value}-org-${orgId.value}`);
+      const fn = vi.fn(() => `user-${userId.get()}-org-${orgId.get()}`);
 
       const { result } = renderHook(() =>
         useAction(fn, { lazy: false, deps: [userId, orgId] })

package/src/react/useAction.ts

@@ -1,7 +1,9 @@
 import { useReducer, useCallback, useRef, useEffect } from "react";
 import { isPromiseLike } from "../core/isPromiseLike";
-import { useValue } from "./useValue";
+import { useSelector } from "./useSelector";
 import { isAtom } from "../core/isAtom";
+import { Pipeable } from "../core/types";
+import { withUse } from "../core/withUse";
 
 /**
  * State for an action that hasn't been dispatched yet.
@@ -76,7 +78,7 @@ export interface UseActionOptions {
   /**
    * Dependencies array. When lazy is false, re-executes when deps change.
    * - Regular values: compared by reference (like useEffect deps)
-   * - Atoms: automatically tracked via useValue, re-executes when atom values change
+   * - Atoms: automatically tracked via useSelector, re-executes when atom values change
    * @default []
    */
   deps?: unknown[];
@@ -85,7 +87,7 @@ export interface UseActionOptions {
 /**
  * Context passed to the action function.
  */
-export interface ActionContext {
+export interface ActionContext extends Pipeable {
   /** AbortSignal for cancellation. New signal per dispatch. */
   signal: AbortSignal;
 }
@@ -305,11 +307,11 @@ function reducer<T>(
  *
  * function UserProfile() {
  *   const fetchUser = useAction(
- *     async ({ signal }) => fetchUserApi(userIdAtom.value, { signal }),
+ *     async ({ signal }) => fetchUserApi(userIdAtom.get(), { signal }),
  *     { lazy: false, deps: [userIdAtom] }
  *   );
  *   // Automatically re-fetches when userIdAtom changes
- *   // Atoms in deps are tracked reactively via useValue
+ *   // Atoms in deps are tracked reactively via useSelector
  * }
  * ```
  *
@@ -487,9 +489,9 @@ export function useAction<TResult, TLazy extends boolean = true>(
   // Get atoms from deps for reactive tracking
   const atomDeps = (lazy ? [] : (deps ?? [])).filter(isAtom);
 
-  // Use useValue to track atom deps and get their values for effect deps comparison
-  const atomValues = useValue(({ get }) => {
-    return atomDeps.map((atom) => get(atom));
+  // Use useSelector to track atom deps and get their values for effect deps comparison
+  const atomValues = useSelector(({ read }) => {
+    return atomDeps.map((atom) => read(atom));
   });
 
   const dispatch = useCallback((): AbortablePromise<Awaited<TResult>> => {
@@ -506,7 +508,7 @@ export function useAction<TResult, TLazy extends boolean = true>(
 
     let result: TResult;
     try {
-      result = fnRef.current({ signal: abortController.signal });
+      result = fnRef.current(withUse({ signal: abortController.signal }));
     } catch (error) {
       // Sync error - update state and return rejected promise
       dispatchAction({ type: "ERROR", error });