sachinchoolur / lightGallery

A customizable, modular, responsive, lightbox gallery plugin.

Home Page:https://www.lightgalleryjs.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Error monitor tool report big amount of errors for zoom plugin

kazvaggos opened this issue · comments

Description

Hello team.

After a while using lightgallery, our error monitor tool has reported a big amount of errors on zoom plugin. The main stack traces are the following:

TypeError: Cannot read properties of undefined (reading 'offsetHeight')
  at getImageSize(./node_modules/lightgallery/plugins/zoom/lg-zoom.es5.js:190:16)
  at setZoomEssentials(./node_modules/lightgallery/plugins/zoom/lg-zoom.es5.js:285:32)
  at apply(./node_modules/lightgallery/plugins/zoom/lg-zoom.es5.js:130:23)
  
TypeError: Cannot read properties of undefined (reading 'height')
  at getDragAllowedAxises(./node_modules/lightgallery/plugins/zoom/lg-zoom.es5.js:224:67)
  at apply(./node_modules/lightgallery/plugins/zoom/lg-zoom.es5.js:904:47)
  at HTMLDivElement.i(./node_modules/@sentry/browser/esm/helpers.js:73:23)

and the device that mainly happens is Mac OS X, Version:10.15.7 using Chrome browser.

Is it possible to add some fallback there so the errors don't occur?

Steps to reproduce

Unfortunately we can't reproduce it, but the actions that the users were doing were to navigate through the photos, clicking next button.
The errors occurred in the following link.

JS code that you use to initialize lightGallery.

import lgThumbnail from 'lightgallery/plugins/thumbnail';
import lgZoom from 'lightgallery/plugins/zoom';

  const gallery = lightGallery(this.$el, {
     actualSize: false,
    addClass: 'photo-gallery__container',
    backdropDuration: 300,
    controls: true,
    counter: false,
    download: false,
    enableDrag: false,
    licenseKey,
    mobileSettings: {
      controls: false,
      showCloseIcon: true,
      download: false
    },
    plugins: [lgZoom, lgThumbnail],
    scale: 2,
    subHtmlSelectorRelative: true,
    thumbnail: true,
    trapFocus: true,
  });
  
 gallery.openGallery();

Sample HTML markup

  <div>
    <a
      v-for="image in images"
      :key="image.src"
      :data-src="image.src"
      :data-lg-size="`${image.width}-${image.height}`"
      data-sub-html=".hook"
      class="item-hook"
    >
      <img :src="image.thumbnail" :alt="image.caption" />
      <div class="hook">
        <div>
          <span>{{ counter }}/{{ images.length }}</span>
          <span>{{ image.caption }}</span>
        </div>
      </div>
    </a>
  </div>

Environment

  • Browser and version - Chrome 102.0.0
  • OS - Mac OS X
  • lightGallery version - 2.4.0

Additional context

N/A

Hey @kazvaggos,

Thank you for reporting this issue.
I'm able to reproduce the issue on your site. This happens only user clicks the on the image in very short intervals. (Opening and closing gallery in than a second)

But, this won't prevent users from viewing the images or break any of your website's functionality. Even if the error appears, the gallery will still open up.

But, I've noted the issues and will add a fix in the coming version

That's great @sachinchoolur !
Thanks a lot :)

Hey @sachinchoolur , any solution for this next.js

commented

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.