jQuery Ajax error handling show custom exception messages

Question

Is there some way I can show custom exception messages as an alert in my jQuery AJAX error message   For example  if I want to throw an exception on the server side via Struts by throw new ApplicationException  User name already exists     I want to catch this message   user name already exists   in the jQuery AJAX error message   jQuery   save   click function        if  jQuery   form   jVal          jQuery ajax         type   POST         url   saveuser do         dataType   html         data   userId     encodeURIComponent trim document forms 0  userId value          success  function  response            jQuery   usergrid   trigger  reloadGrid            clear            alert  Details saved successfully                      error  function  xhr  ajaxOptions  thrownError            alert xhr status           alert thrownError                             On the second alert  where I alert the thrown error  I am getting undefined and the status code is 500   I am not sure where I am going wrong  What can I do to fix this problem

User · Answer

If someone is here as in 2016 for the answer, use .fail() for error handling as .error() is deprecated as of jQuery 3.0

$.ajax( "example.php" )
  .done(function() {
    alert( "success" );
  })
  .fail(function(jqXHR, textStatus, errorThrown) {
    //handle error here
  })

I hope it helps

User · Answer

Throw a new exception on server using   Response StatusCode   500  Response StatusDescription   ex Message    I believe that the StatusDescription is returned to the Ajax call     Example           Try              Dim file As String   Request QueryString  file                If String IsNullOrEmpty file  Then Throw New Exception  File does not exist                Dim sTmpFolder As String    Temp    amp  Session SessionID ToString                sTmpFolder   IO Path Combine Request PhysicalApplicationPath    sTmpFolder               file   IO Path Combine sTmpFolder  file               If IO File Exists file  Then                  IO File Delete file               End If          Catch ex As Exception              Response StatusCode   500              Response StatusDescription   ex Message            End Try

User · Answer

You need to convert the responseText to JSON  Using JQuery   jsonValue   jQuery parseJSON  jqXHR responseText    console log jsonValue Message

User · Answer

This is what I did and it works so far in a MVC 5 application    Controller s return type is ContentResult   public ContentResult DoSomething         if somethingIsTrue                Response StatusCode   500   Anything other than 2XX HTTP status codes should work         Response Write  My Message            return new ContentResult                 Do something in here       string json    whatever json goes here        return new ContentResult Content   json  ContentType    application json        And on client side this is what ajax function looks like    ajax       type   POST       url  URL      data  DATA      dataType   json       success  function  json              Do something with the returned json object             error  function  xhr  status  errorThrown              Here the status code can be retrieved like          xhr status             The message added to Response object in Controller can be retrieved as following          xhr responseText

User · Answer

This is probably caused by the JSON field names not having quotation marks   Change the JSON structure from    welcome  Welcome     to     welcome   Welcome

User · Answer

Although it has been many years since this question is asked  I still don t find xhr responseText as the answer I was looking for  It returned me string in the following format      error  true  message   The user name or password is incorrect      which I definitely don t want to show to the users  What I was looking for is something like below   alert xhr responseJSON message     xhr responseJSON message gives me the exact message from the Json Object which can be shown to the users

User · Answer

ServerSide           doPost HttpServletRequest request  HttpServletResponse response                try    logic              catch ApplicationException exception                   response setStatus 400                  response getWriter   write exception getMessage                      just added semicolon to end of line                    ClientSide    jQuery ajax     just showing error property            error  function jqXHR error  errorThrown                     if jqXHR status amp  amp jqXHR status  400                       alert jqXHR responseText                    else                     alert  Something went wrong                                            Generic Ajax Error Handling  If I need to do some generic error handling for all the ajax requests  I will set the ajaxError handler and display the error on a div named errorcontainer on the top of html content      div errorcontainer        ajaxError          function e  x  settings  exception                var message              var statusErrorMap                      400     Server understood the request  but request content was invalid                     401     Unauthorized access                     403     Forbidden resource can t be accessed                     500     Internal server error                     503     Service unavailable                              if  x status                    message  statusErrorMap x status                                   if  message                                         message  Unknown Error  n                                                     else if exception   parsererror                    message  Error  nParsing JSON Request failed                 else if exception   timeout                    message  Request Time out                 else if exception   abort                    message  Request was aborted by the server                else                   message  Unknown Error  n                                this  css  display   inline                  this  html message

User · Answer

You need to convert the responseText to JSON  Using JQuery   jsonValue   jQuery parseJSON  jqXHR responseText    console log jsonValue Message

User · Answer

If making a call to asp net  this will return the error message title   I didn t write all of formatErrorMessage myself but i find it very useful   function formatErrorMessage jqXHR  exception         if  jqXHR status     0            return   Not connected  nPlease verify your network connection           else if  jqXHR status    404            return   The requested page not found   404           else if  jqXHR status    500            return   Internal Server Error  500            else if  exception      parsererror             return   Requested JSON parse failed           else if  exception      timeout             return   Time out error           else if  exception      abort             return   Ajax request aborted           else           return   Uncaught Error  n    jqXHR responseText             var jqxhr     post addresshere  function       alert  success        done function     alert  second success        fail function xhr  err          var responseTitle    xhr responseText  filter  title   get 0       alert   responseTitle  text       n    formatErrorMessage xhr  err

User · Answer

Although it has been many years since this question is asked  I still don t find xhr responseText as the answer I was looking for  It returned me string in the following format      error  true  message   The user name or password is incorrect      which I definitely don t want to show to the users  What I was looking for is something like below   alert xhr responseJSON message     xhr responseJSON message gives me the exact message from the Json Object which can be shown to the users

User · Answer

save   click function            save   ajaxError function event xhr settings error             this  html  error     xhr  xhr status               error   error  unknown      page    settings url

User · Answer

In my case  I just removed HTTP VERB from  controller           HttpPost      ---- just removed this verb     public JsonResult CascadeDpGetProduct long categoryId                        List lt ProductModel gt  list   new List lt ProductModel gt             list   dp DpProductBasedOnCategoryandQty categoryId           return Json new SelectList list   quot Value quot    quot Text quot   JsonRequestBehavior AllowGet

User · Answer

x000D   x000D   error function  xhr  ajaxOptions  thrownError    x000D          alert xhr status   x000D          alert thrownError   x000D          x000D   x000D   x000D   in code error ajax  request for catch error connect between client  to server  if  you want show error message of your application send  in success scope   such as    x000D   x000D  success  function data   x000D          data is object  send  form server  x000D          property of data  x000D          status  type boolean  x000D          msg     type string x000D          result  type string x000D    if data status      true  not error  x000D               api text   val data result   x000D      x000D    else  x000D      x000D            error text   val data msg   x000D      x000D   x000D    x000D   x000D   x000D

User · Answer

I believe the Ajax response handler uses the HTTP status code to check if there was an error   So if you just throw a Java exception on your server side code but then the HTTP response doesn t have a 500 status code jQuery  or in this case probably the XMLHttpRequest object  will just assume that everything was fine   I m saying this because I had a similar problem in ASP NET where I was throwing something like a ArgumentException  Don t know what to do      but the error handler wasn t firing   I then set the Response StatusCode to either 500 or 200 whether I had an error or not

User · Answer

You have a JSON object of the exception thrown  in the xhr object  Just use  alert xhr responseJSON Message     The JSON object expose two other properties   ExceptionType  and  StackTrace

User · Answer

fmlogin   submit function           fmlogin   ajaxError function event xhr settings error              loading   fadeOut  fast                      showdata   fadeIn  slow                  showdata   html  Error please  try again later or reload the Page  Reason      xhr status          setTimeout function        showdata   fadeOut   opacity   0       5500   1000      delays 1 sec after the previous one               If there is any form is submit with validate  simply use the rest of the code      fmlogin   validate

User · Answer

In my case  I just removed HTTP VERB from  controller           HttpPost      ---- just removed this verb     public JsonResult CascadeDpGetProduct long categoryId                        List lt ProductModel gt  list   new List lt ProductModel gt             list   dp DpProductBasedOnCategoryandQty categoryId           return Json new SelectList list   quot Value quot    quot Text quot   JsonRequestBehavior AllowGet

User · Answer

Make sure you re setting Response StatusCode to something other than 200   Write your exception s message using Response Write  then use     xhr responseText     in your javascript

User · Answer

If someone is here as in 2016 for the answer, use .fail() for error handling as .error() is deprecated as of jQuery 3.0

$.ajax( "example.php" )
  .done(function() {
    alert( "success" );
  })
  .fail(function(jqXHR, textStatus, errorThrown) {
    //handle error here
  })

I hope it helps

User · Answer

A general reusable solution  This answer is provided for future reference to all those that bump into this problem  Solution consists of two things    Custom exception ModelStateException that gets thrown when validation fails on the server  model state reports validation errors when we use data annotations and use strong typed controller action parameters  Custom controller action error filter HandleModelStateExceptionAttribute that catches custom exception and returns HTTP error status with model state error in the body   This provides the optimal infrastructure for jQuery Ajax calls to use their full potential with success and error handlers   Client side code    ajax       type   POST       url   some url       success  function data  status  xhr               handle success            error  function xhr  status  error               handle error             Server side code   HandleModelStateException  public ActionResult Create User user        if   this ModelState IsValid                throw new ModelStateException this ModelState                 create new user because validation was successful     The whole problem is detailed in this blog post where you can find all the code to run this in your application

User · Answer

You have a JSON object of the exception thrown  in the xhr object  Just use  alert xhr responseJSON Message     The JSON object expose two other properties   ExceptionType  and  StackTrace

User · Answer

x000D   x000D   error function  xhr  ajaxOptions  thrownError    x000D          alert xhr status   x000D          alert thrownError   x000D          x000D   x000D   x000D   in code error ajax  request for catch error connect between client  to server  if  you want show error message of your application send  in success scope   such as    x000D   x000D  success  function data   x000D          data is object  send  form server  x000D          property of data  x000D          status  type boolean  x000D          msg     type string x000D          result  type string x000D    if data status      true  not error  x000D               api text   val data result   x000D      x000D    else  x000D      x000D            error text   val data msg   x000D      x000D   x000D    x000D   x000D   x000D

User · Answer

Make sure you re setting Response StatusCode to something other than 200   Write your exception s message using Response Write  then use     xhr responseText     in your javascript

User · Answer

This function basically generates unique random API key s and in case if it doesn t then pop-up dialog box with error message appears  In View Page    lt div class  form-group required  gt       lt label class  col-sm-2 control-label  for  input-storename  gt  lt  php echo  entry storename    gt  lt  label gt       lt div class  col-sm-6  gt           lt input type  text  class  apivalue   id  api text  readonly name  API  value   lt  php echo strtoupper substr md5 rand   microtime     0  12      gt   class  form-control    gt                                                                               lt button type  button  class  changeKey1  value  Refresh  gt Re-Generate lt  button gt       lt  div gt   lt  div gt    lt script gt    document  ready function            changeKey1   click function              debugger            ajax                   url    index php route account apiaccess regenerate                   type   POST                   dataType   json                   async false                  contentType   application json  charset utf-8                   success  function data                     var result    data sync id toUpperCase                            if result                                 api text   val result                                               debugger                                       error  function xhr  ajaxOptions  thrownError                      alert thrownError     r n    xhr statusText     r n    xhr responseText                                                 lt  script gt    From Controller   public function regenerate         json   array         api key   substr md5 rand 0 100  microtime     0  12        json  sync id      api key        json  message      Successfully API Generated        this- gt response- gt addHeader  Content-Type  application json         this- gt response- gt setOutput json encode  json        The optional callback parameter specifies a callback function to run when the load   method is completed  The callback function can have different parameters      Type  Function  jqXHR jqXHR  String textStatus  String errorThrown     A function to be called if the request fails   The function receives three arguments  The jqXHR  in jQuery 1 4 x  XMLHttpRequest  object  a string describing the type of error that occurred and an optional exception object  if one occurred  Possible values for the second argument  besides null  are  timeout    error    abort   and  parsererror   When an HTTP error occurs  errorThrown receives the textual portion of the HTTP status  such as  Not Found  or  Internal Server Error   As of jQuery 1 5  the error setting can accept an array of functions  Each function will be called in turn  Note  This handler is not called for cross-domain script and cross-domain JSONP requests

User · Answer

jQuery parseJSON is useful for success and error     ajax       url   controller action       type   POST       success  function  data  textStatus  jqXHR            var obj   jQuery parseJSON jqXHR responseText           notify data toString             notify textStatus toString                error  function  data  textStatus  jqXHR    notify textStatus

User · Answer

jQuery parseJSON is useful for success and error     ajax       url   controller action       type   POST       success  function  data  textStatus  jqXHR            var obj   jQuery parseJSON jqXHR responseText           notify data toString             notify textStatus toString                error  function  data  textStatus  jqXHR    notify textStatus

User · Answer

This function basically generates unique random API key s and in case if it doesn t then pop-up dialog box with error message appears  In View Page    lt div class  form-group required  gt       lt label class  col-sm-2 control-label  for  input-storename  gt  lt  php echo  entry storename    gt  lt  label gt       lt div class  col-sm-6  gt           lt input type  text  class  apivalue   id  api text  readonly name  API  value   lt  php echo strtoupper substr md5 rand   microtime     0  12      gt   class  form-control    gt                                                                               lt button type  button  class  changeKey1  value  Refresh  gt Re-Generate lt  button gt       lt  div gt   lt  div gt    lt script gt    document  ready function            changeKey1   click function              debugger            ajax                   url    index php route account apiaccess regenerate                   type   POST                   dataType   json                   async false                  contentType   application json  charset utf-8                   success  function data                     var result    data sync id toUpperCase                            if result                                 api text   val result                                               debugger                                       error  function xhr  ajaxOptions  thrownError                      alert thrownError     r n    xhr statusText     r n    xhr responseText                                                 lt  script gt    From Controller   public function regenerate         json   array         api key   substr md5 rand 0 100  microtime     0  12        json  sync id      api key        json  message      Successfully API Generated        this- gt response- gt addHeader  Content-Type  application json         this- gt response- gt setOutput json encode  json        The optional callback parameter specifies a callback function to run when the load   method is completed  The callback function can have different parameters      Type  Function  jqXHR jqXHR  String textStatus  String errorThrown     A function to be called if the request fails   The function receives three arguments  The jqXHR  in jQuery 1 4 x  XMLHttpRequest  object  a string describing the type of error that occurred and an optional exception object  if one occurred  Possible values for the second argument  besides null  are  timeout    error    abort   and  parsererror   When an HTTP error occurs  errorThrown receives the textual portion of the HTTP status  such as  Not Found  or  Internal Server Error   As of jQuery 1 5  the error setting can accept an array of functions  Each function will be called in turn  Note  This handler is not called for cross-domain script and cross-domain JSONP requests

User · Answer

Make sure you re setting Response StatusCode to something other than 200   Write your exception s message using Response Write  then use     xhr responseText     in your javascript

User · Answer

First we need to set  lt serviceDebug includeExceptionDetailInFaults  True    gt  in web config    lt serviceBehaviors gt     lt behavior name    gt      lt serviceMetadata httpGetEnabled  true    gt          lt serviceDebug includeExceptionDetailInFaults  true    gt       lt  behavior gt    lt  serviceBehaviors gt    In addition to that at jquery level in error part you need to parse error response that contains exception like    error function  response  q  t       var r   jQuery parseJSON response responseText           Then using r Message you can actully show exception text   Check complete code  http   www codegateway com 2012 04 jquery-ajax-handle-exception-thrown-by html

User · Answer

Controller   public class ClientErrorHandler   FilterAttribute  IExceptionFilter       public void OnException ExceptionContext filterContext                var response   filterContext RequestContext HttpContext Response          response Write filterContext Exception Message           response ContentType   MediaTypeNames Text Plain          filterContext ExceptionHandled   true            ClientErrorHandler  public class SomeController   Controller        HttpPost      public ActionResult SomeAction                 throw new Exception  Error message              View script     ajax       type   post   url    SomeController SomeAction       success  function  data  text                             error  function  request  status  error            alert request responseText

User · Answer

If making a call to asp net  this will return the error message title   I didn t write all of formatErrorMessage myself but i find it very useful   function formatErrorMessage jqXHR  exception         if  jqXHR status     0            return   Not connected  nPlease verify your network connection           else if  jqXHR status    404            return   The requested page not found   404           else if  jqXHR status    500            return   Internal Server Error  500            else if  exception      parsererror             return   Requested JSON parse failed           else if  exception      timeout             return   Time out error           else if  exception      abort             return   Ajax request aborted           else           return   Uncaught Error  n    jqXHR responseText             var jqxhr     post addresshere  function       alert  success        done function     alert  second success        fail function xhr  err          var responseTitle    xhr responseText  filter  title   get 0       alert   responseTitle  text       n    formatErrorMessage xhr  err

User · Answer

Make sure you re setting Response StatusCode to something other than 200   Write your exception s message using Response Write  then use     xhr responseText     in your javascript

User · Answer

This is what I did and it works so far in a MVC 5 application    Controller s return type is ContentResult   public ContentResult DoSomething         if somethingIsTrue                Response StatusCode   500   Anything other than 2XX HTTP status codes should work         Response Write  My Message            return new ContentResult                 Do something in here       string json    whatever json goes here        return new ContentResult Content   json  ContentType    application json        And on client side this is what ajax function looks like    ajax       type   POST       url  URL      data  DATA      dataType   json       success  function  json              Do something with the returned json object             error  function  xhr  status  errorThrown              Here the status code can be retrieved like          xhr status             The message added to Response object in Controller can be retrieved as following          xhr responseText

User · Answer

I believe the Ajax response handler uses the HTTP status code to check if there was an error   So if you just throw a Java exception on your server side code but then the HTTP response doesn t have a 500 status code jQuery  or in this case probably the XMLHttpRequest object  will just assume that everything was fine   I m saying this because I had a similar problem in ASP NET where I was throwing something like a ArgumentException  Don t know what to do      but the error handler wasn t firing   I then set the Response StatusCode to either 500 or 200 whether I had an error or not

User · Answer

I believe the Ajax response handler uses the HTTP status code to check if there was an error   So if you just throw a Java exception on your server side code but then the HTTP response doesn t have a 500 status code jQuery  or in this case probably the XMLHttpRequest object  will just assume that everything was fine   I m saying this because I had a similar problem in ASP NET where I was throwing something like a ArgumentException  Don t know what to do      but the error handler wasn t firing   I then set the Response StatusCode to either 500 or 200 whether I had an error or not

User · Answer

ServerSide           doPost HttpServletRequest request  HttpServletResponse response                try    logic              catch ApplicationException exception                   response setStatus 400                  response getWriter   write exception getMessage                      just added semicolon to end of line                    ClientSide    jQuery ajax     just showing error property            error  function jqXHR error  errorThrown                     if jqXHR status amp  amp jqXHR status  400                       alert jqXHR responseText                    else                     alert  Something went wrong                                            Generic Ajax Error Handling  If I need to do some generic error handling for all the ajax requests  I will set the ajaxError handler and display the error on a div named errorcontainer on the top of html content      div errorcontainer        ajaxError          function e  x  settings  exception                var message              var statusErrorMap                      400     Server understood the request  but request content was invalid                     401     Unauthorized access                     403     Forbidden resource can t be accessed                     500     Internal server error                     503     Service unavailable                              if  x status                    message  statusErrorMap x status                                   if  message                                         message  Unknown Error  n                                                     else if exception   parsererror                    message  Error  nParsing JSON Request failed                 else if exception   timeout                    message  Request Time out                 else if exception   abort                    message  Request was aborted by the server                else                   message  Unknown Error  n                                this  css  display   inline                  this  html message

User · Answer

A general reusable solution  This answer is provided for future reference to all those that bump into this problem  Solution consists of two things    Custom exception ModelStateException that gets thrown when validation fails on the server  model state reports validation errors when we use data annotations and use strong typed controller action parameters  Custom controller action error filter HandleModelStateExceptionAttribute that catches custom exception and returns HTTP error status with model state error in the body   This provides the optimal infrastructure for jQuery Ajax calls to use their full potential with success and error handlers   Client side code    ajax       type   POST       url   some url       success  function data  status  xhr               handle success            error  function xhr  status  error               handle error             Server side code   HandleModelStateException  public ActionResult Create User user        if   this ModelState IsValid                throw new ModelStateException this ModelState                 create new user because validation was successful     The whole problem is detailed in this blog post where you can find all the code to run this in your application

User · Answer

save   click function            save   ajaxError function event xhr settings error             this  html  error     xhr  xhr status               error   error  unknown      page    settings url

User · Answer

Throw a new exception on server using   Response StatusCode   500  Response StatusDescription   ex Message    I believe that the StatusDescription is returned to the Ajax call     Example           Try              Dim file As String   Request QueryString  file                If String IsNullOrEmpty file  Then Throw New Exception  File does not exist                Dim sTmpFolder As String    Temp    amp  Session SessionID ToString                sTmpFolder   IO Path Combine Request PhysicalApplicationPath    sTmpFolder               file   IO Path Combine sTmpFolder  file               If IO File Exists file  Then                  IO File Delete file               End If          Catch ex As Exception              Response StatusCode   500              Response StatusDescription   ex Message            End Try

User · Answer

I found this to be nice because I could parse out the message I was sending from the server and display a friendly message to the user without the stacktrace     error  function  response          var r   jQuery parseJSON response responseText         alert  Message      r Message         alert  StackTrace      r StackTrace         alert  ExceptionType      r ExceptionType

User · Answer

I believe the Ajax response handler uses the HTTP status code to check if there was an error   So if you just throw a Java exception on your server side code but then the HTTP response doesn t have a 500 status code jQuery  or in this case probably the XMLHttpRequest object  will just assume that everything was fine   I m saying this because I had a similar problem in ASP NET where I was throwing something like a ArgumentException  Don t know what to do      but the error handler wasn t firing   I then set the Response StatusCode to either 500 or 200 whether I had an error or not

User · Answer

First we need to set  lt serviceDebug includeExceptionDetailInFaults  True    gt  in web config    lt serviceBehaviors gt     lt behavior name    gt      lt serviceMetadata httpGetEnabled  true    gt          lt serviceDebug includeExceptionDetailInFaults  true    gt       lt  behavior gt    lt  serviceBehaviors gt    In addition to that at jquery level in error part you need to parse error response that contains exception like    error function  response  q  t       var r   jQuery parseJSON response responseText           Then using r Message you can actully show exception text   Check complete code  http   www codegateway com 2012 04 jquery-ajax-handle-exception-thrown-by html

User · Answer

fmlogin   submit function           fmlogin   ajaxError function event xhr settings error              loading   fadeOut  fast                      showdata   fadeIn  slow                  showdata   html  Error please  try again later or reload the Page  Reason      xhr status          setTimeout function        showdata   fadeOut   opacity   0       5500   1000      delays 1 sec after the previous one               If there is any form is submit with validate  simply use the rest of the code      fmlogin   validate

User · Answer

Controller   public class ClientErrorHandler   FilterAttribute  IExceptionFilter       public void OnException ExceptionContext filterContext                var response   filterContext RequestContext HttpContext Response          response Write filterContext Exception Message           response ContentType   MediaTypeNames Text Plain          filterContext ExceptionHandled   true            ClientErrorHandler  public class SomeController   Controller        HttpPost      public ActionResult SomeAction                 throw new Exception  Error message              View script     ajax       type   post   url    SomeController SomeAction       success  function  data  text                             error  function  request  status  error            alert request responseText

User · Answer

I found this to be nice because I could parse out the message I was sending from the server and display a friendly message to the user without the stacktrace     error  function  response          var r   jQuery parseJSON response responseText         alert  Message      r Message         alert  StackTrace      r StackTrace         alert  ExceptionType      r ExceptionType

User · Answer

This is probably caused by the JSON field names not having quotation marks   Change the JSON structure from    welcome  Welcome     to     welcome   Welcome

[jquery] jQuery Ajax error handling, show custom exception messages

Examples related to jquery

Examples related to ajax

Examples related to custom-exceptions