"e is undefined' on loading of goals widget with outbound link click tracking activated

[funktionierbar]

Hi I am trying this software for my usecase. Outbound link tracking is very important to me. I activated the link tracking using these instructions: https://www.vinceanalytics.com/blog/goals-outbound-links/ very easy to follow.

When I then open the dashboard, everything works at first, but when I scroll down to the Goals Widget, the site crashes with the error 'e is undefined'.

Can you help me solve this problem?

I am using a docker setup on my ubuntu VPS with a reverse proxy using apache2. The basic functions work fine and everything looks good.

[guniv]

I'm also running into this issue.

[raoulh]

Same issue here

[0xkalle]

Same here

Edit: so for me for every goal type it seems to be the case.

[sahithyandev]

Same issue for me.

[edarchis]

Same here.

• Add goal to a Vince site: OK
• Change the JS url: OK (had to disable ublockorigin)
• Add vince-event-name=toto: no effect, no event is sent. The JS snippet doesn't support vince-event-name but plausible-event-name. The documentation uses a mix of these. OK
• When I come back to the Vince site, the stats are showing normally but when I scroll to the Goals section, it queries the api successfully but replaces the page with an error:

It seems to trigger in dashboard.js:

function F2(e,t){if(e.length<=t)return e;let n="...";

I couldn't set a breakpoint at that specific location to try and debug it. I don't have a dev version or source maps available for easier to read code.

I upgraded my Vince to the latest version as of posting this, no difference. I tried with another server, same result.

I was able to build a development version to reproduce the issue. It comes from:

  function renderBarFor(listItem) {
    const lightBackground = color || 'bg-green-50'
    const metricToPlot = metrics.find(metric => metric.meta.plot).key

    return (
      <div className="flex-grow w-full overflow-hidden">
        <Bar
          count={listItem[metricToPlot]}
          all={state.list}
          bg={`${lightBackground} dark:bg-gray-500 dark:bg-opacity-15`}
          plot={metricToPlot}
        >
          <div className="flex justify-start px-2 py-1.5 group text-sm dark:text-gray-300 relative z-9 break-all w-full">
            <FilterLink
              filterInfo={getFilterFor(listItem)}
              onClick={onClick}
              extraClass="max-w-max w-full flex items-center md:overflow-hidden"
            >
              {maybeRenderIconFor(listItem)}

              <span className="w-full md:truncate">
                {trimURL(listItem.name, colMinWidth)}
              </span>
            </FilterLink>
            <ExternalLink item={listItem} externalLinkDest={externalLinkDest} />
          </div>
        </Bar>
      </div>
    )
  }

With an event

{"conversion_rate":100,"event":"toto","events":0,"visitors":1}

That doesn't have a name attribute. The trimUrl then tries to do a .length on it and triggers this exception.

I'm not entirely sure whether there is supposed to be a name in there and we're all missing a step, or whether it's just a matter of using .event if .name is not defined.