The location of errors is not displayed in VueJS stack traces

My Current VueJS Setup

Check out the Source Code here

I am working on a project using VueJS with webpack. I have chosen not to use the vue-loader plugin or .vue files.

My project structure resembles a typical Javascript webpack project where I import vue. Here are some of the key options in my webpack configuration:

  • dev-tool: "source-map"
  • resolve.alias["vue$"] = "vue/dist/vue.js"

It seems that the source maps for my webpack-generated Javascript bundle file are being created successfully.

The Problem at Hand

During coding, I encountered an error in the console. The stack trace indicated that the issue originated in the vue.js file and extended to the webpack-generated main.js file.

Upon further inspection, it appears that the source map generated by webpack for my Javascript bundle is not functioning properly.

While researching similar problems on GitHub, I realized that most issues were related to the vue-loader webpack plugin, which I do not utilize.

After examining the application source in Firefox and Chrome, I can confirm that the source maps are indeed malfunctioning:

This inconsistency in source map functionality is making it challenging to debug any future issues effectively.

Note: The specific error displayed in the screenshots has been resolved. The primary concern raised in this question is the improper functioning of source maps, hindering efficient issue debugging.

javascriptvue.jswebpacksource-maps

Answer №1

If you're encountering issues with sourcemaps not functioning in Chrome, there are several alternative approaches you can explore. While these may not be as effective as getting the sourcemaps to work properly, considering your question has remained unanswered for over a year and a half, these options could prove to be valuable.

One method I particularly like is utilizing the "Pause on Exceptions" toggle within the Sources tab. As shown in the image above, it is represented by an octagon with a pause icon. Simply click on this and refresh your page. When an error occurs, your application will halt, displaying the error in a comprehensive stack trace, like so:

The Call Stack presented is interactive. You can backtrack through calling functions until you reach segments recognizable from your own source code. If sourcemaps are not loading correctly, I suggest focusing on string literals as they are not minified in the output and can help pinpoint where the error originates.

Additionally, you might want to consider incorporating a Vue plugin such as Vue.js DevTools. This tool offers a data-centric view of your application which can be immensely beneficial. With this plugin, you can monitor state changes, mutations, replay actions, and even modify events occurring within your app to identify and address any errors more efficiently.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to save screenshot in the report portal while running with WebDriver.io (wdio) execution

In my webdriverio project, the directory structure is as follows: e2e/ utilities/pUtil.js report/screenshot specs wdio.config.js Within pUtil.js file, I have the following code snippet: static takeScreenshot(name, failure = false, test) { const path = ...

javascriptseleniumjenkinswebdriver-io

How can you resolve the "Unexpected Token Operator (>)" error while bundling a React application?

I am currently facing challenges when trying to create the distributable package for a React application. My attempt to run the following command has resulted in an error: rimraf dist && env-cmd .env cross-env NODE_ENV=production webpack -p --con ...

npmwebpackuglifyjs

Insert a div element into the JavaScript file

I have a JavaScript code snippet that needs to be inserted after the "Artwork" section. Here is the code: <div class="image-upload"> <label for="files"> <img src="ohtupload.jpg"> </label> </di ...

javascripthtml

Developing an interface that utilizes the values of an enum as keys

Imagine having an enum called status export enum status { PENDING = 'pending', SUCCESS = 'success', FAIL = 'fail' } This enum is used in multiple places and should not be easily replaced. However, other developers migh ...

javascripttypescripttypescript-typingstypescript2.0

Sending a parameter as text from .NET code-behind to a JavaScript function

So here's the situation: I have a gridview that is displayed in a new window separate from the parent window. This gridview contains multiple records, each with a "view" button that allows users to see more details about the record within the same new ...

javascriptasp.netvb.netcode-behindregisterstartupscript

What is the best way to dynamically display an array that is passed as a prop in vue.js?

Need help passing data to a child component in Vue. Currently able to access and render the array but wanting to render each object separately using a v-for loop. Parent Component: <template> <div> <h1>Welcome To Our Shop</h1 ...

vue.jsvuejs2vue-componentvue-props

Utilizing Laravel Helper functions within Vue.js with Inertia JS

Hello there, I am just starting to learn about Inertia Js and Vue Js. I have a Helper for Laravel that I usually use in my .blade files as Helper::reaction_count($id,$reaction), but now that I'm working with Inertia Js, I believe I need to pass everyt ...

laravelvue.jshelperinertiajs

What is the process of performing numerical calculations using jQuery?

I need to deduct certain input values from the total price. Here's the code snippet: $('.calculate-resterend').click(function(e) { e.preventDefault(); var contant = $('.checkout-contant').val(); var pin = $('.che ...

javascriptjqueryhtml

A guide on updating data dynamically in Vue.js

I am facing an issue with Vue JS in my frontend development. Here is the data for my component - data: () => ({ email: "", showError : false }), Below is the corresponding HTML code - <div v-show='showError' c ...

javascriptvue.js

Convert a Twitter Direct Message Link by changing the `<button>` tag to an `<a>` tag

When you log into Twitter and have Direct Message enabled, a "Send Message" button will appear. Can someone please provide the URL for sending a DM to a specific user? I tried looking at the code but I could use some assistance. Any thoughts? Thank you in ...

javascripttwitterconvertershref

What is the best way to execute multiple controller functions for a single route?

I have a specific route set up for users to submit loan applications. What I want to achieve is to call different controller functions based on the amount of the loan that the user is applying for. app.use('/submitLoanRequest50kMore', mw1, mw2, ...

javascriptnode.jsexpress

Display the size of the data array in VueJS once the data has been retrieved from the API

Using Vue JS, I have been attempting to retrieve data from an API. My goal is to determine the length of the array and then log it to the console using a method. However, every time I try to do this, the value logged is always "0" instead of the actual le ...

javascriptapivue.js

The Angular promise refuses to resolve at my desired time

I am struggling with managing Angular promises in order to control when they resolve. In the code snippet below, my intention is to first retrieve KeyDataFromServer() and then proceed with executing the remaining commands only after all the keys have been ...

javascriptangularjsasynchronousfirebaseangular-promise

Listcell XUL with button options

How can I make buttons inside a listcell function in XUL? I am having trouble getting it to work. Here is the XUL code: <listitem id = "1"> <listcell label = "OK Computer"/> <listcell label = "Radiohead"/> <listcell label ...

javascriptxul

Choose autocomplete feature from an external source within the context of AngularJS

I am currently working on an autocomplete textbox and I stumbled upon this script that I found through my search efforts. .controller('autoCompleteCTRL', function($scope, $rootScope){ $rootScope.searchItems = [ "ActionScript", ...

javascriptangularjs

What is the best way to create a JavaScript Up/Down Numeric input box using jQuery?

So, I have this Numeric input box with Up/Down buttons: HTML Markup: <div class="rotatortextbox"> <asp:TextBox ID="txtrunningtimeforfirstlot" ClientIDMode="Static" runat="server">0</asp:TextBox> (In mins) </div> <div cl ...

javascriptjqueryhtmlasp.net

What is the method to trigger the jQuery 'mouseenter' event on an element using Selenium?

Struggling to automate a scenario using selenium where I need to click on a menu element. I've tried various methods, except jQuery. WebDriver normal click and JavaScript click() haven't worked. Can someone assist me with implementing jQuery in s ...

javascriptjqueryselenium

The jQuery .post method is not returning any data when using the done and fail functions

I've encountered an issue while attempting to execute a jQuery AJAX request and retrieve the data in the .done and .fail methods. Below is the snippet of code that triggers the AJAX request: async function doSomething(){ const addressValid = awai ...

javascriptjqueryajaxpost

Discover the method to retrieve HTML content by sending an HTTP POST request in AngularJS, similar to loading content

My attempt to retrieve HTML content using Angular Js Post HTTP method was successful, but only for text contents like P tags. I am now trying to fetch HTML contents that include input types such as text boxes using Angular JS. Interestingly, when I utilize ...

javascriptjqueryhtmlangularjsajax

Angular - Highlight a section of a string variable

Is there a way to apply bold formatting to part of a string assigned to a variable? I attempted the following: boldTxt = 'bold' message = 'this text should be ' + this.boldTxt.toUpperCase().bold() ; However, the HTML output is: thi ...

javascriptangulartypescript