Last Updated: 2024-04-25

The show page for each tax advisor was displayed immediately after creating one. However this page bugged out - here is the problematic code:

<script>
  Profile.attachDOMDependentJS();

  function initialize(){
    // The bit in {{ ... }} is PHP blade syntax, used for HTML templates.
    Profile.initMap( {{ $advisor['latitude'].', '. $advisor['longitude'] }} );
  }
</script>

The errors were SyntaxError: expected expression, got ','"

What happened was that, immediately after an $advisor was created, the latitude and longitude values were still null, and this broke the JavaScript since it expected these to have non-null values.

This bug flew in under the radar, despite my tests, because, behind the scenes, latitude and longitude are calculated in a background job, but I made that work synchronous in my tests - therefore artificially avoiding the period where these attributes were null.

Ultimately the fix was to conditionally execute only if not null:

@if($advisor['latitude'])
   <script>
     ...
   </script>
@endif

Lesson

Narrowly, I should have considered what happens when attributes that are generated later in the lifecycle were still null (and perhaps even created this as dummy data).

More specifically, try not to turn asynchronous work into synchronous work in your tests - otherwise you will miss out on bugs that appear during interim data states.

And, generally, speaking, before accessing an attribute, consider if it might possibly be null (Typescript etc. helps here)