{"id":332,"date":"2018-05-24T18:33:25","date_gmt":"2018-05-24T18:33:25","guid":{"rendered":"https:\/\/sidroniolima.com.br\/blog\/?p=332"},"modified":"2018-05-24T18:33:41","modified_gmt":"2018-05-24T18:33:41","slug":"axios-network-error","status":"publish","type":"post","link":"https:\/\/sidroniolima.com.br\/blog\/2018\/05\/24\/axios-network-error\/","title":{"rendered":"Axios Network Error"},"content":{"rendered":"\n<div class=\"twitter-share\"><a href=\"https:\/\/twitter.com\/intent\/tweet?text=Axios%20Network%20Error%20-%20handling%20more%20error%20information%20on%20React%20Native%20app%20dev.&#038;hashtags=axios%20javascript%20react-native%20network%20error&#038;via=sidroniolima\" class=\"twitter-share-button\">Tweet<\/a><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/advicesacademy.com\/wp-content\/uploads\/2014\/01\/Common-Android-Errors.png\" alt=\"Android error image.\" width=\"237\" height=\"232\" \/><\/p>\n<p>Trying to figure out what the hell was going on with a axios get request, I discover by axios &#8211; npm documentation a better or more complete way tho handle with error.<\/p>\n<p>This is how:<\/p>\n<div class=\"highlight js\">\n<div class=\"line\"><span class=\"source js\"><span class=\"variable other object js\">axios<\/span><span class=\"meta js\"><span class=\"meta delimiter method period js\">.<\/span><span class=\"support function dom js\">get<\/span><span class=\"punctuation definition begin round js\">(<\/span><span class=\"string quoted single js\"><span class=\"punctuation definition string begin js\">&#8216;<\/span>\/user\/12345<span class=\"punctuation definition string end js\">&#8216;<\/span><\/span><span class=\"punctuation definition end round js\">)<\/span><\/span><\/span><\/div>\n<div class=\"line\"><span class=\"source js\">\u00a0\u00a0<span class=\"meta js\"><span class=\"meta delimiter method period js\">.<\/span><span class=\"entity name function js\">catch<\/span><span class=\"punctuation definition begin round js\">(<\/span><span class=\"meta function js\"><span class=\"storage type function js\">function<\/span>\u00a0<span class=\"punctuation definition begin round js\">(<\/span><span class=\"variable function js\">error<\/span><span class=\"punctuation definition end round js\">)<\/span><\/span>\u00a0<span class=\"punctuation definition function begin curly js\">{<\/span><\/span><\/span><\/div>\n<div class=\"line\"><span class=\"source js\"><span class=\"meta js\">\u00a0\u00a0\u00a0\u00a0<span class=\"keyword control js\">if<\/span>\u00a0<span class=\"meta brace round js\">(<\/span><span class=\"variable other object js\">error<\/span><span class=\"meta delimiter period js\">.<\/span><span class=\"variable other js\">response<\/span><span class=\"meta brace round js\">)<\/span>\u00a0<span class=\"meta brace curly js\">{<\/span><\/span><\/span><\/div>\n<div class=\"line\"><span class=\"source js\"><span class=\"meta js\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"comment line double-slash js\"><span class=\"punctuation definition comment js\">\/\/<\/span>\u00a0The\u00a0request\u00a0was\u00a0made\u00a0and\u00a0the\u00a0server\u00a0responded\u00a0with\u00a0a\u00a0status\u00a0code<\/span><\/span><\/span><\/div>\n<div class=\"line\"><span class=\"source js\"><span class=\"meta js\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"comment line double-slash js\"><span class=\"punctuation definition comment js\">\/\/<\/span>\u00a0that\u00a0falls\u00a0out\u00a0of\u00a0the\u00a0range\u00a0of\u00a02xx<\/span><\/span><\/span><\/div>\n<div class=\"line\"><span class=\"source js\"><span class=\"meta js\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"entity name type object console js\">console<\/span><span class=\"meta delimiter method period js\">.<\/span><span class=\"support function console js\">log<\/span><span class=\"punctuation definition begin round js\">(<\/span><span class=\"variable other object js\">error<\/span><span class=\"meta delimiter period js\">.<\/span><span class=\"variable other object js\">response<\/span><span class=\"meta delimiter period js\">.<\/span><span class=\"support variable dom js\">data<\/span><span class=\"punctuation definition end round js\">)<\/span><span class=\"punctuation terminator statement js\">;<\/span><\/span><\/span><\/div>\n<div class=\"line\"><span class=\"source js\"><span class=\"meta js\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"entity name type object console js\">console<\/span><span class=\"meta delimiter method period js\">.<\/span><span class=\"support function console js\">log<\/span><span class=\"punctuation definition begin round js\">(<\/span><span class=\"variable other object js\">error<\/span><span class=\"meta delimiter period js\">.<\/span><span class=\"variable other object js\">response<\/span><span class=\"meta delimiter period js\">.<\/span><span class=\"support variable dom js\">status<\/span><span class=\"punctuation definition end round js\">)<\/span><span class=\"punctuation terminator statement js\">;<\/span><\/span><\/span><\/div>\n<div class=\"line\"><span class=\"source js\"><span class=\"meta js\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"entity name type object console js\">console<\/span><span class=\"meta delimiter method period js\">.<\/span><span class=\"support function console js\">log<\/span><span class=\"punctuation definition begin round js\">(<\/span><span class=\"variable other object js\">error<\/span><span class=\"meta delimiter period js\">.<\/span><span class=\"variable other object js\">response<\/span><span class=\"meta delimiter period js\">.<\/span><span class=\"support variable dom js\">headers<\/span><span class=\"punctuation definition end round js\">)<\/span><span class=\"punctuation terminator statement js\">;<\/span><\/span><\/span><\/div>\n<div class=\"line\"><span class=\"source js\"><span class=\"meta js\">\u00a0\u00a0\u00a0\u00a0<span class=\"meta brace curly js\">}<\/span>\u00a0<span class=\"keyword control js\">else<\/span>\u00a0<span class=\"keyword control js\">if<\/span>\u00a0<span class=\"meta brace round js\">(<\/span><span class=\"variable other object js\">error<\/span><span class=\"meta delimiter period js\">.<\/span><span class=\"variable other js\">request<\/span><span class=\"meta brace round js\">)<\/span>\u00a0<span class=\"meta brace curly js\">{<\/span><\/span><\/span><\/div>\n<div class=\"line\"><span class=\"source js\"><span class=\"meta js\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"comment line double-slash js\"><span class=\"punctuation definition comment js\">\/\/<\/span>\u00a0The\u00a0request\u00a0was\u00a0made\u00a0but\u00a0no\u00a0response\u00a0was\u00a0received<\/span><\/span><\/span><\/div>\n<div class=\"line\"><span class=\"source js\"><span class=\"meta js\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"comment line double-slash js\"><span class=\"punctuation definition comment js\">\/\/<\/span>\u00a0`error.request`\u00a0is\u00a0an\u00a0instance\u00a0of\u00a0XMLHttpRequest\u00a0in\u00a0the\u00a0browser\u00a0and\u00a0an\u00a0instance\u00a0of<\/span><\/span><\/span><\/div>\n<div class=\"line\"><span class=\"source js\"><span class=\"meta js\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"comment line double-slash js\"><span class=\"punctuation definition comment js\">\/\/<\/span>\u00a0http.ClientRequest\u00a0in\u00a0node.js<\/span><\/span><\/span><\/div>\n<div class=\"line\"><span class=\"source js\"><span class=\"meta js\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"entity name type object console js\">console<\/span><span class=\"meta delimiter method period js\">.<\/span><span class=\"support function console js\">log<\/span><span class=\"punctuation definition begin round js\">(<\/span><span class=\"variable other object js\">error<\/span><span class=\"meta delimiter period js\">.<\/span><span class=\"variable other js\">request<\/span><span class=\"punctuation definition end round js\">)<\/span><span class=\"punctuation terminator statement js\">;<\/span><\/span><\/span><\/div>\n<div class=\"line\"><span class=\"source js\"><span class=\"meta js\">\u00a0\u00a0\u00a0\u00a0<span class=\"meta brace curly js\">}<\/span>\u00a0<span class=\"keyword control js\">else<\/span>\u00a0<span class=\"meta brace curly js\">{<\/span><\/span><\/span><\/div>\n<div class=\"line\"><span class=\"source js\"><span class=\"meta js\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"comment line double-slash js\"><span class=\"punctuation definition comment js\">\/\/<\/span>\u00a0Something\u00a0happened\u00a0in\u00a0setting\u00a0up\u00a0the\u00a0request\u00a0that\u00a0triggered\u00a0an\u00a0Error<\/span><\/span><\/span><\/div>\n<div class=\"line\"><span class=\"source js\"><span class=\"meta js\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"entity name type object console js\">console<\/span><span class=\"meta delimiter method period js\">.<\/span><span class=\"support function console js\">log<\/span><span class=\"punctuation definition begin round js\">(<\/span><span class=\"string quoted single js\"><span class=\"punctuation definition string begin js\">&#8216;<\/span>Error<span class=\"punctuation definition string end js\">&#8216;<\/span><\/span><span class=\"meta delimiter object comma js\">,<\/span>\u00a0<span class=\"variable other object js\">error<\/span><span class=\"meta delimiter period js\">.<\/span><span class=\"variable other js\">message<\/span><span class=\"punctuation definition end round js\">)<\/span><span class=\"punctuation terminator statement js\">;<\/span><\/span><\/span><\/div>\n<div class=\"line\"><span class=\"source js\"><span class=\"meta js\">\u00a0\u00a0\u00a0\u00a0<span class=\"meta brace curly js\">}<\/span><\/span><\/span><\/div>\n<div class=\"line\"><span class=\"source js\"><span class=\"meta js\">\u00a0\u00a0\u00a0\u00a0<span class=\"entity name type object console js\">console<\/span><span class=\"meta delimiter method period js\">.<\/span><span class=\"support function console js\">log<\/span><span class=\"punctuation definition begin round js\">(<\/span><span class=\"variable other object js\">error<\/span><span class=\"meta delimiter period js\">.<\/span><span class=\"variable other js\">config<\/span><span class=\"punctuation definition end round js\">)<\/span><span class=\"punctuation terminator statement js\">;<\/span><\/span><\/span><\/div>\n<div class=\"line\"><span class=\"source js\"><span class=\"meta js\">\u00a0\u00a0<span class=\"punctuation definition function end curly js\">}<\/span><span class=\"punctuation definition end round js\">)<\/span><\/span><span class=\"punctuation terminator statement js\">;<\/span><\/span><\/div>\n<\/div>\n<div><\/div>\n<div>If we log just the error, it will display just the Network Error message on log.<\/div>\n<div>By the way the error was this one: &#8220;_response&#8221;: &#8220;java.security.cert.CertPathValidatorException: Trust anchor for certification path not found.&#8221;,<\/div>\n<div><\/div>\n<div>I was trying to access a https local server. I resolved by change the protocol of the req to http.<\/div>\n<div><\/div>\n<div>Hope I can help!<\/div>\n\n<div class=\"twitter-share\"><a href=\"https:\/\/twitter.com\/intent\/tweet?text=Axios%20Network%20Error%20-%20handling%20more%20error%20information%20on%20React%20Native%20app%20dev.&#038;hashtags=axios%20javascript%20react-native%20network%20error&#038;via=sidroniolima\" class=\"twitter-share-button\">Tweet<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Trying to figure out what the hell was going on with a axios get request, I discover by axios &#8211; npm documentation a better or more complete way tho handle with error. This is how: axios.get(&#8216;\/user\/12345&#8216;) \u00a0\u00a0.catch(function\u00a0(error)\u00a0{ \u00a0\u00a0\u00a0\u00a0if\u00a0(error.response)\u00a0{ \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/\u00a0The\u00a0request\u00a0was\u00a0made\u00a0and\u00a0the\u00a0server\u00a0responded\u00a0with\u00a0a\u00a0status\u00a0code \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/\u00a0that\u00a0falls\u00a0out\u00a0of\u00a0the\u00a0range\u00a0of\u00a02xx \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(error.response.data); \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(error.response.status); \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(error.response.headers); \u00a0\u00a0\u00a0\u00a0}\u00a0else\u00a0if\u00a0(error.request)\u00a0{ \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/\u00a0The\u00a0request\u00a0was\u00a0made\u00a0but\u00a0no\u00a0response\u00a0was\u00a0received \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/\u00a0`error.request`\u00a0is\u00a0an\u00a0instance\u00a0of\u00a0XMLHttpRequest\u00a0in\u00a0the\u00a0browser\u00a0and\u00a0an\u00a0instance\u00a0of \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/\u00a0http.ClientRequest\u00a0in\u00a0node.js \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(error.request); \u00a0\u00a0\u00a0\u00a0}\u00a0else\u00a0{ \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/\u00a0Something\u00a0happened\u00a0in\u00a0setting\u00a0up\u00a0the\u00a0request\u00a0that\u00a0triggered\u00a0an\u00a0Error \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(&#8216;Error&#8216;,\u00a0error.message); \u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0\u00a0\u00a0console.log(error.config); \u00a0\u00a0}); If [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[53,52,69],"tags":[],"class_list":["post-332","post","type-post","status-publish","format-standard","hentry","category-front-end","category-javascript","category-react-native"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/posts\/332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/comments?post=332"}],"version-history":[{"count":2,"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/posts\/332\/revisions"}],"predecessor-version":[{"id":334,"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/posts\/332\/revisions\/334"}],"wp:attachment":[{"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/media?parent=332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/categories?post=332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sidroniolima.com.br\/blog\/wp-json\/wp\/v2\/tags?post=332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}