-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[✨] Reload page when QRLs return a 404 after code has changed and been redeployed #3777
Comments
Hi @DustinJSilk, with the latest version of Qwik, is it still a valid issue? |
Hi @gioboa, I havent tested it, is there a commit that has addressed the issue? |
In my production app I saw a refresh because of that. |
This PR #5521 solves the issue. Thanks @DustinJSilk for reporting it. |
@gioboa this still exists for me. The browser can still get stuck having the JS files cached and returning 404s until the site data is cleared and the page is refreshed. No amount of refreshing helps until the cache is emptied. Can we please reopen this the website can get completely bricked by this issue. This was tested on v1.4.5 which was released after that code change. i will monitor this with v1.5.3 going forward as well. |
That PR isn't sufficient, it's only for navigation, not for any other js loading. |
Note that 1.5.3 supports skew protection on vercel, which is another way of solving this, by making sure clients talk with a server that has their version. Only works for 12 hours though, unless you pay more. So the reload is still necessary. |
Thanks for giving this your time, @wmertens !! It seems like there are 2 issues at play here:
Could we achieve something similar to Vercel Skew Protection (Im not on vercel unfortunately)
It doesn't seem very elegant and Im not sure if theres a better Qwik way of doing this. |
@DustinJSilk if you're using aws or anything with s3 to host the files you can deploy everything in /build folder in the same /build folder. this will fix the preview/next file version issue for files. For routeAction$ you can pass for vercel you have a deployment-id in a cookie then for each request you just map the deployment-id to the correct location. because its a cookie this will also attach to any assets but I mention above the fix is just deploying everything in /build in the same folder on a cdn since everything in /build is immutable if the app was pwa then the version of the app will be downloaded (but still have mismatch action/loader/server$) |
@PatrickJS we had issues with action ids, even if the code does not change. Can you point me to the location, where the hash is created? The ID is only available if validation is not given right? Is the ID the shape of |
well it looks like if you have {
"id": "your-custom-action-id",
"validation": zod({}),
} I think @shairez requested this feature awhile back it looks like it was never documented /** @public */
export const routeActionQrl = ((
actionQrl: QRL<(form: JSONObject, event: RequestEventAction) => unknown>,
...rest: (CommonLoaderActionOptions | DataValidator)[]
) => {
const { id, validators } = getValidators(rest, actionQrl); const getValidators = (rest: (CommonLoaderActionOptions | DataValidator)[], qrl: QRL) => {
let id: string | undefined;
const validators: DataValidator[] = [];
if (rest.length === 1) {
const options = rest[0];
if (options && typeof options === 'object') {
if ('validate' in options) {
validators.push(options);
} else {
id = options.id;
if (options.validation) {
validators.push(...options.validation);
}
}
}
} else if (rest.length > 1) {
validators.push(...(rest.filter((v) => !!v) as DataValidator[]));
}
if (typeof id === 'string') {
if (isDev) {
if (!/^[\w/.-]+$/.test(id)) {
throw new Error(`Invalid id: ${id}, id can only contain [a-zA-Z0-9_.-]`);
}
}
id = `id_${id}`;
} else {
id = qrl.getHash();
}
return {
validators: validators.reverse(),
id,
};
}; |
Thanks @PatrickJS, will try it out tomorrow 🙏🙏🙏 |
@tzdesign did you try this? is it working? |
@gioboa I prepared qwik-insights for us in docker, as we are not allowed to send data to any other parties. (GDPR 😭) But I will try this next week. I saw that currently it's the qrl hash so it stays the same if you have no parameter changes. The problem for us was, that we updated the cart object, which is a huge type. We are not changing it so often, but I will try to fix it to a custom id. Because this action is more than crucial 😂 |
@PatrickJS looks like this is working: {
"id": "your-custom-action-id",
"validation": [zod$({})],
} Not sure why it needs to be an array. There is a signature with a type named Putting zod in plain, will fail typescript. But using it wrapped in an array works. |
Is your feature request related to a problem?
When a production codebase is updated, the urls to QRL can change. This means that the website breaks for all users that are currently on the website.
Requests to fetch each chunk abort with a 404.
This can be tested by running a preview server, changing the code and restarting it, then interacting with the website.
Describe the solution you'd like
Since QRLs are serialised into the html, my guess is that we would need to completely refresh the page to update them.
Unless there is a mechanism to refetch them.
It might be better to have an event/hook so that developers can decide what to do next when this happens.
Describe alternatives you've considered
We can't create aliases at build time because a user might have already loaded an out-of-date script which is incompatible with a newer version of another script.
This also didnt catch the aborted requests:
Additional context
This causes major issues with continuous integration.
The text was updated successfully, but these errors were encountered: