Error Handling in Livewire

#1

I’m building products page. All products list shows up in the dropdown list. Upon selecting one, the name and image of a product show up.

The problem happens if we delete the product before the user selects it from the dropdown.

It shows a modal with a 404 error which won’t be enough for end-user to know what happened.

Is there a way to customize it? at least adding a message like “Product no longer avail” .

In my component:

public $products = [];
public $product = null;

public function mount() {
	$this->products = Product::all();
}

public function product($id) {
	$this->product = Product::find($id);
}

public function render() {
	return view('livewire.show-product');
}

In my view:

    <div class="form-group">
      <label for="product">Select Product:</label>
      <select wire:change="product($event.target.value)" class="form-control" id="product" name="product">
        <option>Select Product</option>

        @foreach($products as $product_)
          <option value="{{ $product_->id }}">{{ $product_->name }}</option>
        @endforeach

      </select>
    </div>

@if($product)
    <p class="m-0 h3 pt-4">{{ $product->name }}</p>
    <hr>

    <div class="col-md-6 pt-1 pb-4 p-0">
      <img src="{{ $product->media[0] }}" class="img-thumbnail">
    </div>

@endif

I’ve used this code from https://github.com/livewire/livewire/pull/1146:

window.livewire.onError(statusCode => {
  if (statusCode === 404) {
	alert('Your own message');
  }
  return false;
});

That works but stops livewire HTML from rendering.

Re-render is important for removing deleted products from the dropdown.

#2

i am new to livewire and if someone has a proper solution for handling errors, that happen in the background, I would be happy to get them known. thanks.

#3

while this retrieve still in mount, on re-render this property don’t be updated. I suggest you do it on render or after any change in this collection uptated