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.

https://i.sstatic.net/3sOOO.png

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:

https://i.sstatic.net/dmRVX.png

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.

https://i.sstatic.net/UsHFd.png

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:

https://i.sstatic.net/d0iVU.png

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

Click on the react item to view more information

I'm brand new to React and I'm exploring the swapi API for the first time. My goal is to retrieve a list of films (movie titles) and then, when a title is clicked on, display the opening crawl from the JSON object. So far, I've been able to ...

javascriptreactjsapi

JavaScript: inscribe in a specific cell

I have a table cell within a div element and I am trying to display the date for the last Thursday in it: <body> <div> <table id="TableName" width="auto"> <thead> <tr> ... ...

javascriptjqueryhtml

Inability to update Vue.js component data even after a successful GET request

I am encountering an issue with a component that initially contains a default object, and then fetches a populated object via a GET request upon creation. Despite successfully updating this.profile within the method, the changes do not seem to propagate ...

javascriptvue.jsvuejs2

The PHP Ajax code runs a for loop twice, but the data is only stored once during its execution

<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body onload="searchVideo();"> <script> var data_length = 2; for(var i=0; i<data_length; i+ ...

javascriptphpajaxfor-loop

React Material-UI components (Slider/Select) "onChange" event does not update the value instantly, it shows the result of the previous click

My goal is to utilize Slider/Select for capturing user query parameters, which will then trigger changes in the URL (via handleChange) and subsequently make API calls using fetch hooks. However, I've encountered an issue where adjusting the Slider va ...

javascriptreactjsreact-hooksmaterial-ui

Using AngularJS and ServiceStack webservice, perform the "get('url')" operation

I'm completely new to AngularJS and I'm attempting to retrieve some JSON items from a webservice I quickly set up using ServiceStack. When I enter the URL in the browser, I can see the JSON object without any issues. However, for some reason Angu ...

javascriptjsonangularjsweb-servicesservicestack

Automatically close the popup each time it is displayed (using jQuery/JavaScript)

I am having issues with auto-closing my popup each time I open it. The current code I have only closes the popup the first time, requiring me to refresh the browser in order to auto-close it again. Can someone please assist me in writing a new code that ...

javascriptjquery

Show or hide a Div based on radio button selection problem

I've successfully implemented a Div visibility toggle using the code below: $('input[name="type"]').on('change', function() { var show = $(this).val(); $(".typechoice").hide(); $("#"+show).show(); }) <script src="h ...

javascriptjqueryhtml

What are the best practices for managing mouse events in AlpineJS when working with my menu?

I'm currently tackling the challenge of developing a mega dropdown menu feature using alpine.js and Tailwind CSS. Unfortunately, I've hit a roadblock as I can't seem to get the mouse events functioning correctly. In the snippet below, you&ap ...

javascriptmouseeventalpine.js

The grid fails to apply remote filtering values when an additional Nested ajax call is incorporated alongside the current HttpProxy configuration

Whenever I click for filter/sort for remote filtering, Forms.asp triggers using a proxy and automatically reloads. Previously, when I used the script below to reload the ExtJS grid with Forms.asp returning new XML with filtered grid data, everything worked ...

javascriptajaxextjshttp-proxy

Exciting Update: Next.js V13 revalidate not triggering post router.push

Currently using Next.js version 13 for app routing, I've encountered an issue with the revalidate feature not triggering after a router.push call. Within my project, users have the ability to create blog posts on the /blog/create page. Once a post is ...

javascriptreactjstypescriptnext.jsserver-side-rendering

Incorporating user names into socket.io chat for disconnect functionality

I've recently started using socket.io and have been developing a messaging chat feature. By adding usernames to the chat upon login and message submission, everything seemed to be working smoothly. However, I'm facing an issue with retrieving use ...

javascriptnode.jssocket.iomessage

When using the <Routes> component, it will not render a component that acts as a container for multiple <Route> elements

Upon wrapping my component in <Routes>, I encountered this warning: Warning: [Categories] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment> In App.js: const App = () => ...

javascriptreactjsreact-routerreact-router-dom

Unable to locate the module name loaded using require() function

Within my React file, I am importing a Javascript file like this (I am using Typescript): let FloDialog = require('../public/js/flo-dialog.min'); Afterwards, I declare a property for the dialog class: dialog: FloDialog = null; It is important ...

javascriptreactjstypescript

An error is triggered by serializing a TinyBox POST form into an Array

When I implemented the code below, it performed as anticipated: TINY.box.show({url:target, post:$("form[name='currentSearch']").serialize(), width:650, mask:true, close:true, maskid:'boxMask', boxid:'popupBox', openjs:funct ...

javascriptjqueryajaxpost

Is there a way to execute a tanstack react query externally, as I am unable to utilize useQuery within the component?

const fetchSurveyData = useQuery(["survey"], () => getSurveyData({ page: 1, userLangCode: langCode, sortColumnName: "Date", sortColumnOrder: "DESC", country, ip, }) ); After tr ...

javascriptreactjsreact-query

Change a CSV string into a JSON array and assign it to a variable

I am working with JSON data that looks like this: [ { "Title": "PAGE A", "Users": "USRA" }, { "Title": "PAGE B", "Users": "USRA,USRB" } ] What is the most efficient method to convert the fields containing " ...

javascriptjsoncsv

Error: The strategy for authentication is not recognized as "login" - Express and Passport

I am currently experimenting with a basic MEAN stack tutorial I found online. The technologies involved are: Node.js Express.js Passport.js Below is the code snippet for the application file: app.js var express = require("express"); var mongoose = req ...

javascriptnode.jsmongodbexpresspassport.js

What is the best method for storing objects in Firebase in order to easily rearrange them at a later time?

My list looks something like this: {"ids": [ { "id1": { "name": "name1", "lastname": "lastname1" } }, { "id2": { "name": "name2", "lastname": "lastname2" } }, { "id3": { "name": "name3", "l ...

javascriptangularfirebasefirebase-realtime-databaseangularfire2

"Redirecting using parameters upon pressing the enter key: A step-by-step guide

I've been pondering about the best way to redirect to a specific site while including query parameters in the URL. <input id="query" name="query" placeholder="Search" type="input" > I have experimented wi ...

javascripthtmlformshttp-redirectinput