I am experiencing issues with the Nuxt.js (SPA) application constantly crashing on iOS Safari whenever I attempt to take multiple photos. Could this be due to a memory

An innovative application I developed utilizes Nuxt.js (SPA) to efficiently process up to 20 images captured with an iPhone in one go. Upon capturing the images, they are compressed to roughly 500KB using a library known as browser-image-compression and then displayed in a preview format.

The challenge arises when attempting to register 20 photos simultaneously, causing the Nuxt.js application to suddenly crash mid-process. The captured image starts to disappear after loading, resembling a reloading scenario, hinting at a potential memory leak issue.

In an effort to diagnose the problem, I monitored the memory usage using Mac Safari's timeline feature but observed a continuous increase in memory consumption with each shot without any decrease.

One attempt to address this was by refreshing the memory using location.reload(true), although it did not result in reduced memory usage. Your insights on how to effectively manage memory refresh or prevent the application from crashing would be greatly appreciated.

For reference, you can view the Memory Timeline just before the crash.

Versions

  • iPhone 11
  • iOS 14.6
  • @nuxt/cli v2.14.12
  • Vue v2.6.14
  • browser-image-compression v1.0.14
javascriptvue.jsnuxt.js

Answer №1

There was a PR addressing this specific issue, but it may not have completely resolved the bug.

I recommend verifying the memory usage in a different browser such as Chrome or Firefox to see if the problem persists. If it does, consider providing feedback to browser-image-compression or exploring alternative packages.

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

Display webpage in a fancybox

I've searched extensively for sample cases on the internet, but unfortunately, I couldn't locate any. Is there a way to upload a fresh HTML file using fancybox? $('#Create').click(function() { $.fancybox({ What content should be in ...

javascripthtmlcssfancybox

Retrieve the Flot graph object using Javascript

Seeking advice on a function that should return a JavaScript object. function get_temp(){ var datasets_temp = { "sens1": {data: [[1340803113,22.9],[1340803474,23],[1340803836,23],[1340804197,23.1]] }, "sens2": {data: [[134084 ...

javascriptjqueryflot

How to conditionally disable the @click event on an image element in Vue.js

I am presenting the code snippet below: <image id="wheel-bg" class="wheel-bg" :x="-width/2" :y="-height/2" href="images/wheel-bg.png" :width="width" :height="he ...

vue.jsvuejs3

The object function router(req, res, next) is encountering an error as it does not contain the required method for handling the request

I am trying to add a new row to my MySQL database, but I encountered an error message. Here is the scenario: I have set up Passport and hjs in my project. I am passing form data from app.js to a JavaScript file where I aim to insert the data. Object funct ...

javascriptnode.jsexpress

Shifting the MUI DataGrid Pagination table to the left with CustomPagination: A step-by-step guide

Hey everyone, I am currently diving into the MUI data grid to gain a better understanding. In order to meet my design requirements for a table view, I have incorporated the DataGrid component from MUI. For pagination, I am utilizing their custom implementa ...

javascriptcssreactjsmaterial-ui

Efficiently Measuring the Visibility Area of DetailsList in Fluent UI

I am currently utilizing the DetalisList component alongside the ScrollablePane to ensure that the header remains fixed while allowing the rows to scroll. However, I have encountered a challenge as I need to manually specify the height of the scrollable co ...

javascripttypescriptfluent-uioffice-fabricfluentui-react

Ways to have a div show up and stay in place as you scroll down?

How can I make the div "full" sticky after scrolling down 200px, and revert to display none when scrolling back up? Is there a way to accomplish this using JavaScript? In the code snippet below, you will find three divs: header, header2, and header3. The ...

javascriptjquery

Distributing utility functions universally throughout the entire React application

Is there a way to create global functions in React that can be imported into one file and shared across all pages? Currently, I have to import helper.tsx into each individual file where I want to use them. For example, the helper.tsx file exports functio ...

javascriptreactjstypescripthelperreact-typescript

What is the best way to insert a button at the end of the last row in the first column and also at the

I am working on a JavaScript project that involves creating a table. My goal is to dynamically add buttons after the last row of the first column and also at the top of the last column. for (var i = 0; i < responseData.length; i++) { fo ...

javascriptjquery

Manipulate the DOM elements within the ng-repeat directive

Hello, I am currently new to AngularJS and have just begun learning how to create directives. While working on a sample project, I encountered an issue with accessing DOM elements rendered inside my directive. Some elements were not accessible in the link ...

javascriptangularjsdomangularjs-ng-repeat

Enhance the input by incorporating more fields without altering the existing content

Currently, I am working on creating an input form that includes multiple fields and has the capability to generate a preview of the entered content in a separate div. One key feature I would like to implement is allowing users to add additional fields as n ...

javascripthtmlformstextarea

The jQuery UI accordion fails to function properly after refreshing the data

I am facing an issue with my HTML page where data is loaded dynamically into accordions. The accordion functionality is implemented inside a function, which is called at regular intervals to refresh the data. Initially, the accordion displays correctly, bu ...

javascriptjqueryhtmljquery-ui

Difficulty rendering Vue component observed when implementing simulated fetch response within unit testing

I am conducting a test to ensure the proper rendering of a BootstrapVue table based on data fetched from an API. I have set up a mock for the fetch function. Interestingly, when I statically provide data using the loadItems() method, the table renders with ...

vue.jsjestjsmockingfetch-apibootstrap-vue

To begin, formulating a blank state entity containing a collection of key-value pairs with JSON objects as the values. Subsequently, modifying the contents of

I am working on setting up a reactJS state with an empty array to start. When I receive a message in the form of a JSON object, I want to add a key-value pair to the array, using the received message as the value and a specified key. For example: We have ...

javascriptjsonreactjs

Accessing a parent class constructor object in NodeJS from the Child Class

I'm currently working on creating a Controller Class that will handle the initialization of all my routes using ExpressJS. Below is a simple example of what I have so far: class Test extends Controller { constructor(App) { const Routes = [ ...

javascriptnode.jsexpress

Summing Up Values in Jquery Loop Through Table Rows

I am facing a challenge with a table that contains a textfield for inputting numeric values. This textfield is part of a repeated row table, with the ID 'amount'. My goal is to calculate the sum of all values entered in the textfields with the ID ...

javascriptjqueryhtml

An error occurs when attempting to upload an image in cropper js due to a violation of the Content Security Policy directive: "img-src * data:"

I'm currently using cropperjs to crop an image upon uploading click here to see the button Once the image is selected for upload, I encounter this problem The data in blob storage remains intact, but there seems to be an issue after the image is upl ...

javascript.netgoogle-chromecontent-security-policycropperjs

Exploring the application of Checklist-model in Angular

My goal is to have departments as titles and employees as subtitles. When the user checks a department title, all associated employees should also be checked. I am implementing this using fieldset and table in HTML with ng-repeat. It seems similar to this ...

javascriptangularjshtmlchecklist-model

Encountering the error "Cannot access property 'stroke' of undefined" when utilizing constructors in React and p5

Hi there, I'm having trouble with my React code and could really use some assistance. Being new to React, I'm trying to create a collision system between multiple bubbles in an array, but I keep running into this undefined error: https://i.sstat ...

javascriptreactjs

Angular: Variable `app` has not been defined

I am working on a simple MEAN stack app and it is almost up and running, but I encountered an uncaught reference error when it tries to redirect to the index page. The server seems to be running fine and the browser displays "Loading..." as expected on the ...

javascripthtmlangularmean-stackmean