What seems to be the problem:
Im pulling crypto price information from coingecko from there API. And for some reason it is
- Slow as hell
- Sometime it gives me a 500 error that takes the whole screen
The firs problem isn’t something I can do anything about, but the second problem - it is very annoying and unprofessional to receive a fullscreen 500 error in production.
Steps to Reproduce:
This is my ShitCoinData.php located in app\Http\Livewire
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Illuminate\Support\Facades\Http;
use Illuminate\Support\Facades\Cache;
class ShitcoinData extends Component
{
public $bitcoin = [];
public $ethereum = [];
public $dogecoin = [];
public $cardano = [];
public $litecoin = [];
public $hexcoin = [];
public function loadShitCoinDataBitcoin()
{
$this->bitcoin = Cache::remember('bitcoin', 300, function(){
return Http::get('https://api.coingecko.com/api/v3/coins/bitcoin?tickers=false&community_data=false&developer_data=false&sparkline=true')->json();
});
if(!isset($this->bitcoin['market_data']['price_change_percentage_1h_in_currency']['usd'])){
$this->bitcoin['market_data']['price_change_percentage_1h_in_currency']['usd'] = 0;
}
}
public function loadShitCoinDataEthereum()
{
$this->ethereum = Cache::remember('ethereum', 300, function(){
return Http::get('https://api.coingecko.com/api/v3/coins/ethereum?tickers=false&community_data=false&developer_data=false&sparkline=true')->json();
});
if(!isset($this->ethereum['market_data']['price_change_percentage_1h_in_currency']['usd'])){
$this->ethereum['market_data']['price_change_percentage_1h_in_currency']['usd'] = 0;
}
}
public function loadShitCoinDataDogecoin()
{
$this->dogecoin = Cache::remember('dogecoin', 300, function(){
return Http::get('https://api.coingecko.com/api/v3/coins/dogecoin?tickers=false&community_data=false&developer_data=false&sparkline=true')->json();
});
if(!isset($this->dogecoin['market_data']['price_change_percentage_1h_in_currency']['usd'])){
$this->dogecoin['market_data']['price_change_percentage_1h_in_currency']['usd'] = 0;
}
}
public function loadShitCoinDataCardano()
{
$this->cardano = Cache::remember('cardano', 300, function(){
return Http::get('https://api.coingecko.com/api/v3/coins/cardano?tickers=false&community_data=false&developer_data=false&sparkline=true')->json();
});
if(!isset($this->cardano['market_data']['price_change_percentage_1h_in_currency']['usd'])){
$this->cardano['market_data']['price_change_percentage_1h_in_currency']['usd'] = 0;
}
}
public function loadShitCoinDataLitecoin()
{
$this->litecoin = Cache::remember('litecoin', 300, function(){
return Http::get('https://api.coingecko.com/api/v3/coins/litecoin?tickers=false&community_data=false&developer_data=false&sparkline=true')->json();
});
if(!isset($this->litecoin['market_data']['price_change_percentage_1h_in_currency']['usd'])){
$this->litecoin['market_data']['price_change_percentage_1h_in_currency']['usd'] = 0;
}
}
public function loadShitCoinDataHexcoin()
{
$this->hexcoin = Cache::remember('hexcoin', 300, function(){
return Http::get('https://api.coingecko.com/api/v3/coins/hex?tickers=false&community_data=false&developer_data=false&sparkline=true')->json();
});
if(!isset($this->hexcoin['market_data']['price_change_percentage_1h_in_currency']['usd'])){
$this->hexcoin['market_data']['price_change_percentage_1h_in_currency']['usd'] = 0;
}
}
public function render()
{
return view('livewire.shitcoin-data');
}
}
It is probably a mess. Any suggestion for refactoring is also appreciated, but would be cool to avoid that 500 error.
And this is how I load the data in shitcoin-data.blade.php
<tr wire:init="loadShitCoinDataBitcoin" class="border-b border-gray-400 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-opacity-50">
@if(!empty($bitcoin))
<td>
<span class="flex items-center flex-col md:flex-row m-2">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><g fill="none" fill-rule="evenodd"><circle cx="16" cy="16" r="16" fill="#F7931A"/><path fill="#FFF" fill-rule="nonzero" d="M23.189 14.02c.314-2.096-1.283-3.223-3.465-3.975l.708-2.84-1.728-.43-.69 2.765c-.454-.114-.92-.22-1.385-.326l.695-2.783L15.596 6l-.708 2.839c-.376-.086-.746-.17-1.104-.26l.002-.009-2.384-.595-.46 1.846s1.283.294 1.256.312c.7.175.826.638.805 1.006l-.806 3.235c.048.012.11.03.18.057l-.183-.045-1.13 4.532c-.086.212-.303.531-.793.41.018.025-1.256-.313-1.256-.313l-.858 1.978 2.25.561c.418.105.828.215 1.231.318l-.715 2.872 1.727.43.708-2.84c.472.127.93.245 1.378.357l-.706 2.828 1.728.43.715-2.866c2.948.558 5.164.333 6.097-2.333.752-2.146-.037-3.385-1.588-4.192 1.13-.26 1.98-1.003 2.207-2.538zm-3.95 5.538c-.533 2.147-4.148.986-5.32.695l.95-3.805c1.172.293 4.929.872 4.37 3.11zm.535-5.569c-.487 1.953-3.495.96-4.47.717l.86-3.45c.975.243 4.118.696 3.61 2.733z"/></g></svg>
</span>
<span>
Bitcoin <span class="text-gray-400">BTC</span>
</span>
</span>
</td>
<td class="">
USD {{ number_format($bitcoin['market_data']['current_price']['usd'], 2, ',', '.') }}
</td>
<td class="@if($bitcoin['market_data']['price_change_percentage_1h_in_currency']['usd'] < 0) text-red-500 @else text-green-500 @endif">
{{ round($bitcoin['market_data']['price_change_percentage_1h_in_currency']['usd'], 2) }}%
</td>
<td class="hidden sm:table-cell @if($bitcoin['market_data']['price_change_percentage_24h_in_currency']['usd'] < 0) text-red-500 @else text-green-500 @endif">
{{ round($bitcoin['market_data']['price_change_percentage_24h_in_currency']['usd'], 2) }}%
</td>
<td class="hidden sm:table-cell @if($bitcoin['market_data']['price_change_percentage_7d_in_currency']['usd'] < 0) text-red-500 @else text-green-500 @endif">
{{ round($bitcoin['market_data']['price_change_percentage_7d_in_currency']['usd'], 2) }}%
</td>
<td class="hidden sm:table-cell">
<img src="{{ asset('storage/images/bitcoin_sparkline.svg') }}" alt="">
</td>
@else
<livewire:shitcoins-loading/>
@endif
</tr>
Are you using the latest version of Livewire:
Composer.json says:
"livewire/livewire": "^2.0"
Do you have any screenshots or code examples:
Nah, just a big 500 | SERVER ERROR