Skip to content
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.

Sign up for GitHub

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

Show custom alert for 504 error from nginx #1052

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Show custom alert for 504 error from nginx #1052

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
23ecff2
Move i18n message for 413 error
matthew-white Nov 14, 2024
7768ad5
Show custom alert for 504 error from nginx
matthew-white Nov 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions src/locales/en.json5
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -441,8 +441,7 @@
"mixin": {
"request": {
"alert": {
"fileSize": "The file “{name}” that you are trying to upload is larger than the 100 MB limit.",
"entityTooLarge": "The data that you are trying to upload is too large.",
"fileSize": "The file “{name}” that you are trying to upload is larger than the 100 MB limit."
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This message is not used in src/util/request.js, so I'm leaving it where it is for now. I think it's very likely that we'll move it at some point in the future (probably as part of #675).

}
}
},
Expand Down Expand Up @@ -475,6 +474,11 @@
"noResponse": "Something went wrong: there was no response to your request.",
// {status} is an HTTP status code, for example, 404.
"errorNotProblem": "Something went wrong: error code {status}.",
"error": {
// @transifexKey mixin.request.alert.entityTooLarge
"413": "The data that you are trying to upload is too large.",
"504": "Your request took too long, and Central stopped waiting for it."
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lognaturel @alyblenkin, let me know if you can think of a better message to show to users.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(Just for the 504, we've already shipped the message for the 413.)

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did it take too long? Can they do anything to prevent it from timing out?

I don't think we need to say and "Central stopped waiting" because it seems like we gave up :)

We could say "Your request took too long because X. Try again."

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Really good to get your feedback, @alyblenkin! I do think "why did you give up?!" is a likely reaction to that message. I think most users of websites have never thought about the idea that there has to be some processing time cutoff or the service could get stuck forever.

Who is the improved message aimed at? What action do we want them to take?

One idea is to aim it at end users and to get them to contact us. "The latest action you attempted timed out. Please contact [email protected] with a description of what you were doing."

Another is to aim it at server admins and give them the idea that they could adjust the timeout. "The latest action exceeded the configured nginx timeout."

Maybe a hybrid? "The latest action exceeded the configured nginx timeout. Please contact [email protected] with a description of what you were doing."

That gives admins a clue of an action they could take today. It also encourages frustrated users to give us more info on when this happens.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like "The latest action you attempted timed out. Please contact [email protected] with a description of what you were doing" because it’s actionable and user-friendly! From a non-technical perspective, "configured nginx" might require some Googling, so perhaps sticking with the first option is better unless you think server admins would immediately understand what's happening?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That sounds good to me as well!

This is a small thing, but would the message read alright without the word "latest"? On some pages, it's possible for the user to take multiple actions at once. I don't think this is the most likely thing, but it's within the realm of possibility that an earlier action was the one to result in the error, while the latest action was successful.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah that's an interesting point. So maybe something like:

Your action could not be completed because it timed out. If this issue continues happening, please contact [email protected] with a description of what you were doing.

},
"problem": {
// A "resource" is a generic term for something in Central, for example,
// a Project, a Web User, or a Form.
Expand Down
7 changes: 4 additions & 3 deletions src/util/request.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,9 +231,10 @@ export const requestAlertMessage = (i18n, axiosError, problemToAlert = undefined
const { response } = axiosError;
if (response == null) return i18n.t('util.request.noResponse');
if (!(axiosError.config.url.startsWith('/v1/') && isProblem(response.data))) {
if (response.status === 413)
return i18n.t('mixin.request.alert.entityTooLarge');
return i18n.t('util.request.errorNotProblem', response);
const key = `util.request.error.${response.status}`;
return i18n.te(key)
? i18n.t(key)
: i18n.t('util.request.errorNotProblem', response);
}

const problem = response.data;
Expand Down
25 changes: 18 additions & 7 deletions test/unit/request.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -631,13 +631,24 @@ describe('util/request', () => {
message.should.equal('Something went wrong: error code 500.');
});

it('returns a message about 413 error response that is not a Problem', () => {
const message = requestAlertMessage(i18n, mockAxiosError({
status: 413,
data: '<html><head><title>413 Request Entity Too Large</title></head>...',
config: { url: '/v1/projects/1/datasets/trees/entities' }
}));
message.should.equal('The data that you are trying to upload is too large.');
describe('custom messages for specific errors when response is not a Problem', () => {
it('returns a message for a 413', () => {
const message = requestAlertMessage(i18n, mockAxiosError({
status: 413,
data: '<html><head><title>413 Request Entity Too Large</title></head>...',
config: { url: '/v1/projects/1/datasets/trees/entities' }
}));
message.should.equal('The data that you are trying to upload is too large.');
});

it('returns a message for a 504', () => {
const message = requestAlertMessage(i18n, mockAxiosError({
status: 504,
data: '<html><head><title>504 Gateway Timeout</title></head>...',
config: { url: '/v1/projects/1/datasets/trees/entities' }
}));
message.should.startWith('Your request took too long,');
});
});

it('returns the message of a Problem', () => {
Expand Down
5 changes: 5 additions & 0 deletions transifex/strings_en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -982,6 +982,11 @@
"string": "Something went wrong: error code {status}.",
"developer_comment": "{status} is an HTTP status code, for example, 404."
},
"error": {
"504": {
"string": "Your request took too long, and Central stopped waiting for it."
}
},
"problem": {
"404_1": {
"string": "The resource you are looking for cannot be found. The resource may have been deleted.",
Expand Down