{"id":23907,"date":"2019-03-01T08:50:07","date_gmt":"2019-03-01T14:50:07","guid":{"rendered":"https:\/\/stackify.com\/?p=23907"},"modified":"2023-03-17T06:45:40","modified_gmt":"2023-03-17T06:45:40","slug":"javascript-logging-basic-tips","status":"publish","type":"post","link":"https:\/\/stackify.com\/javascript-logging-basic-tips\/","title":{"rendered":"JavaScript Logging Basic Tips"},"content":{"rendered":"\n<p>JavaScript has come a long way in recent years. Browsers are becoming more robust and machines are growing more powerful. Pair this with the recent development of&nbsp;<a href=\"https:\/\/nodejs.org\/en\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Node.js<\/a>&nbsp;for execution of JavaScript on servers, and you can understand why JavaScript has exploded in popularity. Developers continue to push the boundaries of what can be done with JavaScript, which leads to ever more complex applications.<\/p>\n\n\n\n<p>Your ability to effectively debug code becomes increasingly important as the scale of your codebase grows. This article will focus on the essential aspects of client-side JavaScript error logging to help polish up those debugging skills. Unfortunately, server-side error logging is beyond the scope of this article. Rest assured, though, there are plenty of best practices and tools, like&nbsp;<a href=\"https:\/\/stackify.com\/retrace\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Retrace<\/a>, available to get you started there as well.<\/p>\n\n\n\n<p>Here\u2019s an overview of what I\u2019ll be covering in this article:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Client-side vs. server-side logging<\/strong><\/li>\n\n\n\n<li><strong>JavaScript\u2019s built-in logging methods<\/strong><\/li>\n\n\n\n<li><strong>A step-by-step JavaScript logging example<\/strong><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Client-side vs. server-side logging<\/h3>\n\n\n\n<p>When you\u2019re doing local development, you\u2019ve got access to the console. This gives you the ability to recreate errors, peruse stack traces, interpret cryptic error messages, and otherwise debug to your heart\u2019s content. When the page or app reloads, everything in the console disappears. Poof.<\/p>\n\n\n\n<p>This is great during the development process. However, you don\u2019t have access to those console messages once you\u2019ve released your code into the wild and it\u2019s running on users\u2019 machines.<\/p>\n\n\n\n<p>In this case, having some way to send your code\u2019s various error messages from the client to a server you have access to would be beneficial. There are a plethora of tools available for such use cases, typically called&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/Java_logging_framework\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">logging frameworks<\/a>, but this article won\u2019t cover them in any depth.<\/p>\n\n\n\n<p>Essentially what these tools do is collect any error messages that occur on the client, and package them up nicely. Once they\u2019re properly bundled, they\u2019re sent to a storage location that you have access to. Handy to have, but a bit complicated to cover here.<\/p>\n\n\n\n<p>With that said, what follows are best practices to observe during that \u201cdevelopment phase\u201d of your product when you do have access to the browser console.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">JavaScript\u2019s built-in logging methods<\/h3>\n\n\n\n<p>You probably got comfortable with the&nbsp;<strong>console.log()<\/strong>&nbsp;function the first time you looked at JavaScript. Put it wherever you want in your code and it\u2019ll spit out the contents of whatever you put between the parentheses, right?<\/p>\n\n\n\n<p>It turns out there\u2019s a whole array (pun intended) of methods on the&nbsp;<strong>console<\/strong>&nbsp;object that are super useful and often underutilized.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Message levels<\/h4>\n\n\n\n<p>As with many other&nbsp;<a href=\"https:\/\/stackify.com\/popular-programming-languages-2018\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">programming languages<\/a>, JavaScript has support for logging messages at various levels. They are as follows, with their associated method and a description of their output in the console:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Plaintext\u2014<strong>console.log()<\/strong>&nbsp;outputs unstyled text.<\/li>\n\n\n\n<li>Info\u2014<strong>console.info()<\/strong>&nbsp;typically outputs text with a blue background.<\/li>\n\n\n\n<li>Warn\u2014<strong>console.warn()<\/strong>&nbsp;typically outputs text with a yellow background.<\/li>\n\n\n\n<li>Error\u2014<strong>console.error()<\/strong>&nbsp;typically outputs text with a red background.<\/li>\n<\/ul>\n\n\n\n<p>These methods simply provide helpful visual cues for quick&nbsp;<a href=\"https:\/\/stackify.com\/troubleshooting-vs-debugging-whats-the-difference-best-practices\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">debugging<\/a>&nbsp;in the console. Aside from the visual styling, they all work in exactly the same way.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Message grouping<\/h4>\n\n\n\n<p>Your code isn\u2019t just a messy pile (hopefully). Your log output shouldn\u2019t be either. Message grouping can help!<\/p>\n\n\n\n<p>You can use the methods&nbsp;<strong>console.group()<\/strong>&nbsp;and&nbsp;<strong>console.groupEnd()<\/strong>&nbsp;to create collapsible chunks of log messages in the console. There\u2019s even support for nested groups.<\/p>\n\n\n\n<p>Take, as a quick example, the following code:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">console.group(\"Group heading\");<br>console.log(\"First line\");<br>console.log(\"Second line\");<br>console.log(\"Last line\");<br>console.groupEnd();<\/pre>\n\n\n\n<p>This will give you something similar to the following in the console:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/stackify.com\/wp-content\/uploads\/2019\/02\/image-23.png\" alt=\"\" class=\"wp-image-24020\"\/><\/figure>\n\n\n\n<p>Organizing your log messages by grouping can help you quickly find the messages you care about without wasting time on scrolling or scanning.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Timing your code<\/h4>\n\n\n\n<p>There are a multitude of reasons why you might be interested in how long a particular process in your code takes. Fortunately, you don\u2019t have to dig into any complicated third-party tools to get some basic timing functionality.<\/p>\n\n\n\n<p>Take a look at the pseudo-code below:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">console.time(\"Test process\");<br>\/\/ Do some process here<br>console.timeEnd(\"Test process\");<\/pre>\n\n\n\n<p>The call to&nbsp;<strong>console.time()&nbsp;<\/strong>starts a timer with the label \u201cTest process.\u201d Immediately following that, the process on the following line of code (imaginary, in this case) runs. Finally, a call to&nbsp;<strong>console.timeEnd()<\/strong>,&nbsp;with the same label of \u201cTest process\u201d passed to it, ends that particular timer.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/stackify.com\/wp-content\/uploads\/2019\/02\/image-24.png\" alt=\"\" class=\"wp-image-24021\"\/><\/figure>\n\n\n\n<p>How handy is that?!<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Don\u2019t let errors break everything<\/h4>\n\n\n\n<p>The people working to make JavaScript better are super smart. So, of course, they\u2019ve implemented a tool for us to gracefully handle error-prone code.<\/p>\n\n\n\n<p>Enter the&nbsp;<strong>try\u2026catch\u2026finally<\/strong>&nbsp;statement.<\/p>\n\n\n\n<p>This statement allows us to enclose potentially error-producing code in a&nbsp;<strong>try<\/strong>&nbsp;block,&nbsp;<strong>catch<\/strong>&nbsp;and log an error if there is one, and continue on running our program in the&nbsp;<strong>finally<\/strong>&nbsp;block.<\/p>\n\n\n\n<p>Here\u2019s what it looks like:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">try {<br>    \/\/ Code to try<br>} catch (e) {<br>    \/\/ Code to run if an exception (error) occurs<br>}<br>finally {<br>    \/\/ This code runs regardless of an error occurring or not<br>}<\/pre>\n\n\n\n<p>Using this pattern will allow you to effectively create error boundaries in your program so that the whole thing doesn\u2019t crash due to a single error.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Logging with JavaScript: an example<\/h3>\n\n\n\n<p>To better illustrate the usage of the above utilities, let\u2019s go through a (rather contrived) example. Here\u2019s the code, with an explanation to follow:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">console.time(\"Contrived example\"); \/\/ Start the timer!<br><br>try {<br>    console.group(\"TRY BLOCK ACTIONS:\"); \/\/ Create a console grouping<br>    console.log(\"Trying to reach server...\")<br>    console.warn(\"It's taking awhile....\"); \/\/ Use the console warn utility so we don't miss it in the console<br>    console.log(\"Still trying...\");<br>    console.groupEnd(); \/\/ Close the \"TRY BLOCK ACTIONS\" grouping<br>    throw new Error(\"Can't reach server, sorry!\"); \/\/ Throw an error to be caught in the catch block<br>} catch(e) {<br>    console.error(e.message); \/\/ Log the error thrown from the try block<br>} finally { \/\/ Block of code to execute regardless of errors<br>    console.group(\"FINALLY BLOCK ACTIONS:\"); \/\/ Create another console grouping<br>    setTimeout(function() { \/\/ Arbitrarily delay code execution for the sake of timing<br>        console.log(\"Let's run some code independent of the server response:\");<br>        coolFunction(); \/\/ Call external function<br>        console.log(\"Finally done with the example!\");<br>        console.groupEnd(); \/\/ Close the \"FINALLY BLOCK ACTIONS\" grouping<br>        console.timeEnd(\"Contrived example\"); \/\/ Stop timing the code and log the time taken to execute<br>    }, 900);<br>}<br><br>function coolFunction() {<br>    console.log(\"Hello from coolFunction\");<br>}<\/pre>\n\n\n\n<p>The code starts by calling the&nbsp;<strong>console.time()<\/strong>&nbsp;method to begin tracking the execution time of the code.<\/p>\n\n\n\n<p>Next, a&nbsp;<strong>try<\/strong>&nbsp;block opens up. In the&nbsp;<strong>try<\/strong>&nbsp;block, a new console group initiates with a call to&nbsp;<strong>console.group()<\/strong>.&nbsp;Plus, a few&nbsp;<strong>console.log<\/strong>&nbsp;methods and a&nbsp;<strong>console.warn<\/strong>&nbsp;method are called inside it to keep us updated on what\u2019s happening in our code.<\/p>\n\n\n\n<p>After \u201ctrying\u201d for a bit, the group is then closed with&nbsp;<strong>console.groupEnd()<\/strong>&nbsp;and an error is thrown, which is caught in the&nbsp;<strong>catch<\/strong>&nbsp;block. It\u2019s there that the error message is logged with the helpful&nbsp;<strong>console.error<\/strong>&nbsp;method.<\/p>\n\n\n\n<p>Lastly, in the&nbsp;<strong>finally<\/strong>&nbsp;block, another console group initiates. Also, some more&nbsp;<strong>console.log()<\/strong>&nbsp;methods are called inside it, the group closes, and the code timing process terminates with a call to&nbsp;<strong>console.timeEnd()<\/strong>.<\/p>\n\n\n\n<p>So, what does all of this look like in the console when you run the code? Check it out:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/stackify.com\/wp-content\/uploads\/2019\/02\/image-25-1024x324.png\" alt=\"\" class=\"wp-image-24022\"\/><\/figure>\n\n\n\n<p>Awesome!<\/p>\n\n\n\n<p>You can expand and collapse the&nbsp;<strong>TRY BLOCK ACTIONS<\/strong>&nbsp;and&nbsp;<strong>FINALLY BLOCK ACTIONS<\/strong>&nbsp;groupings, see the&nbsp;<strong>warn<\/strong>&nbsp;and&nbsp;<strong>error<\/strong>&nbsp;color-coding, and see how long the entire process took. That\u2019s powerful stuff.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What comes next?<\/h3>\n\n\n\n<p>As mentioned earlier, using client-side logging functionality effectively is only a piece (albeit an important one) of your overall development process. If you\u2019re comfortable tracking down issues using the console on your development machine, you can step up your debugging game with some of the more advanced tools like logging frameworks and analysis products like&nbsp;<a href=\"https:\/\/stackify.com\/retrace\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Retrace<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/stackify.com\/wp-content\/uploads\/2019\/02\/image-26-1024x720.png\" alt=\"\" class=\"wp-image-24023\"\/><\/figure>\n\n\n\n<p>To wrap things up, here are a few key takeaways to start writing better code today:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use&nbsp;<strong>console.log()<\/strong>, and its color-coded variations, liberally during development but make sure to remove them for production<\/li>\n\n\n\n<li>Use&nbsp;<strong>console.group()<\/strong>&nbsp;to streamline your logging activities and save time digging through console messages<\/li>\n\n\n\n<li>Optimize performance by using&nbsp;<strong>console.time()<\/strong>&nbsp;to identify processing bottlenecks<\/li>\n\n\n\n<li>Use&nbsp;<strong>try\u2026catch\u2026finally<\/strong>&nbsp;statements to minimize the potential for program-breaking errors<\/li>\n<\/ul>\n\n\n\n<p>Now, take your newfound logging power and write incredible code. On to the next project!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>JavaScript has come a long way in recent years. Browsers are becoming more robust and machines are growing more powerful. Pair this with the recent development of&nbsp;Node.js&nbsp;for execution of JavaScript on servers, and you can understand why JavaScript has exploded in popularity. Developers continue to push the boundaries of what can be done with JavaScript, [&hellip;]<\/p>\n","protected":false},"author":56,"featured_media":37187,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7],"tags":[53,26,124],"class_list":["post-23907","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","tag-javascript","tag-logging","tag-node-js"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v25.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript Logging Basic Tips - Stackify<\/title>\n<meta name=\"description\" content=\"Learn the essential aspects of client-side JavaScript error logging to help polish your debugging skills. Find the best tips and tools to get you started.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/stackify.com\/javascript-logging-basic-tips\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Logging Basic Tips - Stackify\" \/>\n<meta property=\"og:description\" content=\"Learn the essential aspects of client-side JavaScript error logging to help polish your debugging skills. Find the best tips and tools to get you started.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stackify.com\/javascript-logging-basic-tips\/\" \/>\n<meta property=\"og:site_name\" content=\"Stackify\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Stackify\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-03-01T14:50:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-17T06:45:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stackify.com\/wp-content\/uploads\/2019\/03\/JavaScript-Error-Logging-Basics-881x441-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"881\" \/>\n\t<meta property=\"og:image:height\" content=\"441\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Gaege Root\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@stackify\" \/>\n<meta name=\"twitter:site\" content=\"@stackify\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Gaege Root\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/stackify.com\/javascript-logging-basic-tips\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/stackify.com\/javascript-logging-basic-tips\/\"},\"author\":{\"name\":\"Gaege Root\",\"@id\":\"https:\/\/stackify.com\/#\/schema\/person\/d65da23b054826c0d5cdc2c88dd54c3b\"},\"headline\":\"JavaScript Logging Basic Tips\",\"datePublished\":\"2019-03-01T14:50:07+00:00\",\"dateModified\":\"2023-03-17T06:45:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/stackify.com\/javascript-logging-basic-tips\/\"},\"wordCount\":1271,\"publisher\":{\"@id\":\"https:\/\/stackify.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/stackify.com\/javascript-logging-basic-tips\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stackify.com\/wp-content\/uploads\/2019\/03\/JavaScript-Error-Logging-Basics-881x441-1.jpg\",\"keywords\":[\"javascript\",\"logging\",\"node.js\"],\"articleSection\":[\"Developer Tips, Tricks &amp; Resources\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/stackify.com\/javascript-logging-basic-tips\/\",\"url\":\"https:\/\/stackify.com\/javascript-logging-basic-tips\/\",\"name\":\"JavaScript Logging Basic Tips - Stackify\",\"isPartOf\":{\"@id\":\"https:\/\/stackify.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/stackify.com\/javascript-logging-basic-tips\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stackify.com\/javascript-logging-basic-tips\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stackify.com\/wp-content\/uploads\/2019\/03\/JavaScript-Error-Logging-Basics-881x441-1.jpg\",\"datePublished\":\"2019-03-01T14:50:07+00:00\",\"dateModified\":\"2023-03-17T06:45:40+00:00\",\"description\":\"Learn the essential aspects of client-side JavaScript error logging to help polish your debugging skills. Find the best tips and tools to get you started.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stackify.com\/javascript-logging-basic-tips\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/stackify.com\/javascript-logging-basic-tips\/#primaryimage\",\"url\":\"https:\/\/stackify.com\/wp-content\/uploads\/2019\/03\/JavaScript-Error-Logging-Basics-881x441-1.jpg\",\"contentUrl\":\"https:\/\/stackify.com\/wp-content\/uploads\/2019\/03\/JavaScript-Error-Logging-Basics-881x441-1.jpg\",\"width\":881,\"height\":441},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/stackify.com\/#website\",\"url\":\"https:\/\/stackify.com\/\",\"name\":\"Stackify\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/stackify.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/stackify.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/stackify.com\/#organization\",\"name\":\"Stackify\",\"url\":\"https:\/\/stackify.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/stackify.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/stackify.com\/wp-content\/uploads\/2024\/05\/logo-1.png\",\"contentUrl\":\"https:\/\/stackify.com\/wp-content\/uploads\/2024\/05\/logo-1.png\",\"width\":1377,\"height\":430,\"caption\":\"Stackify\"},\"image\":{\"@id\":\"https:\/\/stackify.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Stackify\/\",\"https:\/\/x.com\/stackify\",\"https:\/\/www.instagram.com\/stackify\/\",\"https:\/\/www.linkedin.com\/company\/2596184\",\"https:\/\/www.youtube.com\/stackify\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/stackify.com\/#\/schema\/person\/d65da23b054826c0d5cdc2c88dd54c3b\",\"name\":\"Gaege Root\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/stackify.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b80ee93854e3b6de6585e85f5a432029?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b80ee93854e3b6de6585e85f5a432029?s=96&d=mm&r=g\",\"caption\":\"Gaege Root\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JavaScript Logging Basic Tips - Stackify","description":"Learn the essential aspects of client-side JavaScript error logging to help polish your debugging skills. Find the best tips and tools to get you started.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/stackify.com\/javascript-logging-basic-tips\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Logging Basic Tips - Stackify","og_description":"Learn the essential aspects of client-side JavaScript error logging to help polish your debugging skills. Find the best tips and tools to get you started.","og_url":"https:\/\/stackify.com\/javascript-logging-basic-tips\/","og_site_name":"Stackify","article_publisher":"https:\/\/www.facebook.com\/Stackify\/","article_published_time":"2019-03-01T14:50:07+00:00","article_modified_time":"2023-03-17T06:45:40+00:00","og_image":[{"width":881,"height":441,"url":"https:\/\/stackify.com\/wp-content\/uploads\/2019\/03\/JavaScript-Error-Logging-Basics-881x441-1.jpg","type":"image\/jpeg"}],"author":"Gaege Root","twitter_card":"summary_large_image","twitter_creator":"@stackify","twitter_site":"@stackify","twitter_misc":{"Written by":"Gaege Root","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/stackify.com\/javascript-logging-basic-tips\/#article","isPartOf":{"@id":"https:\/\/stackify.com\/javascript-logging-basic-tips\/"},"author":{"name":"Gaege Root","@id":"https:\/\/stackify.com\/#\/schema\/person\/d65da23b054826c0d5cdc2c88dd54c3b"},"headline":"JavaScript Logging Basic Tips","datePublished":"2019-03-01T14:50:07+00:00","dateModified":"2023-03-17T06:45:40+00:00","mainEntityOfPage":{"@id":"https:\/\/stackify.com\/javascript-logging-basic-tips\/"},"wordCount":1271,"publisher":{"@id":"https:\/\/stackify.com\/#organization"},"image":{"@id":"https:\/\/stackify.com\/javascript-logging-basic-tips\/#primaryimage"},"thumbnailUrl":"https:\/\/stackify.com\/wp-content\/uploads\/2019\/03\/JavaScript-Error-Logging-Basics-881x441-1.jpg","keywords":["javascript","logging","node.js"],"articleSection":["Developer Tips, Tricks &amp; Resources"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/stackify.com\/javascript-logging-basic-tips\/","url":"https:\/\/stackify.com\/javascript-logging-basic-tips\/","name":"JavaScript Logging Basic Tips - Stackify","isPartOf":{"@id":"https:\/\/stackify.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/stackify.com\/javascript-logging-basic-tips\/#primaryimage"},"image":{"@id":"https:\/\/stackify.com\/javascript-logging-basic-tips\/#primaryimage"},"thumbnailUrl":"https:\/\/stackify.com\/wp-content\/uploads\/2019\/03\/JavaScript-Error-Logging-Basics-881x441-1.jpg","datePublished":"2019-03-01T14:50:07+00:00","dateModified":"2023-03-17T06:45:40+00:00","description":"Learn the essential aspects of client-side JavaScript error logging to help polish your debugging skills. Find the best tips and tools to get you started.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stackify.com\/javascript-logging-basic-tips\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/stackify.com\/javascript-logging-basic-tips\/#primaryimage","url":"https:\/\/stackify.com\/wp-content\/uploads\/2019\/03\/JavaScript-Error-Logging-Basics-881x441-1.jpg","contentUrl":"https:\/\/stackify.com\/wp-content\/uploads\/2019\/03\/JavaScript-Error-Logging-Basics-881x441-1.jpg","width":881,"height":441},{"@type":"WebSite","@id":"https:\/\/stackify.com\/#website","url":"https:\/\/stackify.com\/","name":"Stackify","description":"","publisher":{"@id":"https:\/\/stackify.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stackify.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/stackify.com\/#organization","name":"Stackify","url":"https:\/\/stackify.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/stackify.com\/#\/schema\/logo\/image\/","url":"https:\/\/stackify.com\/wp-content\/uploads\/2024\/05\/logo-1.png","contentUrl":"https:\/\/stackify.com\/wp-content\/uploads\/2024\/05\/logo-1.png","width":1377,"height":430,"caption":"Stackify"},"image":{"@id":"https:\/\/stackify.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Stackify\/","https:\/\/x.com\/stackify","https:\/\/www.instagram.com\/stackify\/","https:\/\/www.linkedin.com\/company\/2596184","https:\/\/www.youtube.com\/stackify"]},{"@type":"Person","@id":"https:\/\/stackify.com\/#\/schema\/person\/d65da23b054826c0d5cdc2c88dd54c3b","name":"Gaege Root","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/stackify.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b80ee93854e3b6de6585e85f5a432029?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b80ee93854e3b6de6585e85f5a432029?s=96&d=mm&r=g","caption":"Gaege Root"}}]}},"_links":{"self":[{"href":"https:\/\/stackify.com\/wp-json\/wp\/v2\/posts\/23907"}],"collection":[{"href":"https:\/\/stackify.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stackify.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stackify.com\/wp-json\/wp\/v2\/users\/56"}],"replies":[{"embeddable":true,"href":"https:\/\/stackify.com\/wp-json\/wp\/v2\/comments?post=23907"}],"version-history":[{"count":1,"href":"https:\/\/stackify.com\/wp-json\/wp\/v2\/posts\/23907\/revisions"}],"predecessor-version":[{"id":37188,"href":"https:\/\/stackify.com\/wp-json\/wp\/v2\/posts\/23907\/revisions\/37188"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stackify.com\/wp-json\/wp\/v2\/media\/37187"}],"wp:attachment":[{"href":"https:\/\/stackify.com\/wp-json\/wp\/v2\/media?parent=23907"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stackify.com\/wp-json\/wp\/v2\/categories?post=23907"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stackify.com\/wp-json\/wp\/v2\/tags?post=23907"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}