What I want my nextjs/react code to do:
When User clicks "Submit" button, a new tab is opened, then an axios request is sent that returns a response containing a URL generated by the API. I want that the newly opened tab gets redirected to the generated URL. I also need to keep the reference to the new tab because I need to implement some logic after the tab is closed.
Here and here is why I first open a page and then redirect.
My code looks like that:
function onSubmit(formData: any) {
const newPage = window.open('', '_blank', 'toolbar=0,location=0,menubar=0');
apiCall(newPage);
}
function apiCall(newPage: any) {
axios({
method: "post",
url: "someAPI",
}).then(function (success) {
setTimeout(() => {
newPage.location.assign(success.data.generatedURL);
});
const timer = setInterval(() => {
if (newPage!.closed) {
clearInterval(timer);
// some logic after the new page was closed
}
}, 100);
}).catch(function (error) {
// some code here
});
}
I also tried putting the newPage.location.assign(success.data.generatedURL);
before of the setTimeout
like that:
newPage.location.assign(success.data.generatedURL);
setTimeout(() => {
});
The code works perfectly in my local environment across different browsers (Chrome, Firefox, Safari, Brave) on both desktop and mobile devices. However, when deployed to production, the redirection issue occurs specifically on mobile devices in production. Although the new blank tab opens, it fails to redirect, despite the fact that I reach the "then" function and receive the correct redirect URL (checked with console.log)
Any help to solve the problem will be very appreciated!
edit: additional information - chrome://inspect logs in iPhone Chrome browser show the following error: ERROR TypeError: Load failed ERROR Error: Failed to load script: / next/static/error-8353112a0135502.js