Unexpected Behavior: Performance API Issue in Vue.js with Javascript Integration

Currently, I am working on a small project which requires me to calculate the time taken for each page to load. To achieve this, I am utilizing the Performance API. Specifically, I am using the getEntriesByName() method within the Performance API as demonstrated below:

performance.getEntriesByName(window.location.href)

To view the results, simply open your console by pressing F12 on your keyboard and run the above line of code.

RESULT

connectEnd: 1.55999994603917
connectStart: 1.55999994603917
decodedBodySize: 132839
domComplete: 1405.1149999722838
domContentLoadedEventEnd: 887.4099999666214
domContentLoadedEventStart: 867.9899999988265
name: "https://stackoverflow.com/questions/ask"
nextHopProtocol: "h2"
redirectCount: 0
....

The data displayed pertains to the specific page being loaded. The name value indicates the URL of the page. Running the above code on various pages will provide metrics for each individual page.

ISSUE

An issue arises when running this code on different pages within a Vue.js project. Instead of returning metrics for the particular page, it only retrieves information for the main page. For example, if the main page is /dashboard, running the code on /dashboard/users results in an EMPTY array.

NOTE

If anyone can determine why this occurs or suggest an alternative method to obtain the RESULT values without using the JavaScript performance API, please share your insights. It would be valuable to understand how to access these details without relying on the performance API or suggestions for resolving this discrepancy.

CHECK THIS

Explore a website developed in Vue.js where you can change routes and replicate the procedure mentioned above. This issue seems to persist across all Vue.js websites. Any insights into why this is a prevalent issue with Vue.js websites would be appreciated.

javascriptvue.js

Answer №1

The information you're seeking using performance.getEntriesByName(window.location.href) is reliant on the page load process. Vuejs projects utilizing Vue Router will experience only one initial page load, with no additional loads occurring during route changes. This behavior is common in Single Page Applications.

To validate this concept, try accessing a different route, reloading the page, and running performance.getEntriesByName(window.location.href) again. You should retrieve your desired data set instead of an empty array.

In order to access specific performance data in a Vuejs app, you may need to manually create some performance "marks" within your codebase. By doing so, you can access the entries associated with these marks.

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

Disable the default page scrolling behavior when collapsing an accordion section in Bootstrap 4 framework

Incorporating a Bootstrap 4 accordion with an expanded body section that causes the content below to scroll up when collapsed. To address this issue, attempting to scroll to the top of the clicked header and prevent undesirable scrolling from the collapse ...

javascriptjquerytwitter-bootstrapaccordion

Guide on seamlessly adding NPM "dependencies" to index.html using <script> tags in a VUE JS WEBPACK project

Are there any tools available that automatically inject or include NPM dependencies into the index.html file, similar to the GRUNT-BOWER plugin for BOWER dependencies? The project in question is a VUE-CLI WEBPACK project. Can this functionality be achieve ...

javascriptnpmwebpackvuejs2vue-cli

Having trouble making updates to a MongoDB document through Node.js

I am working on the development of an online course platform and facing an issue while adding new video lectures to a specific course. After creating a course, any attempt to add new content triggers an update request, even when adding video lectures that ...

javascriptangularjsnode.jsmongodbrest

What is the best way to encode a GLTF file without compromising the encoding of other meshes and textures?

Currently, I am working on a fascinating web AR app that enables users to don GLTF head models. (You can check it out at ) To ensure optimal lighting of the GLTF model, I have implemented renderer.outputEncoding = THREE.sRGBEncoding, which has been very ef ...

javascriptencodingthree.jslightinggltf

Calculating the total sum of values within a JSON array

Here is the data that I am working with: input1 = [{ "201609": 5, "201610": 7, "201611": 9, "201612": 10, "FY17": 24, "metric": "metric1", "careerLevelGroups": [{ "201609": 3, "201610": 6, "201611": ...

javascriptarraysjsontypescript

Angular backslash is encoded

Experiencing the same issue as this individual: angularjs-slash-after-hashbang-gets-encoded The URL is getting encoded and not routing correctly, causing it to fall to the otherwise in my route config. I have not been able to identify the root cause yet, ...

javascripthtmlangularjsurl-rewriting

Issue with the statement not being recognized for counting the space bar

I created a counter but I'm having trouble incorporating if statements For example: if (hits == 1) {alert("hello world1")} if (hits == 2) {alert("hello world2")} if (hits == 3) {alert("hello world3")} if (hits == 4) {alert("hello world4")} This is t ...

javascript

The translateX property will be set to the offsetX value of the event when the mouse is moved, resulting in a

Here's a quick and easy question regarding some kind of scrubber tool. Check out the fiddle below. When using jQuery to bind to the mousemove event and adjusting the transformX property in the positive direction, there's a 50% chance it will ret ...

javascriptjqueryhtmleventsmouseevent

Incorporating Framer Motion into traditional React class components (non-functional approach)

I'm encountering an issue with a simple animation using Framer Motion that functions correctly in a functional component, but fails to work in a class component. I am new to Framer Motion and here is my react code => import {motion} from 'fr ...

javascriptreactjsnext.jsframer-motion

The remaining visible portion of a viewport is equivalent to the height of an element

Is there a way to dynamically set a div's height so that it expands from its starting position to the end of its parent div, which is 100% of the viewport minus 20 pixels? Here is an example of how you can achieve this using jQuery: $(document).read ...

javascriptjqueryhtmlcss

Receive a distinct key alert after including a key attribute to a div element containing multiple sub nodes in react version 18.2.0

When attempting to render the div element on the page, I encountered a warning stating: "Each child in a list should have a unique 'key' prop." <div {...{}} key={"formKey"}> <input type="text" /> <button> ...

javascripthtmlreactjsjsxreact-key-index

Is it advisable to use Angular $resource JSON Callback if it's not functioning correctly?

I am in the process of creating a resource to send data to my controller for an existing API that I need to connect with. Unfortunately, I do not have the ability to make any changes on the backend. Current state of my Resource factory: 'use strict& ...

javascriptjsonangularjs

What is the best way to integrate Vue with Django?

I'm currently working on integrating a reactive Vue.js frontend with Django backend for my project. However, I am struggling to understand how to effectively combine these two technologies. While I have come across various methods to achieve this inte ...

djangovue.js

Sort the elements within the *ngFor loop according to the category upon clicking the button in Angular

Currently, I have a collection of items that I am iterating through using *ngFor. Above this list, there are category buttons available as shown in the HTML snippet below. My goal is to enable filtering of the list based on the category of the button click ...

javascripthtmlangularangular-pipe

Bootstrap 4 modal experiencing issues with the form end tag functionality

Currently, I am facing an issue while attempting to incorporate a confirmation delete feature using a Bootstrap 4 modal in my Laravel project. The problem arises when the modal is opened, and the submit button fails to function. Upon inspecting the browser ...

javascripttwitter-bootstraplaravelbootstrap-4bootstrap-modal

Switch a div to a computed location

I'm having trouble getting this code to animate a div to a calculated position. Can someone please help me troubleshoot? $(document).ready(function() { var is_Clicked = false; $("#togglebutton").click(function() { if (is_Cli ...

javascriptjqueryhtmlcss

Incorporating External HTML Content Using JQuery Function

Looking for assistance with a JQuery function: function addSomeHTML() { $("#mysection").html("<div id='myid'>some content here</div>"); } I am trying to have this part: <div id='myid ...

javascriptjqueryajax

Currently, I am on a quest to locate a particular item within an array through the power of node.js

Here is the array I am working with: [ { "_attributes": { "key": "attributes" }, "dt_assoc": { "item": { "_attributes": { "key": "status" }, ...

javascriptnode.jsarraysjson

Executing HTTP Requests for Elements in an Array using JavaScript

I am currently struggling with a script that sends HTTP requests to a website in order to obtain various documents. The document IDs are stored within an array, and my intention is to send a request for each element in the array and return a unique message ...

javascriptxmlhttprequest

Save a SQL query as a text file using Node.js

I'm having an issue with my code. I am trying to save the results of a SQL query into a text file, but instead of getting the actual results, all I see in the file is the word "object." const fs = require('fs'); const sql = require('mss ...

javascriptnode.jssql-server