Using Spatie Ray with Alpine.js not working - $ray not defined

Hi I've just started to use Spatie Ray to help debug my app and in particular livewire/alpine js components. I have Ray installed for php and this is working - I can see messages and log entries in Ray. I'm now trying to use on the Alpine elements.

I'm loading the scripts via CDN and have these scripts in the header before loading liverwire scripts:

<script>
      window.alpineRayConfig = {
        logComponentsInit: true,
        logErrors: true,
        logeEvents: ['abc']
      };
    </script>
    <script src="https://cdn.jsdelivr.net/npm/axios@latest/dist/axios.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/alpinejs-ray@2/dist/standalone.min.js"></script>

I'm then testing the set up with an example from the site as follows:

<div x-data="onClickData()">
            <div x-show="show">Hi There Ray!</div>
            <button x-on:click="toggle()">Show/Hide (Ray)</button>
            <button @click="$ray('hello from alpine')">Send to Ray</button>
        </div>
        <button type="button"
                wire:click="clickRay()"
                class="block p-block py-2 px-2 hover:rounded-sm hover:bg-red-900 text-red-600 flex items-center">
            <span class="px-1 py-2">Ray</span>
        </button>

<script>
      function onClickData() {
        return {
          init() {
            this.$ray().html('<strong>init on-click-ray data</strong>');
          },
          toggle() {
            this.show = !this.show;
            this.$ray('toggled show value to ' + (this.show ? 'true' : 'false'));
          },
          show: false
        };
      }
    </script>

These alpine components work as expected however on loading the page I get an immediate error with the ray alpine extension as follows:

Uncaught TypeError: Cannot read properties of undefined (reading 'randomUUID')
    at native.js:13:31
    at standalone.min.js:4:80
    at standalone.min.js:5:3

and a further error - presumably because the extension failed to load:

Uncaught TypeError: this.$ray is not a function
    at Proxy.init (golfCourse:1052:18)
    at livewire.js?id=87e1046f:1162:25
    at tryCatch (livewire.js?id=87e1046f:1118:14)
    at evaluate (livewire.js?id=87e1046f:1142:34)
    at Function.<anonymous> (livewire.js?id=87e1046f:3554:29)
    at flushHandlers (livewire.js?id=87e1046f:1283:48)
    at stopDeferring (livewire.js?id=87e1046f:1288:7)
    at deferHandlingDirectives (livewire.js?id=87e1046f:1291:5)
    at initTree (livewire.js?id=87e1046f:1478:5)
    at livewire.js?id=87e1046f:1430:7

I've checked the order of the scripts per the install guide - before loading Ray and set the config but no change.

Is there anything else I should check? - would it help to install via npm? - although the preferred method via the site is via CDN,

Thank you

LaryAI

1 year ago

Level 58

The issue you're encountering seems to be related to the randomUUID function, which is a part of the Web Crypto API and is not supported in all environments, particularly older browsers or environments that don't fully support the latest JavaScript features.

Here are a few steps you can take to resolve the issue:

Check Browser Compatibility: Ensure that you are using a modern browser that supports the randomUUID function. You can check the compatibility of this function on MDN Web Docs.

Polyfill for randomUUID: If you need to support environments that do not have randomUUID, you can use a polyfill. Here's a simple polyfill you can add before loading the alpinejs-ray script:

<script>
  if (!('randomUUID' in crypto)) {
    crypto.randomUUID = function() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
      });
    };
  }
</script>

Script Order: Double-check the order of your scripts. Make sure that the polyfill (if needed) and the alpinejs-ray script are loaded before any Alpine.js components that use $ray.
Use NPM for Local Development: If the issue persists, consider installing alpinejs-ray via NPM for local development. This can sometimes resolve issues related to CDN caching or version mismatches. You can install it using:
```
npm install alpinejs-ray
```
Then, import it in your JavaScript entry file:
```
import 'alpinejs-ray';
```
Check for Updates: Ensure that you are using the latest version of alpinejs-ray and any related libraries. Sometimes, bugs are fixed in newer releases.

By following these steps, you should be able to resolve the issue with the randomUUID error and get the $ray function working in your Alpine.js components.

Please or to participate in this conversation.