Counting how many times an image appears on screen ERROR

Question

I have a Ruby on Rails 6 project with a bulma theme.There are many photos in my pages. and I want to print the information on how many times people look at these photos.

I have also been looking into https://github.com/charlotte-ruby/impressionist but I am not sure this is working rails 6.

And ı'm using Ruby on rails 6.0.2.2 verison. This is important baceuse when ı use rails 5 it's working. but now ım using rails 6 and ı got some typerror problem .

I know where is the problem.but ı can't fix this problem. ı need help.

console error message error photo

my-controller

impressionist actions: [:show], unique: [:impressionable_type, :impressionable_id, :session_hash]

if ı delete :sission_hash my project is running. but ı can't take how many people see my photo.not working properly only 1 person shows

shot.rb

is_impressionable

show.html.erb

<div class="column is-3 is-offset-1">
    <div class="nav panel show-shot-analytics">
        <div class="panel-block views data">
            <span class="icon"><i class="fa fa-eye"></i></span>
                <%= pluralize(@shot.impressionist_count, 'View') %>
        </div>
        <div class="panel-block comments data">
        <span class="icon"><i class="fa fa-comment"></i></span>
        <%= pluralize(@shot.comments.count, 'Comment') %>
 </div>

impression.rb

# Use this hook to configure impressionist parameters
#Impressionist.setup do |config|
  # Define ORM. Could be :active_record (default), :mongo_mapper or :mongoid
  # config.orm = :active_record
#end

Gemfile

gem 'impressionist', '~> 1.6'

Terminal Error screen

Started GET "/shots/7" for ::1 at 2020-03-31 03:15:20 +0300
Processing by ShotsController#show as HTML
  Parameters: {"id"=>"7"}
  Shot Load (0.4ms)  SELECT "shots".* FROM "shots" WHERE "shots"."id" = ? LIMIT ?  [["id", 7], ["LIMIT", 1]]
  ↳ app/controllers/shots_controller.rb:85:in `set_shot'
  User Load (0.3ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "users"."id" ASC LIMIT ?  [["id", 3], ["LIMIT", 1]]
Completed 500 Internal Server Error in 20ms (ActiveRecord: 0.7ms | Allocations: 4748)
TypeError - TypeError:

Started POST "/__better_errors/3ae8964a5ff3f901/variables" for ::1 at 2020-03-31 03:15:20 +0300

shot.jsJavascrip document

document.addEventListener("turbolinks:load", function(){

var Shots = {
    previewShot(){
        if (window.File && window.FileList && window.FileReader) {

            function handleFileSelect(evt){
                evt.stopPropagation();
                evt.preventDefault();

                let files = evt.target.files || evt.dataTransfer.files;

                for (var i =  0, f; f = files[i]; i++) {
                    if (!f.type.match('image.*')) {
                        continue;
                    }
                    const reader = new FileReader();

                    reader.onload = (function(theFile){
                        return function(e){
                            //Render thumbnail
                            let span = document.createElement('span');
                            span.innerHTML = ['<img class="thumb" src="', e.target.result,
                                    '" title="', escape(theFile.name), '"/>'
                                ].join('');
                            document.getElementById('list').insertBefore(span, null);
                        };

                    })(f);
                    reader.readAsDataURL(f);
                }
            }

            function handleDragOver(evt){
                evt.stopPropagation;
                evt.preventDefault;
                evt.dataTransfer.dropEffect = 'copy';
            }

                const dropZone = document.getElementById('drop_zone');
                const target = document.documentElement;
                const fileInput = document.getElementById('shot_user_shot');
                const previewImage = document.getElementById('previewImage');
                const newShotForm = document.getElementById('new_shot');

            if(dropZone){
                dropZone.addEventListener('dragover', handleDragOver, false);
                dropZone.addEventListener('drop', handleFileSelect, false);


            dropZone.addEventListener('dragover', (e) => {
                dropZone.classList.add('fire');
            },false);

            dropZone.addEventListener('dragleave', (e) => {
                dropZone.classList.remove('fire');
            }, false);

            dropZone.addEventListener('drop', (e)=>{
                e.preventDefault();
                dropZone.classList.remove('fire');
                fileInput.files = e.dataTransfer.files;
                //if on shot/id/edit hide preview image on drop
                if(previewImage){
                    previewImage.style.display = 'none';
                }
                if (newShotForm) {
                    dropZone.style.display = 'none';
                }
            }, false);
            // Body Specific
            target.addEventListener('dragover', (e)=> {
                e.preventDefault('dragging');
            }, false);
            // removes dragging class to body when not dragging
            target.addEventListener('dragleave', (e)=>{
                dropZone.classList.remove('dragging');
                dropZone.classList.remove('fire');
            }, false);

            }

        }
    },
            shotHover() {
                $('.shot').hover(function() {
                    $(this).children('.shot-data').toggleClass('visible');
                });
            }
    };
    Shots.previewShot();
    Shots.shotHover();

});