Error Handling in Livewire

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('');

In my view:

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

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


    <p class="m-0 h3 pt-4">{{ $product->name }}</p>

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


I’ve used this code from

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.