[$250] Console error after taking a photo.

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.3.11-48
Reproducible in staging?: Needs Reproduction (Reproduction blocked)
Reproducible in production?: Needs Reproduction
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @linhvovan29546
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Open Create an expense and select Scan manual.
2. Choose Take photo from the bottom sheet.
3. Take a photo.

Expected Result:

There are no console errors displayed

Actual Result:

There are two console errors displayed

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

Screen.Recording.2026-02-04.at.21.16.14.1.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022019108736353286750
• Upwork Job ID: 2019108736353286750
• Last Price Increase: 2026-02-04

Issue Owner

Current Issue Owner: @rojiphil

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022019108736353286750

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rojiphil (External)

[melvin-bot]

Triggered auto assignment to @lydiabarclay (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[daledah]

Proposal

Please re-state the problem that we are trying to solve in this issue.

There are two console errors displayed: device/camera-already-in-use: The given Camera Device is already in use!

What is the root cause of that problem?

The NavigationAwareCamera component in index.native.tsx doesn't have an onError handler to catch errors from react-native-vision-camera.

App/src/pages/iou/request/step/IOURequestStepScan/index.native.tsx

Lines 636 to 644 in 1ce341e

	<NavigationAwareCamera
	ref={camera}
	device={device}
	style={styles.flex1}
	zoom={device.neutralZoom}
	photo
	cameraTabIndex={1}
	onLayout={(e) => (viewfinderLayout.current = e.nativeEvent.layout)}
	/>

When the camera device is already in use (which can happen during rapid navigation or when the component re-renders), the VisionCamera library triggers an error callback. Since there's no onError prop passed to handle these errors gracefully, the error bubbles up and gets logged to the console.

What changes do you think we should make in order to solve the problem?

Add an onError handler to the NavigationAwareCamera component to catch and handle the camera errors gracefully.

<NavigationAwareCamera
    ref={camera}
    device={device}
    style={styles.flex1}
    zoom={device.neutralZoom}
    photo
    cameraTabIndex={1}
    onLayout={(e) => (viewfinderLayout.current = e.nativeEvent.layout)}
+   onError={(error) => {
+       Log.warn('Camera error', error);
+   }}
/>

What alternative solutions did you explore? (Optional)

N/A

[samranahm]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Console errors appear after taking a photo using "Scan manual" → "Take photo". While the photo capture works functionally, unhandled exceptions are being logged to the console, indicating potential stability issues.

What is the root cause of that problem?

The photo capture flow in IOURequestStepScan/index.native.tsx lacks proper error handling around native camera operations and file system calls, causing unhandled promise rejections to surface as console errors.

What changes do you think we should make in order to solve the problem?

Add proper error handling to photo capture in index.native.tsx

The console errors are likely from unhandled promise rejections in the photo capture chain:

  ReactNativeBlobUtil.fs
      .isDir(path)
      .then((isDir) => {
          if (isDir) {
              return;
          }
          ReactNativeBlobUtil.fs.mkdir(path).catch((error: string) => {
-             Log.warn('Error creating the directory', error);
+             Log.error('[PhotoCapture] Directory creation failed', {path, error});
+             throw new Error(`Failed to create upload directory: ${error}`);
          });
      })
      .catch((error: string) => {
-         Log.warn('Error checking if the directory exists', error);
+         Log.error('[PhotoCapture] Directory check failed', {path, error});
+         showCameraAlert();
+         setDidCapturePhoto(false);
+         return;
      })
      .then(() => {
+         if (!camera?.current) {
+             Log.error('[PhotoCapture] Camera reference is null');
+             showCameraAlert();
+             setDidCapturePhoto(false);
+             return;
+         }
          camera?.current
              ?.takePhoto({
                  flash: flash && hasFlash ? 'on' : 'off',
                  enableShutterSound: !isPlatformMuted,
                  path,
              })
              .then((photo: PhotoFile) => {
+                 if (!photo) {
+                     Log.error('[PhotoCapture] Photo capture returned null');
+                     showCameraAlert();
+                     setDidCapturePhoto(false);
+                     return;
+                 }
                  // existing photo processing...
              })
              .catch((error: string) => {
                  setDidCapturePhoto(false);
-                 showCameraAlert();
-                 Log.warn('Error taking photo', error);
+                 Log.error('[PhotoCapture] Photo capture failed', {error, path});
+                 showCameraAlert();
              });
      });

This ensures all promise rejections are properly handled and prevents unhandled exceptions from reaching the console.

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[abbasifaizan70]

Proposal

Please re-state the problem that we are trying to solve in this issue.

• Open Create an expense and select Scan manual.
• Choose Take photo from the bottom sheet.
• Take a photo.

There are two console errors displayed:

1. device/camera-already-in-use: The given Camera Device is already in use!
2. system/max-cameras-in-use: The maximum amount of Cameras available for simultaneous use has been reached!

Both errors originate from the camera component’s runtime (react-native-vision-camera) and are surfaced in the app’s console/LogBox, which is confusing and suggests a failure even when the photo is captured successfully.

What is the root cause of that problem?

The root cause is that react-native-vision-camera emits runtime errors when the camera session hits transient conditions:

• device/camera-already-in-use – The camera device is already in use (e.g. a brief race between preview and capture when taking a photo).
• system/max-cameras-in-use – The system limit on simultaneous camera usage is reached.

These are recoverable conditions: the library still delivers the photo, but if no onError handler is provided (or the default path is used), the errors are reported to the console and show up in the dev UI (e.g. LogBox). The app’s NavigationAwareCamera wrapper does not pass an onError handler to the underlying VisionCamera, so these runtime errors are logged as console errors.

What changes do you think we should make in order to solve the problem?

Handle camera runtime errors in the native camera wrapper and suppress the two known recoverable error codes so they are not shown as console errors. Other camera errors should still be forwarded to the parent (if an onError prop is provided).

App/src/pages/iou/request/step/IOURequestStepScan/NavigationAwareCamera/Camera.tsx

Lines 1 to 21 in 1ce341e

	import {useIsFocused} from '@react-navigation/native';
	import React from 'react';
	import {Camera as VisionCamera} from 'react-native-vision-camera';
	import type {NavigationAwareCameraNativeProps} from './types';
	// Wraps a camera that will only be active when the tab is focused or as soon as it starts to become focused.
	function Camera({cameraTabIndex, ref, ...props}: NavigationAwareCameraNativeProps) {
	const isCameraActive = useIsFocused();
	return (
	<VisionCamera
	ref={ref}
	photoQualityBalance="speed"
	// eslint-disable-next-line react/jsx-props-no-spreading
	{...props}
	isActive={isCameraActive}
	/>
	);
	}
	export default Camera;

import {useIsFocused} from '@react-navigation/native';
import React, {useCallback} from 'react';
import {Camera as VisionCamera} from 'react-native-vision-camera';
import type {CameraRuntimeError} from 'react-native-vision-camera';
import type {NavigationAwareCameraNativeProps} from './types';

// Error codes that are recoverable (e.g. race when opening camera vs taking photo) and should not be shown as console errors.
const SUPPRESSED_CAMERA_ERROR_CODES = ['device/camera-already-in-use', 'system/max-cameras-in-use'] as const;

// Wraps a camera that will only be active when the tab is focused or as soon as it starts to become focused.
function Camera({cameraTabIndex, ref, onError: propsOnError, ...props}: NavigationAwareCameraNativeProps) {
    const isCameraActive = useIsFocused();

    const onError = useCallback(
        (error: CameraRuntimeError) => {
            if (SUPPRESSED_CAMERA_ERROR_CODES.includes(error.code as (typeof SUPPRESSED_CAMERA_ERROR_CODES)[number])) {
                return;
            }
            propsOnError?.(error);
        },
        [propsOnError],
    );

    return (
        <VisionCamera
            ref={ref}
            photoQualityBalance="speed"
            onError={onError}
            // eslint-disable-next-line react/jsx-props-no-spreading
            {...props}
            isActive={isCameraActive}
        />
    );
}

export default Camera;

Summary of changes:

1. Imports: Add useCallback from React and CameraRuntimeError from react-native-vision-camera.
2. Suppressed codes: Define SUPPRESSED_CAMERA_ERROR_CODES with 'device/camera-already-in-use' and 'system/max-cameras-in-use'.
3. Destructure onError: Pull onError out of props as propsOnError so it is not overridden by the spread and can be invoked for non-suppressed errors.
4. onError handler:
   • For the two suppressed codes: return without logging or rethrowing, so they do not appear in the console.
   • For any other error: call propsOnError?.(error) so callers can still handle or log them.
5. VisionCamera: Pass onError={onError} so the library uses this handler instead of default logging for the suppressed cases.

Result: when the user follows Create expense → Scan manual → Take photo, the two recoverable camera errors are no longer shown as console errors, while other camera errors remain reportable via the optional onError prop.

What alternative solutions did you explore? (Optional)

1. Fixing the “race” so the errors never fire
   The conditions are device/system-dependent and can still occur during normal use (e.g. quick tap to capture). Suppressing these known recoverable codes is the recommended approach per VisionCamera’s error handling docs.

2. Handling onError only in the parent (IOURequestStepScan)
   Centralizing in the wrapper keeps the behavior consistent for all usages of NavigationAwareCamera and avoids duplicating the same logic at every call site.

3. Logging suppressed errors in development only
   Possible, but the goal is “no console errors” for this flow; skipping any log for these two codes keeps the console clean and matches the expected result.