Smalltalk › Frameworks & Tools › Seaside › Seaside General

Custom error handler for Seaside expiration and AJAX errors [ WAS ] Re: [Seaside] [AJAX] #script: & #html: vs #onSuccess: & #load & #html:

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

2 messages Options

Mariano Martinez Peck

Custom error handler for Seaside expiration and AJAX errors [ WAS ] Re: [Seaside] [AJAX] #script: & #html: vs #onSuccess: & #load & #html:

Hi Cyril,

For seaside expiration I do not hook on EACH ajax call but with a global handler:

html document addLoadScript: (html jQuery document

onAjaxError: (self ajaxErrorHandler asFunction: #('event' 'jqxhr' 'settings' 'exception'))).

Note that this handler will take care of seaside expiration as well as errors in either rendering phase or callback phase from ajax calls.

ajaxErrorHandler

" If the ajax callback error was timeout...then we alert the user and forward to login again. If it was an ajax error callback, then we display a modal showing all the available error information. See #renderSupportForAjaxErrorHandlerOn: for more details.

Also... note that in DpQuuveProductionWalkbackErrorHandler >> open: (our custom Seaside error handler for GemStone), when there is an AJAX error, in the response object we write a JSON serialized dictionary with all the error information (see #respondFromAjaxRequestWith:continuation:). Therefore, what we must do here is to read the response (will be JSON), parse that, and get the useful information. Finally, refresh the

'ajaxErrorDialog' with the error info we got and finally show the dialog.

^ ' if (jqxhr.status == 403) {

alert("For security reasons we sign people out during periods of inactivity. Please sign in again.");

window.location.href = settings.url.split("?")[0].replace("help","");

} else {

// This is on purpose because sometimes with TinyMCE we would get status 0 and empty error...when there was no error

// The reason is explained in: http://bartwullems.blogspot.com.ar/2012/02/ajax-request-returns-status-0.html

if (jqxhr.readyState == 0 || jqxhr.status == 0) {

return; //Skip this error

};

// Lets write to console all error info possbile

var requestResponse = {

url: settings.url,

method: settings.type,

data: settings.data,

httpStatus: jqxhr.status,

error: exception || jqxhr.statusText,

data: settings.data

};

responseText = jqxhr.responseText;

responseText.replace(/[\\"'']/g, ''\\$&'').replace(/\u0000/g, ''\\0'');

jsonValue = jQuery.parseJSON(responseText);

console.error(jsonValue);

$(''#ajaxErrorDialog'').find(''.errorTitle'').html(''''+jsonValue.errorTitle+'''');

$(''#ajaxErrorDialog'').find(''.exceptionDescription'').html(''''+jsonValue.exceptionDescription+'''');

$(''#ajaxErrorDialog'').find(''.dateAndTime'').html(''''+jsonValue.dateAndTime+'''');

$(''#ajaxErrorDialog'').find(''.continuationOop'').html(''''+jsonValue.continuationOop+'''');

$(''#ajaxErrorDialog'').find(''.packagesVersions'').html(''''+jsonValue.packagesVersions+'''');

$(''#ajaxErrorDialog'').find(''.sitePrefix'').html(''''+jsonValue.sitePrefix+'''');

$(''#ajaxErrorDialog'').find(''.user'').html(''''+jsonValue.user+'''');

$(''#ajaxErrorDialog'').find(''.gemPid'').html(''''+jsonValue.gemPid+'''');

$(''#ajaxErrorDialog'').find(''.gemSessionID'').html(''''+jsonValue.gemSessionID+'''');

$(''#ajaxErrorDialog'').modal(''show'');

And then, I also render my "ajaxErrorDialog" which is the component/dialog rendered when there is an ajax error:

renderSupportForAjaxErrorHandlerOn: html

html tbsModal

id: 'ajaxErrorDialog';

with: [

html

tbsModalDialog: [

html

tbsModalContent: [

html

tbsModalHeader: [

html tbsModalTitle

level: 4;

with: [

html tbsAlert beDanger

with: [

html tbsGlyphIcon iconTime.

html space.

html text: 'Unexpected Error!'.

html span

style: 'text-color: white';

with: [ html tbsModalCloseIcon ] ] ] ].

html

tbsModalBody: [

"This is a template div that is filled/replaced with the real text from DpQuuve >> ajaxErrorHandler"

html

text:

'The operation you tried failed because of an unexpected error. You may want to either try again, sign out and sign in and try again, or contact us about the error. However, note that other aspects of the program should continue to work normally.'.

html

break;

break.

html div

with: [

html text: 'Error description: '.

html span class: 'exceptionDescription' ].

html break.

html div

with: [

html text: 'Error ID: '.

html span class: 'continuationOop' ].

html break.

html div

with: [

html text: 'Generated at: '.

html span class: 'dateAndTime' ].

html break.

html div

with: [

html text: 'By user: '.

html span class: 'user' ].

html break.

html div

with: [

html text: 'Site url: '.

html span class: 'sitePrefix' ].

html break.

html div

with: [

html text: 'Packages: '.

html span class: 'packagesVersions' ].

html break.

html div

with: [

html text: 'Gem PID: '.

html span class: 'gemPid' ].

html break.

html div

with: [

html text: 'Gem Session ID: '.

html span class: 'gemSessionID' ].

] "html tbsModalFooter: [

html tbsButton: 'Close'.

html tbsButton bePrimary; with: 'Save changes'

]" ] ] ]

Hope this helps. Let me know if it is clear. If it is not yet, I can do (and I should do!) a blog post explaining better.

Cheers,

On Sat, Sep 24, 2016 at 8:15 AM, Cyril Ferlicot D. <[hidden email]> wrote:

Le 24/09/2016 à 08:48, Johan Brichau a écrit :
> Hi Mariano,
>
> First button does a single ajax call and responds a js script.
> Second button does two ajax calls, first one without a response content, second one with a html response content.
>
> Both achieve the same end result but the second one requires two request-response cycles to your server.
> The second one will thus achieve the end result slower than the first one.
>
> We typically also try to optimize as much as possible into single ajax requests.
>
> Mind that you _can_ combine a single primary and multiple secondary callback blocks into a single ajax call.
> A primary callback is a callback that responds a content to the client (#script:, #html:, #json:, #text, ….)
> A secondary callback is a callback that does not respond content (#callback:value:, #callback:passengers:, #callback:json: , …)
> There is an exception to this rule, #callback: is implemented in the Seaside jQuery binding as a primary callback, even if it does not return any content.
>
> Although for this example, I would actually write it as follows, because the #callback: block is a primary callback.
>
> html button
> bePush;
> onClick: (html jQuery id: ‘myDivId’ load html: [:r | | … do some other stuff …. then ... self renderMyDivOn: r. ] )
> value: ‘Test’
>

Hi!

With this example how is manage the case where the session expire?
In general I do:

onClick: (html jQuery ajax
callback: [ ];
onSuccess: ( (html jQuery id: 'myDivId') load html: [ :r | self
renderMyDivOn: r. ]);
onError: 'location.reload();' "probably session expiration");

> Now, it also depends of the ‘myDivId’ is known when rendering the button or not, but in this simple example this would yield the same result ;)
>
> cheers
> Johan
>
>

> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>

--
Cyril Ferlicot

http://www.synectique.eu

2 rue Jacques Prévert 01,
59650 Villeneuve d'ascq France

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Mariano
http://marianopeck.wordpress.com

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

CyrilFerlicot

Re: Custom error handler for Seaside expiration and AJAX errors [ WAS ] Re: [Seaside] [AJAX] #script: & #html: vs #onSuccess: & #load & #html:

Le 24/09/2016 à 15:05, Mariano Martinez Peck a écrit :

> Hi Cyril,
>
> For seaside expiration I do not hook on EACH ajax call but with a global
> handler:
>
> html document addLoadScript: (html jQuery document
> onAjaxError: (self ajaxErrorHandler
> asFunction: #('event' 'jqxhr' 'settings' 'exception'))).
>
>
> Note that this handler will take care of seaside expiration as well as
> errors in either rendering phase or callback phase from ajax calls.
>
>
> ajaxErrorHandler
> " If the ajax callback error was timeout...then we alert the user and
> forward to login again. If it was an ajax error callback, then we
> display a modal showing all the available error information. See
> #renderSupportForAjaxErrorHandlerOn: for more details.
> Also... note that in DpQuuveProductionWalkbackErrorHandler >> open: (our
> custom Seaside error handler for GemStone), when there is an AJAX error,
> in the response object we write a JSON serialized dictionary with all
> the error information (see #respondFromAjaxRequestWith:continuation:).
> Therefore, what we must do here is to read the response (will be JSON),
> parse that, and get the useful information. Finally, refresh the
> 'ajaxErrorDialog' with the error info we got and finally show the dialog.
> "
>
> ^ ' if (jqxhr.status == 403) {
> alert("For security reasons we sign people out during
> periods of inactivity. Please sign in again.");
> window.location.href =
> settings.url.split("?")[0].replace("help","");
> } else {
>
> // This is on purpose because sometimes with TinyMCE we would get status
> 0 and empty error...when there was no error
> // The reason is explained in:
> http://bartwullems.blogspot.com.ar/2012/02/ajax-request-returns-status-0.html
> if (jqxhr.readyState == 0 || jqxhr.status == 0) {
> return; //Skip this error
> };
>
> // Lets write to console all error info possbile
> var requestResponse = {
> url: settings.url,
> method: settings.type,
> data: settings.data,
> httpStatus: jqxhr.status,
> error: exception || jqxhr.statusText,
> data: settings.data
> };
>
> responseText = jqxhr.responseText;
> responseText.replace(/[\\"'']/g, ''\\$&'').replace(/\u0000/g, ''\\0'');
> jsonValue = jQuery.parseJSON(responseText);
> console.error(jsonValue);
>
> $(''#ajaxErrorDialog'').find(''.errorTitle'').html('' style="color:#4F2817;">''+jsonValue.errorTitle+'''');
> $(''#ajaxErrorDialog'').find(''.exceptionDescription'').html('' style="color:#4F2817;">''+jsonValue.exceptionDescription+'''');
> $(''#ajaxErrorDialog'').find(''.dateAndTime'').html('' style="color:#4F2817;">''+jsonValue.dateAndTime+'''');
> $(''#ajaxErrorDialog'').find(''.continuationOop'').html('' style="color:#4F2817;">''+jsonValue.continuationOop+'''');
> $(''#ajaxErrorDialog'').find(''.packagesVersions'').html('' style="color:#4F2817;">''+jsonValue.packagesVersions+'''');
> $(''#ajaxErrorDialog'').find(''.sitePrefix'').html('' style="color:#4F2817;">''+jsonValue.sitePrefix+'''');
> $(''#ajaxErrorDialog'').find(''.user'').html('' style="color:#4F2817;">''+jsonValue.user+'''');
> $(''#ajaxErrorDialog'').find(''.gemPid'').html('' style="color:#4F2817;">''+jsonValue.gemPid+'''');
> $(''#ajaxErrorDialog'').find(''.gemSessionID'').html('' style="color:#4F2817;">''+jsonValue.gemSessionID+'''');
>
> $(''#ajaxErrorDialog'').modal(''show'');
>
> }'
>
>
>
> And then, I also render my "ajaxErrorDialog" which is the
> component/dialog rendered when there is an ajax error:
>
>
> renderSupportForAjaxErrorHandlerOn: html
> html tbsModal
> id: 'ajaxErrorDialog';
> with: [
> html
> tbsModalDialog: [
> html
> tbsModalContent: [
> html
> tbsModalHeader: [
> html tbsModalTitle
> level: 4;
> with: [
> html tbsAlert beDanger
> with: [
> html tbsGlyphIcon iconTime.
> html space.
> html text: 'Unexpected Error!'.
> html span
> style: 'text-color: white';
> with: [ html tbsModalCloseIcon ] ] ] ].
> html
> tbsModalBody: [
> "This is a template div that is filled/replaced
> with the real text from DpQuuve >> ajaxErrorHandler"
> html
> text:
> 'The operation you tried failed because of an
> unexpected error. You may want to either try again, sign out and sign in
> and try again, or contact us about the error. However, note that other
> aspects of the program should continue to work normally.'.
> html
> break;
> break.
> html div
> with: [
> html text: 'Error description: '.
> html span class: 'exceptionDescription' ].
> html break.
> html div
> with: [
> html text: 'Error ID: '.
> html span class: 'continuationOop' ].
> html break.
> html div
> with: [
> html text: 'Generated at: '.
> html span class: 'dateAndTime' ].
> html break.
> html div
> with: [
> html text: 'By user: '.
> html span class: 'user' ].
> html break.
> html div
> with: [
> html text: 'Site url: '.
> html span class: 'sitePrefix' ].
> html break.
> html div
> with: [
> html text: 'Packages: '.
> html span class: 'packagesVersions' ].
> html break.
> html div
> with: [
> html text: 'Gem PID: '.
> html span class: 'gemPid' ].
> html break.
> html div
> with: [
> html text: 'Gem Session ID: '.
> html span class: 'gemSessionID' ].
>
> ]"html tbsModalFooter: [
> html tbsButton: 'Close'.
> html tbsButton bePrimary; with: 'Save changes'
> ]" ] ] ]
>
>
> Hope this helps. Let me know if it is clear. If it is not yet, I can do
> (and I should do!) a blog post explaining better.
>
> Cheers,
>
>
> --
> Mariano
> http://marianopeck.wordpress.com
>
>
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>

Hi!

Thanks a lot for this sample :)

I will probably take a look in the next weeks (I don't have the time
now) to use that in Synectique Tools.

If I have any problem when I will come back to this issue I will come
back on the subject. I think it will improve a lot Synectique Tools and
my projects! :)

--
Cyril Ferlicot

http://www.synectique.eu

2 rue Jacques Prévert 01,
59650 Villeneuve d'ascq France

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

signature.asc (836 bytes) Download Attachment