"Maximum regex stack depth reached" when hot realoads with Expo

[fabrizioiacobucci]

Hello,

I have this issue while using the library into an Expo project.

I have the following in my _layout file which is the entry point for Expo Router:

import "@/global.css";
import { StatusBar } from "expo-status-bar";
import Providers from "@components/providers";
import useLoadApp from "@/src/hooks/useLoadApp";
import { useTheme } from "@/src/hooks/useTheme";
import { Slot, SplashScreen } from "expo-router";
import { useCallback } from "react";
import { View } from "react-native";
import * as ExpoImage from "expo-image";
import { FileLogger } from "react-native-file-logger";

FileLogger.configure();

SplashScreen.preventAutoHideAsync();

export default function Layout() {
...

It works fine, but when I do any change in the code which triggers a hot reload in Metro then I receive the mentioned error:

I know 100% that, because when I remove the FileLogger.configure row it works fine also on hot reload.

[alois-beto]

Hi,
It's strange because stack overflows are usually triggered by React re-renders, but FileLogger has no state, so it shouldn't be causing any React re-render 🤔.

That said, I think it's better to remove the configure call from _layout because I'm not sure what expo-router is doing under the hood.
I recommend placing the call inside a useEffect with an empty dependency array, like in the example app:

react-native-file-logger/example/App.tsx

Lines 10 to 14 in 7cc865a

	useEffect(() => {
	FileLogger.configure({ logLevel: LogLevel.Debug, maximumFileSize: 1024 }).then(() =>
	console.log("File-logger configured")
	);
	}, []);

[fabrizioiacobucci]

Hi, It's strange because stack overflows are usually triggered by React re-renders, but FileLogger has no state, so it shouldn't be causing any React re-render 🤔.

That said, I think it's better to remove the configure call from _layout because I'm not sure what expo-router is doing under the hood. I recommend placing the call inside a useEffect with an empty dependency array, like in the example app:

react-native-file-logger/example/App.tsx

Lines 10 to 14 in 7cc865a

useEffect(() => {
FileLogger.configure({ logLevel: LogLevel.Debug, maximumFileSize: 1024 }).then(() =>
console.log("File-logger configured")
);
}, []);

Hello and thanks for the quick reply!

Unfortunately I'm still getting the same error.
Since I use Expo router, the entry point is the _layout.tsx file, so I don't have a app.tsx.

I tried to place the configure call in the index (homepage) and in the useLoadApp hook that I use initially to load some configs but I still get the same error.

I will give a try in other places and update acccordingly.
Thanks.

[acsel1985]

I have the same issue , only without expo. I place the call inside a useEffect, but still have this error

`function App() {

useEffect(() => {
FileLogger.configure().catch(console.error)
}, [])
`

[alois-beto]

Hmm, that's annoying, but I can't seem to reproduce it on my side.
Could you provide me with a sample repository so I can investigate?

[acsel1985]

Unfortunately, I don't know how to reproduce this error. I have a lot of logs in my application (BLE exchange with another device). And sometimes this error occurs. I couldn't figure out at what point. If I disable FileLogger, the error doesn't appear. Also, if I disable Hermes, the error doesn't appear either.

It seems that the error appears if the application is restored after minimizing or after hot reload.

[xlc]

We are also getting this error. Again, hard to reproduce but it happens frequently (few times a day) during development.

[xlc]

I debugged this a bit, I think it is related to calling configure multiple times due to hot reloading.

[shreyashebbar-sf]

I am also facing this error
A workaround I have found is if I keep the version at 0.5.6, I dont see the error.
Soon as I upgrade to 0.5.7 and above I face the above error.

[alois-beto]

Great find by @xlc and thanks for the fix! (#91)

Indeed, the bug was introduced in version 0.5.7, which addressed the issue that the previous console.log capturing method no longer worked with newer versions of react-native.

I’ve just published version 0.7.1 with the fix 🚀

[shreyashebbar-sf]

Tested with 0.7.1
It works as expected.
Thanks for the fix