Why some runtime JS errors are not displayed in the console?

Hello,
In my Laravel 5.8/vuejs 2.6 app I found situations when having some runtime JS errors in my console these errors are not displayed in the console,
but app flow is just just stopped. One of such errors is below in addForumPost method :

<script>
    import {bus} from '../../../app';
    import appMixin from '../../../appMixin';
    import {focus} from 'vue-focus';

    import Vue from 'vue';
    import {retrieveAppDictionaries, getModalCalculatedHeight, getModalCalculatedWidth} from "../../../helpers/commonFuncs";

    import CKEditor from '@ckeditor/ckeditor5-vue';  //https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html
    import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

    Vue.use(CKEditor);

    export default {
        data: function () {
            return {
                ...
            }

        },
        name: 'ForumView',
        directives: {focus: focus},

        created() {
           ...
        }, //  created() {

        mounted() {
           ...
        }, // mounted() {


        mixins: [appMixin],

        methods: {

            addForumPost() {
                if (this.currentLoggedUser == null || typeof this.currentLoggedUser.id == 'undefined') {
                    this.showPopupMessage("Report abuse", 'You need to login !', 'warn');
                    return;
                }

                if ( this.trim(this.new_thread_post_body) < 5 ) {
                    this.showPopupMessage("Forum Post", 'Your message must be at least 5 chars !', 'warn');
                    return;
                }

                this.message = '';
                this.is_page_loaded = false

                axios.post(window.API_VERSION_LINK + '/forum/add_forum_post', {
                    user_id: this.currentLoggedUser.id,
                    forum_post_body: this.new_thread_post_body,
                    forum_thread_id: this.singleForumThreadRow.id,
                }).then((response) => {
                    this.is_page_loaded = true
	                let forumPost= response.data.forumPost
	                debugger
	                // THE ROW BELOW stop app flow, but no error in console
                    forumPost.created_at= momentDatetime( this.getNowDateTime(), settings_js_moment_datetime_format )
                    // forumPost.created_at= this.momentDatetime( this.getNowDateTime(), settings_js_moment_datetime_format )
                    this.threadPosts.push( forumPost )
                    this.showPopupMessage("Forum", "Your post was successfully added !", 'success');
                    ...
Sure comment line below and I have to use this.momentDatetime in 
`                    forumPost.created_at= this.momentDatetime( this.getNowDateTime(),` settings_js_moment_datetime_format )

but why I have no console error?

$ lsb_release -d; uname -r; uname -i
Description:    Ubuntu 18.04.3 LTS
4.15.0-20-generic
x86_64

Google Chrome, Version 77.0.3865.90 (Official Build) (64-bit)

And seems that is not the only case, in some cases I have to debug step by step to find the error ?

Why so ?

What error are you expecting to see in the console? Does your axios call have a catch which then prints to the console?

.catch(err => console.error(err))

JS errors usually show up in the console. If you’re using a promise based system, like axios, then they may not show in the console unless you explicitly tell them to.

1 Like

Thank you for your feedback !
Can you advice some practical approach here for dev and prod?

  1. always left line
    console.error(err)
  2. make some wrapper JS function with different code for dev/prod?
  3. some other decision ?

You should handle the error in a way that makes sense for the specific function. For production you’ll very rarely use just the console.error() because you’ll want to alert the user in some way that their thing has failed.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.