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

Mariano Martinez Peck marianopeck at gmail.com
Sat Sep 24 13:05:54 UTC 2016


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(''<span
style="color:#4F2817;">''+jsonValue.errorTitle+''</span>'');
$(''#ajaxErrorDialog'').find(''.exceptionDescription'').html(''<span
style="color:#4F2817;">''+jsonValue.exceptionDescription+''</span>'');
$(''#ajaxErrorDialog'').find(''.dateAndTime'').html(''<span
style="color:#4F2817;">''+jsonValue.dateAndTime+''</span>'');
$(''#ajaxErrorDialog'').find(''.continuationOop'').html(''<span
style="color:#4F2817;">''+jsonValue.continuationOop+''</span>'');
$(''#ajaxErrorDialog'').find(''.packagesVersions'').html(''<span
style="color:#4F2817;">''+jsonValue.packagesVersions+''</span>'');
$(''#ajaxErrorDialog'').find(''.sitePrefix'').html(''<span
style="color:#4F2817;">''+jsonValue.sitePrefix+''</span>'');
$(''#ajaxErrorDialog'').find(''.user'').html(''<span
style="color:#4F2817;">''+jsonValue.user+''</span>'');
$(''#ajaxErrorDialog'').find(''.gemPid'').html(''<span
style="color:#4F2817;">''+jsonValue.gemPid+''</span>'');
$(''#ajaxErrorDialog'').find(''.gemSessionID'').html(''<span
style="color:#4F2817;">''+jsonValue.gemSessionID+''</span>'');

$(''#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. <cyril.ferlicot at gmail.com
> 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
> > seaside at lists.squeakfoundation.org
> > 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
> seaside at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
>


-- 
Mariano
http://marianopeck.wordpress.com
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.squeakfoundation.org/pipermail/seaside/attachments/20160924/a5a5ca83/attachment-0001.htm


More information about the seaside mailing list