Hiding Inputs with heap autocapture enabled before debounce succeeds causes app to crash

[b3sketchy]

Problem: Running into an issue and hoping for some help here, looks like others have hit a similar error as well. It seems that the debounce in the autocapture handling can cause app crashes when removing the input element prior to the debounce call firing. I'm running into this specifically in a search implementation where we redirect the user (and thus remove the input). When executed quickly by the user, the app crashes.

Reproduce (using Tamagui for the UI): If you type up to the 4-5 second mark the following error will cause the TypeError: null is not an object error to occur and crash the app.

// setup code that lives in our `_layout.tsx` file
Heap.logToConsole();
Heap.startRecording(heapService.getHeapId());
registerHeapAutocapture(true);

// component that will fail when typing after the 4 second mark but fine if stopped prior
export function Example() {
  const [search, setSearch] = useState('');
  const [hide, setHide] = useState(false);

  useEffect(() => {
    setTimeout(() => setHide(true), 5000);
  }, []);

  return (
      <YStack>
          {!hide && (
            <Input value={search} onChangeText={setSearch} />
          )}
        <Text>{search}</Text>
      </YStack>
  );
}

More info:

• I've tried withHeapIgnore, <HeapIgnore>, <HeapIgnoreText> with no success. If my understanding is correct, these are meant to hide data but not negate the setup that the autoregister does for input event capturing.
• Catching the error is possible on the global level but it's very generic so not something I'm comfortable handling directly since I can't ensure it's this specific debounce timeout error.
• Currently experimenting with a possible fix via babel but haven't had success thus coming here. In my case the FunctionDeclaration(path) handling in @heap/babel-plugin-heap-react-native-autocapture configures the autocapture hoc setup w/ the debounce. I'm trying to find a way to opt specific components out of this HOC structure.
• One "fix" that has helped but is a bit of a whack-a-mole and not an option in all use cases is setting a timeout when running the function that triggers the input to be removed. The HOC debounce is set to 1000ms though so having interactions wait longer than that to proceed isn't great for the UX.

Tools / Versions:

• Node: 20.8.0
• React: 18.2.0
• React Native: 0.73.7
• Expo: 50.0.17
• Tamagui: 1.88.6

Any help is much appreciated!

[sunkibaek]

Hey @b3sketchy I'm experiencing the same issue—did you find any solution to it?

[bnickel]

Hi @sunkibaek and @b3sketchy,

Sorry for the delay in responding. This bug uncovered three distinct issues:

1. Underlying TypeScript code was casting a variable from ... | undefined to any, silencing a warning about a possible runtime issue.
2. We shouldn't have let the code throw here, since our goal is to never impact an app on an SDK issue. Instead, we should have had a try/catch within trackInteraction.
3. Once those issues were resolved, the change event was producing an incomplete hierarchy, since it was resolving the hierarchy on a view without a host. We already trigger our debounced function early when the text field loses focus, so I'm updating it to also execute prior to the text field unmounting.

The changes are in review right now and I'm expecting a fix this week if not today.

[bnickel]

This issue has been resolved in @heap/heap-react-native-autocapture.

As a small note, issue was in the new @heap/heap-react-native-autocapture, which is not in hosted in this repo. We unfortunately do not currently have a public mirror for that repo.

[b3sketchy]

@bnickel Thank you for the update and the help! Will take a look at updating my end and retesting soon.

@sunkibaek the solution we ended up using was to use a "custom" (mainly re-used heaps) babel plugin to ignore the inputs. Let me know if this would be helpful to you and I can post it but seems like our issues should be resolved now.