Laravel Pulse cards to show response times, scheduled jobs, broken links

Today, we released the ohdearapp/ohdear-pulse package, which contains Laravel Pulse cards to show you the status of your scheduled jobs, any broken links you have in your Laravel app, and uptime / HTTP performance stats. All of these cards use the Oh Dear API to fetch their data.

Laravel Pulse is a first party package that can display a dashboard with information surrounding usage and performance of your Laravel app. Here’s how a default installation looks like.

Discovering the cards

The first Pulse card one displays if you site is up, and recent response times.

This card, and also the other two, also support dark mode.

Oh Dear can monitor if the scheduled jobs of a Laravel app run on time. Using the spatie/laravel-schedule-monitor package, you can sync the schedule of your app to Oh Dear.

The cron Pulse card displays when your scheduled jobs have run for the last time, and if they ran on time. Very powerful stuff if you ask me.

The last card can display any broken links of your app. This card is powered by Oh Dear’s broken links check, which crawls your entire site.

Installing the cards

To use these cards, you have to pull in the package in your app via Composer.

composer require ohdearapp/ohdear-pulse

In your config/services.php file, add the following lines:

'oh_dear' => [
    'pulse' => [
        'api_key' => env('OH_DEAR_API_TOKEN'),
        'site_id' => env('OH_DEAR_SITE_ID'),
    ],
],

You can create an API token on the "API Tokens" page at Oh Dear. You'll find the site ID on the "Settings" page of a site on Oh Dear.

You can add the cards to your Pulse dashboard, by first publishing the Pulse's dashboard view:

php artisan vendor:publish --tag=pulse-dashboard

Next, add the cards to the resources/views/vendor/pulse/dashboard.blade.php file:

<x-pulse>
    <livewire:ohdear.pulse.uptime cols="4" />
    
    <livewire:ohdear.pulse.cron cols="8" />

    <livewire:ohdear.pulse.brokenLinks cols="8" />
    
    {{-- Add more cards here --}}
</x-pulse>

You’ll find the code in this repo on GitHub.