CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> <title>Laravel Pulse - Laravel 12.x - The PHP Framework For Web Artisans</title> <link rel="canonical" href="https://laravel.com/docs/12.x/pulse">  <meta name="title" content="Laravel Pulse - Laravel 12.x - The PHP Framework For Web Artisans"> <meta name="description" content="Laravel is a PHP web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things.">  <meta property="og:type" content="website"> <meta property="og:url" content="https://laravel.com/"> <meta property="og:title" content="Laravel Pulse - Laravel 12.x - The PHP Framework For Web Artisans"> <meta property="og:description" content="Laravel is a PHP web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things."> <meta property="og:image" content="https://laravel.com/images/og/laravel-docs-12.png">  <meta property="twitter:card" content="summary_large_image"> <meta property="twitter:url" content="https://laravel.com/"> <meta property="twitter:title" content="Laravel Pulse - Laravel 12.x - The PHP Framework For Web Artisans"> <meta property="twitter:description" content="Laravel is a PHP web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things."> <meta property="twitter:image" content="https://laravel.com/images/og/laravel-docs-12.png">  <link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png"> <link rel="manifest" href="/img/favicon/site.webmanifest"> <link rel="mask-icon" href="/img/favicon/safari-pinned-tab.svg" color="#ff2d20"> <link rel="shortcut icon" href="/img/favicon/favicon.ico"> <meta name="msapplication-TileColor" content="#ff2d20"> <meta name="msapplication-config" content="/img/favicon/browserconfig.xml"> <meta name="theme-color" content="#ffffff"> <meta name="color-scheme" content="light"> <link rel="preload" href="/fonts/InstrumentSans.woff2" as="font" type="font/woff2" crossorigin="anonymous" /> <link rel="preconnect" href="https://E3MIRNPJH5-dsn.algolia.net" crossorigin /> <link rel="preload" as="style" href="https://laravel.com/build/assets/app-DTuzKHzc.css" /><link rel="modulepreload" href="https://laravel.com/build/assets/app-DsFpo0m6.js" /><link rel="modulepreload" href="https://laravel.com/build/assets/mediaQuery-Bm25Hv93.js" /><link rel="modulepreload" href="https://laravel.com/build/assets/module.esm-BKQTc33J.js" /><link rel="modulepreload" href="https://laravel.com/build/assets/docs-Ch76ti3c.js" /><link rel="modulepreload" href="https://laravel.com/build/assets/theme-switcher-CvREX8Sp.js" /><link rel="stylesheet" href="https://laravel.com/build/assets/app-DTuzKHzc.css" /><script type="module" src="https://laravel.com/build/assets/app-DsFpo0m6.js"></script><script type="module" src="https://laravel.com/build/assets/docs-Ch76ti3c.js"></script>  <script src="https://cdn.usefathom.com/script.js" data-site="DVMEKBYF" defer></script>   <script async src="https://tag.clearbitscripts.com/v1/pk_97d2bf69f817feb07be42fcda1460119/tags.js" referrerpolicy="strict-origin-when-cross-origin"></script> <script> const alwaysLightMode = false; const algolia_app_id = 'E3MIRNPJH5'; const algolia_search_key = '1fa3a8fec06eb1858d6ca137211225c0'; const version = '12.x'; if (!alwaysLightMode) { if (localStorage.theme === 'dark' || (localStorage.theme === 'system' && window.matchMedia("(prefers-color-scheme: dark)").matches)) { document.documentElement.classList.add("dark"); document.documentElement.setAttribute("data-theme", "dark"); document.documentElement.setAttribute("color-theme", "dark"); } } </script> <script> document.addEventListener('DOMContentLoaded', function () { // Set a CSS variable for the viewport width for the divider component document.documentElement.style.setProperty('--viewport-width', (document.body.clientWidth || 0)+'px'); }); window.addEventListener('resize', function () { document.documentElement.style.setProperty('--viewport-width', (document.body.clientWidth || 0)+'px'); }, { passive: true }); </script> </head> <body class="font-sans antialiased text-sand-light-12 bg-sand-light-1 dark:bg-sand-dark-1"> <div class="xl:px-0 mx-auto xl:max-w-[1400px] w-full max-w-full"> <div class="relative xl:border-l xl:mx-auto bg-sand-light-1 dark:bg-sand-dark-1 xl:border-sand-light-7 xl:dark:border-sand-dark-6"> <div id="nav-trigger" class="absolute left-0 top-32"></div> <nav class="sticky top-0 z-99 px-4 xl:px-16 py-8 h-(--popover-top-offset) dark:bg-sand-dark-1 transition-transform duration-300 bg-sand-light-1 border-b border-transparent sticky-nav docs-nav"> <div class="grid grid-cols-12 gap-4 lg:gap-6 xl:gap-x-10 relative items-center h-full overflow-hidden"> <ul class="flex items-start col-span-3 space-x-8 font-medium "> <li class="w-20 transition-transform duration-300 ease-in-out mr-18 text-laravel-red" id="nav-left"> <a href="https://laravel.com" class="flex items-center w-20 aspect-[80/23]"> <svg class="w-full h-full" width="1280" height="308" viewBox="0 0 1280 308" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M50.2753 0H0V308.689H144.713V263.27H50.2753V0Z" fill="currentColor" /> <path d="M322.209 130.973C315.796 120.684 306.688 112.602 294.883 106.718C283.081 100.84 271.201 97.8969 259.253 97.8969C243.798 97.8969 229.665 100.764 216.843 106.496C204.014 112.228 193.015 120.099 183.834 130.091C174.654 140.088 167.51 151.628 162.412 164.706C157.308 177.792 154.761 191.54 154.761 205.94C154.761 220.645 157.308 234.457 162.412 247.39C167.508 260.332 174.652 271.796 183.834 281.788C193.015 291.785 204.017 299.647 216.843 305.379C229.665 311.111 243.798 313.978 259.253 313.978C271.201 313.978 283.081 311.038 294.883 305.159C306.688 299.282 315.796 291.197 322.209 280.904V308.685H369.865V103.186H322.209V130.973ZM317.837 231.076C314.922 239.016 310.841 245.925 305.598 251.804C300.35 257.687 294.009 262.389 286.579 265.917C279.146 269.445 270.905 271.208 261.875 271.208C252.837 271.208 244.676 269.445 237.391 265.917C230.104 262.389 223.839 257.687 218.593 251.804C213.345 245.925 209.335 239.016 206.57 231.076C203.794 223.138 202.417 214.759 202.417 205.942C202.417 197.12 203.794 188.742 206.57 180.804C209.335 172.866 213.345 165.961 218.593 160.078C223.839 154.201 230.102 149.493 237.391 145.965C244.676 142.437 252.837 140.674 261.875 140.674C270.908 140.674 279.146 142.437 286.579 145.965C294.009 149.493 300.35 154.199 305.598 160.078C310.844 165.961 314.922 172.866 317.837 180.804C320.748 188.742 322.209 197.12 322.209 205.942C322.209 214.759 320.748 223.138 317.837 231.076Z" fill="currentColor" /> <path d="M709.568 130.973C703.155 120.684 694.047 112.602 682.242 106.718C670.44 100.84 658.56 97.8969 646.612 97.8969C631.157 97.8969 617.024 100.764 604.202 106.496C591.373 112.228 580.374 120.099 571.193 130.091C562.013 140.088 554.869 151.628 549.771 164.706C544.666 177.792 542.12 191.54 542.12 205.94C542.12 220.645 544.666 234.457 549.771 247.39C554.867 260.332 562.01 271.796 571.193 281.788C580.374 291.785 591.375 299.647 604.202 305.379C617.024 311.111 631.157 313.978 646.612 313.978C658.56 313.978 670.44 311.038 682.242 305.159C694.047 299.282 703.155 291.197 709.568 280.904V308.685H757.224V103.186H709.568V130.973ZM705.198 231.076C702.283 239.016 698.202 245.925 692.959 251.804C687.711 257.687 681.37 262.389 673.94 265.917C666.507 269.445 658.266 271.208 649.236 271.208C640.198 271.208 632.037 269.445 624.752 265.917C617.465 262.389 611.2 257.687 605.954 251.804C600.706 245.925 596.696 239.016 593.931 231.076C591.155 223.138 589.778 214.759 589.778 205.942C589.778 197.12 591.155 188.742 593.931 180.804C596.696 172.866 600.706 165.961 605.954 160.078C611.2 154.201 617.463 149.493 624.752 145.965C632.037 142.437 640.198 140.674 649.236 140.674C658.269 140.674 666.507 142.437 673.94 145.965C681.37 149.493 687.711 154.199 692.959 160.078C698.205 165.961 702.283 172.866 705.198 180.804C708.109 188.742 709.57 197.12 709.57 205.942C709.568 214.759 708.107 223.138 705.198 231.076Z" fill="currentColor" /> <path d="M1280 1.12315e-05H1232.35V308.689H1280V1.12315e-05Z" fill="currentColor" /> <path d="M407.466 308.689H455.117V150.486H536.876V103.192H407.466V308.689Z" fill="currentColor" /> <path d="M948.281 103.192L888.386 260.557L828.489 103.192H780.224L858.441 308.689H918.331L996.546 103.192H948.281Z" fill="currentColor" /> <path d="M1100.48 97.908C1042.13 97.908 995.937 146.279 995.937 205.944C995.937 271.9 1040.64 313.98 1106.59 313.98C1143.5 313.98 1167.06 299.745 1195.85 268.746L1163.66 243.621C1163.64 243.646 1139.36 275.802 1103.1 275.802C1060.96 275.802 1043.22 241.533 1043.22 223.803H1201.32C1209.62 155.913 1165.37 97.908 1100.48 97.908ZM1043.35 188.085C1043.71 184.13 1049.2 136.086 1100.1 136.086C1151.01 136.086 1157.19 184.123 1157.55 188.085H1043.35Z" fill="currentColor" /> </svg> <span class="sr-only">Home</span> </a> </li> </ul> <div class="absolute top-0 flex items-center p-2 cursor-pointer right-9 lg:right-auto lg:top-auto lg:relative lg:col-span-6 lg:w-full lg:hover:bg-sand-light-4 lg:dark:hover:bg-sand-dark-4 rounded-xs lg:dark:bg-sand-dark-5 lg:bg-sand-light-3 text-sand-light-9-alpha-45 dark:text-sand-dark-11"> <svg class="w-6 h-6 lg:w-5 lg:h-5 lg:mr-2 shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" > <g> <path d="M15.8333 15.8333L13.0523 13.0524M13.0523 13.0524C13.9943 12.1104 14.5769 10.8092 14.5769 9.3718C14.5769 6.49708 12.2465 4.16667 9.37176 4.16667C6.49704 4.16667 4.16663 6.49708 4.16663 9.3718C4.16663 12.2465 6.49704 14.5769 9.37176 14.5769C10.8091 14.5769 12.1104 13.9943 13.0523 13.0524Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> </g> </svg> <div class="grow"> <div id="docsearch" class="absolute inset-0 lg:*:px-9 lg:*:py-1.5 *:absolute *:inset-0 text-base bg-transparent text-sand-light-9-alpha-45/70 dark:text-sand-dark-10"></div> </div> <span class="ml-2 hidden lg:block mr-1.5 text-sm font-medium shrink-0 text-sand-light-9 dark:text-sand-dark-10">⌘K</span> </div> <div class="flex items-center justify-end col-span-9 gap-4 lg:col-span-3 dark:text-sand-dark-12"> <select x-data aria-label="Laravel version" @change="window.location = $event.target.value" class="hidden text-sm py-1.5 px-3 bg-sand-light-1 dark:bg-sand-dark-1 border-0 whitespace-nowrap lg:block" > <option value="https://laravel.com/docs/master/pulse"> Version Master </option> <option selected value="https://laravel.com/docs/12.x/pulse"> Version 12.x </option> <option value="https://laravel.com/docs/11.x/pulse"> Version 11.x </option> <option value="https://laravel.com/docs/10.x/pulse"> Version 10.x </option> <option value="https://laravel.com/docs/9.x/pulse"> Version 9.x </option> <option value="https://laravel.com/docs/8.x/pulse"> Version 8.x </option> <option value="https://laravel.com/docs/7.x/pulse"> Version 7.x </option> <option value="https://laravel.com/docs/6.x/pulse"> Version 6.x </option> <option value="https://laravel.com/docs/5.8/pulse"> Version 5.8 </option> <option value="https://laravel.com/docs/5.7/pulse"> Version 5.7 </option> <option value="https://laravel.com/docs/5.6/pulse"> Version 5.6 </option> <option value="https://laravel.com/docs/5.5/pulse"> Version 5.5 </option> <option value="https://laravel.com/docs/5.4/pulse"> Version 5.4 </option> <option value="https://laravel.com/docs/5.3/pulse"> Version 5.3 </option> <option value="https://laravel.com/docs/5.2/pulse"> Version 5.2 </option> <option value="https://laravel.com/docs/5.1/pulse"> Version 5.1 </option> <option value="https://laravel.com/docs/5.0/pulse"> Version 5.0 </option> <option value="https://laravel.com/docs/4.2/pulse"> Version 4.2 </option> </select> <select x-data aria-label="Laravel version" @change="window.location = $event.target.value" class="text-sm py-1.5 px-3 bg-sand-light-1 dark:bg-sand-dark-1 border-0 whitespace-nowrap lg:hidden" > <option value="https://laravel.com/docs/master/pulse"> vMaster </option> <option selected value="https://laravel.com/docs/12.x/pulse"> v12.x </option> <option value="https://laravel.com/docs/11.x/pulse"> v11.x </option> <option value="https://laravel.com/docs/10.x/pulse"> v10.x </option> <option value="https://laravel.com/docs/9.x/pulse"> v9.x </option> <option value="https://laravel.com/docs/8.x/pulse"> v8.x </option> <option value="https://laravel.com/docs/7.x/pulse"> v7.x </option> <option value="https://laravel.com/docs/6.x/pulse"> v6.x </option> <option value="https://laravel.com/docs/5.8/pulse"> v5.8 </option> <option value="https://laravel.com/docs/5.7/pulse"> v5.7 </option> <option value="https://laravel.com/docs/5.6/pulse"> v5.6 </option> <option value="https://laravel.com/docs/5.5/pulse"> v5.5 </option> <option value="https://laravel.com/docs/5.4/pulse"> v5.4 </option> <option value="https://laravel.com/docs/5.3/pulse"> v5.3 </option> <option value="https://laravel.com/docs/5.2/pulse"> v5.2 </option> <option value="https://laravel.com/docs/5.1/pulse"> v5.1 </option> <option value="https://laravel.com/docs/5.0/pulse"> v5.0 </option> <option value="https://laravel.com/docs/4.2/pulse"> v4.2 </option> </select> <div class="hidden lg:block"> <div class="flex items-center size-8 group" x-data="themeSwitcher" x-on:switch-theme.window="saveAndUpdate($event.detail)"> <button id="header__sun" @click="toSystemMode" title="Switch to system theme" class="size-8 cursor-default flex items-center justify-center text-sand-light-12 group-hover:text-sand-light-10 dark:text-sand-dark-12 dark:group-hover:text-sand-dark-10 transition duration-100 focus:outline-none focus:shadow-outline"> <svg class="size-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.0002 3.29071V1.76746M5.8418 18.1585L4.7647 19.2356M12.0002 22.2326V20.7093M19.2357 4.76456L18.1586 5.84166M20.7095 12H22.2327M18.1586 18.1584L19.2357 19.2355M1.76758 12H3.29083M4.76462 4.7645L5.84173 5.8416M15.7123 8.2877C17.7626 10.338 17.7626 13.6621 15.7123 15.7123C13.6621 17.7626 10.338 17.7626 8.2877 15.7123C6.23745 13.6621 6.23745 10.338 8.2877 8.2877C10.338 6.23745 13.6621 6.23745 15.7123 8.2877Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="round"/> </svg> </button> <button id="header__moon" @click="toLightMode" title="Switch to light mode" class="size-8 cursor-default flex items-center justify-center text-sand-light-12 group-hover:text-sand-light-10 dark:text-sand-dark-12 dark:group-hover:text-sand-dark-10 transition duration-100 focus:outline-none focus:shadow-outline"> <svg class="size-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.2496 14.1987C19.5326 14.3951 18.7782 14.5 18 14.5C13.3056 14.5 9.5 10.6944 9.5 5.99999C9.5 5.22185 9.60487 4.4674 9.80124 3.75043C6.15452 4.72095 3.46777 8.04578 3.46777 11.9981C3.46777 16.7114 7.28864 20.5323 12.0019 20.5323C15.9543 20.5323 19.2791 17.8455 20.2496 14.1987ZM20.5196 12.5328C19.7378 12.8346 18.8882 13 18 13C14.134 13 11 9.86598 11 5.99999C11 5.11181 11.1654 4.26226 11.4671 3.48047C11.6142 3.09951 11.7935 2.73464 12.0019 2.38923C12.0888 2.24526 12.1807 2.10466 12.2774 1.9677C12.1858 1.96523 12.094 1.96399 12.0019 1.96399C11.4758 1.96399 10.9592 2.00448 10.455 2.0825C5.64774 2.8264 1.96777 6.98251 1.96777 11.9981C1.96777 17.5398 6.46021 22.0323 12.0019 22.0323C17.0176 22.0323 21.1737 18.3523 21.9176 13.545C21.9956 13.0408 22.0361 12.5242 22.0361 11.9981C22.0361 11.906 22.0348 11.8141 22.0323 11.7226C21.8953 11.8193 21.7547 11.9112 21.6107 11.9981C21.2653 12.2065 20.9005 12.3858 20.5196 12.5328Z" fill="currentColor"/> <path d="M16.3333 5.33333L17.5 3L18.6667 5.33333L21 6.5L18.6667 7.66667L17.5 10L16.3333 7.66667L14 6.5L16.3333 5.33333Z" fill="currentColor"/> </svg> </button> <button id="header__indeterminate" @click="toDarkMode" title="Switch to dark mode" class="size-8 cursor-default flex items-center justify-center text-sand-light-12 group-hover:text-sand-light-10 dark:text-sand-dark-12 dark:group-hover:text-sand-dark-10 transition duration-100 focus:outline-none focus:shadow-outline"> <svg class="size-6 dark:hidden" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 12C20.5 16.6944 16.6944 20.5 12 20.5V3.5C16.6944 3.5 20.5 7.30558 20.5 12ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="currentColor" /> </svg> <svg class="size-6 hidden dark:block" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 12C20.5 16.6944 16.6944 20.5 12 20.5V3.5C16.6944 3.5 20.5 7.30558 20.5 12ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="currentColor"/> </svg> </button> </div> </div> <button popovertarget="docs-nav-mobile" class="cursor-pointer ml-13 lg:hidden"> <svg class="w-6 h-6 text-sand-light-9 hamburger-menu" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M2.75 7.25H21.25M2.75 16.75H21.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" /> </svg> <svg class="w-6 h-6 text-sand-light-9 close-menu" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M4.75 4.75L19.25 19.25M19.25 4.75L4.75 19.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" /> </svg> </button> </div> </div> </nav> <div popover id="docs-nav-mobile" class="fixed w-full bg-transparent main-nav-popover top-(--popover-top-offset)"> <div class="px-5 py-8 h-[calc(100dvh-5.5rem)] relative overflow-auto border-b docs_sidebar bg-sand-light-1 dark:bg-sand-dark-1"> <div class="absolute top-5 right-8"> <div class="flex items-center size-8 group" x-data="themeSwitcher" x-on:switch-theme.window="saveAndUpdate($event.detail)"> <button id="header__sun" @click="toSystemMode" title="Switch to system theme" class="size-8 cursor-default flex items-center justify-center text-sand-light-12 group-hover:text-sand-light-10 dark:text-sand-dark-12 dark:group-hover:text-sand-dark-10 transition duration-100 focus:outline-none focus:shadow-outline"> <svg class="size-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.0002 3.29071V1.76746M5.8418 18.1585L4.7647 19.2356M12.0002 22.2326V20.7093M19.2357 4.76456L18.1586 5.84166M20.7095 12H22.2327M18.1586 18.1584L19.2357 19.2355M1.76758 12H3.29083M4.76462 4.7645L5.84173 5.8416M15.7123 8.2877C17.7626 10.338 17.7626 13.6621 15.7123 15.7123C13.6621 17.7626 10.338 17.7626 8.2877 15.7123C6.23745 13.6621 6.23745 10.338 8.2877 8.2877C10.338 6.23745 13.6621 6.23745 15.7123 8.2877Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="round"/> </svg> </button> <button id="header__moon" @click="toLightMode" title="Switch to light mode" class="size-8 cursor-default flex items-center justify-center text-sand-light-12 group-hover:text-sand-light-10 dark:text-sand-dark-12 dark:group-hover:text-sand-dark-10 transition duration-100 focus:outline-none focus:shadow-outline"> <svg class="size-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.2496 14.1987C19.5326 14.3951 18.7782 14.5 18 14.5C13.3056 14.5 9.5 10.6944 9.5 5.99999C9.5 5.22185 9.60487 4.4674 9.80124 3.75043C6.15452 4.72095 3.46777 8.04578 3.46777 11.9981C3.46777 16.7114 7.28864 20.5323 12.0019 20.5323C15.9543 20.5323 19.2791 17.8455 20.2496 14.1987ZM20.5196 12.5328C19.7378 12.8346 18.8882 13 18 13C14.134 13 11 9.86598 11 5.99999C11 5.11181 11.1654 4.26226 11.4671 3.48047C11.6142 3.09951 11.7935 2.73464 12.0019 2.38923C12.0888 2.24526 12.1807 2.10466 12.2774 1.9677C12.1858 1.96523 12.094 1.96399 12.0019 1.96399C11.4758 1.96399 10.9592 2.00448 10.455 2.0825C5.64774 2.8264 1.96777 6.98251 1.96777 11.9981C1.96777 17.5398 6.46021 22.0323 12.0019 22.0323C17.0176 22.0323 21.1737 18.3523 21.9176 13.545C21.9956 13.0408 22.0361 12.5242 22.0361 11.9981C22.0361 11.906 22.0348 11.8141 22.0323 11.7226C21.8953 11.8193 21.7547 11.9112 21.6107 11.9981C21.2653 12.2065 20.9005 12.3858 20.5196 12.5328Z" fill="currentColor"/> <path d="M16.3333 5.33333L17.5 3L18.6667 5.33333L21 6.5L18.6667 7.66667L17.5 10L16.3333 7.66667L14 6.5L16.3333 5.33333Z" fill="currentColor"/> </svg> </button> <button id="header__indeterminate" @click="toDarkMode" title="Switch to dark mode" class="size-8 cursor-default flex items-center justify-center text-sand-light-12 group-hover:text-sand-light-10 dark:text-sand-dark-12 dark:group-hover:text-sand-dark-10 transition duration-100 focus:outline-none focus:shadow-outline"> <svg class="size-6 dark:hidden" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 12C20.5 16.6944 16.6944 20.5 12 20.5V3.5C16.6944 3.5 20.5 7.30558 20.5 12ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="currentColor" /> </svg> <svg class="size-6 hidden dark:block" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 12C20.5 16.6944 16.6944 20.5 12 20.5V3.5C16.6944 3.5 20.5 7.30558 20.5 12ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="currentColor"/> </svg> </button> </div> </div> <ul> <li> <h2>Prologue</h2> <ul> <li><a href="/docs/12.x/releases">Release Notes</a></li> <li><a href="/docs/12.x/upgrade">Upgrade Guide</a></li> <li><a href="/docs/12.x/contributions">Contribution Guide</a></li> </ul> </li> <li> <h2>Getting Started</h2> <ul> <li><a href="/docs/12.x/installation">Installation</a></li> <li><a href="/docs/12.x/configuration">Configuration</a></li> <li><a href="/docs/12.x/structure">Directory Structure</a></li> <li><a href="/docs/12.x/frontend">Frontend</a></li> <li><a href="/docs/12.x/starter-kits">Starter Kits</a></li> <li><a href="/docs/12.x/deployment">Deployment</a></li> </ul> </li> <li> <h2>Architecture Concepts</h2> <ul> <li><a href="/docs/12.x/lifecycle">Request Lifecycle</a></li> <li><a href="/docs/12.x/container">Service Container</a></li> <li><a href="/docs/12.x/providers">Service Providers</a></li> <li><a href="/docs/12.x/facades">Facades</a></li> </ul> </li> <li> <h2>The Basics</h2> <ul> <li><a href="/docs/12.x/routing">Routing</a></li> <li><a href="/docs/12.x/middleware">Middleware</a></li> <li><a href="/docs/12.x/csrf">CSRF Protection</a></li> <li><a href="/docs/12.x/controllers">Controllers</a></li> <li><a href="/docs/12.x/requests">Requests</a></li> <li><a href="/docs/12.x/responses">Responses</a></li> <li><a href="/docs/12.x/views">Views</a></li> <li><a href="/docs/12.x/blade">Blade Templates</a></li> <li><a href="/docs/12.x/vite">Asset Bundling</a></li> <li><a href="/docs/12.x/urls">URL Generation</a></li> <li><a href="/docs/12.x/session">Session</a></li> <li><a href="/docs/12.x/validation">Validation</a></li> <li><a href="/docs/12.x/errors">Error Handling</a></li> <li><a href="/docs/12.x/logging">Logging</a></li> </ul> </li> <li> <h2>Digging Deeper</h2> <ul> <li><a href="/docs/12.x/artisan">Artisan Console</a></li> <li><a href="/docs/12.x/broadcasting">Broadcasting</a></li> <li><a href="/docs/12.x/cache">Cache</a></li> <li><a href="/docs/12.x/collections">Collections</a></li> <li><a href="/docs/12.x/concurrency">Concurrency</a></li> <li><a href="/docs/12.x/context">Context</a></li> <li><a href="/docs/12.x/contracts">Contracts</a></li> <li><a href="/docs/12.x/events">Events</a></li> <li><a href="/docs/12.x/filesystem">File Storage</a></li> <li><a href="/docs/12.x/helpers">Helpers</a></li> <li><a href="/docs/12.x/http-client">HTTP Client</a></li> <li><a href="/docs/12.x/localization">Localization</a></li> <li><a href="/docs/12.x/mail">Mail</a></li> <li><a href="/docs/12.x/notifications">Notifications</a></li> <li><a href="/docs/12.x/packages">Package Development</a></li> <li><a href="/docs/12.x/processes">Processes</a></li> <li><a href="/docs/12.x/queues">Queues</a></li> <li><a href="/docs/12.x/rate-limiting">Rate Limiting</a></li> <li><a href="/docs/12.x/strings">Strings</a></li> <li><a href="/docs/12.x/scheduling">Task Scheduling</a></li> </ul> </li> <li> <h2>Security</h2> <ul> <li><a href="/docs/12.x/authentication">Authentication</a></li> <li><a href="/docs/12.x/authorization">Authorization</a></li> <li><a href="/docs/12.x/verification">Email Verification</a></li> <li><a href="/docs/12.x/encryption">Encryption</a></li> <li><a href="/docs/12.x/hashing">Hashing</a></li> <li><a href="/docs/12.x/passwords">Password Reset</a></li> </ul> </li> <li> <h2>Database</h2> <ul> <li><a href="/docs/12.x/database">Getting Started</a></li> <li><a href="/docs/12.x/queries">Query Builder</a></li> <li><a href="/docs/12.x/pagination">Pagination</a></li> <li><a href="/docs/12.x/migrations">Migrations</a></li> <li><a href="/docs/12.x/seeding">Seeding</a></li> <li><a href="/docs/12.x/redis">Redis</a></li> <li><a href="/docs/12.x/mongodb">MongoDB</a></li> </ul> </li> <li> <h2>Eloquent ORM</h2> <ul> <li><a href="/docs/12.x/eloquent">Getting Started</a></li> <li><a href="/docs/12.x/eloquent-relationships">Relationships</a></li> <li><a href="/docs/12.x/eloquent-collections">Collections</a></li> <li><a href="/docs/12.x/eloquent-mutators">Mutators / Casts</a></li> <li><a href="/docs/12.x/eloquent-resources">API Resources</a></li> <li><a href="/docs/12.x/eloquent-serialization">Serialization</a></li> <li><a href="/docs/12.x/eloquent-factories">Factories</a></li> </ul> </li> <li> <h2>Testing</h2> <ul> <li><a href="/docs/12.x/testing">Getting Started</a></li> <li><a href="/docs/12.x/http-tests">HTTP Tests</a></li> <li><a href="/docs/12.x/console-tests">Console Tests</a></li> <li><a href="/docs/12.x/dusk">Browser Tests</a></li> <li><a href="/docs/12.x/database-testing">Database</a></li> <li><a href="/docs/12.x/mocking">Mocking</a></li> </ul> </li> <li class="sub--on"> <h2>Packages</h2> <ul> <li><a href="/docs/12.x/billing">Cashier (Stripe)</a></li> <li><a href="/docs/12.x/cashier-paddle">Cashier (Paddle)</a></li> <li><a href="/docs/12.x/dusk">Dusk</a></li> <li><a href="/docs/12.x/envoy">Envoy</a></li> <li><a href="/docs/12.x/fortify">Fortify</a></li> <li><a href="/docs/12.x/folio">Folio</a></li> <li><a href="/docs/12.x/homestead">Homestead</a></li> <li><a href="/docs/12.x/horizon">Horizon</a></li> <li><a href="/docs/12.x/mix">Mix</a></li> <li><a href="/docs/12.x/octane">Octane</a></li> <li><a href="/docs/12.x/passport">Passport</a></li> <li><a href="/docs/12.x/pennant">Pennant</a></li> <li><a href="/docs/12.x/pint">Pint</a></li> <li><a href="/docs/12.x/precognition">Precognition</a></li> <li><a href="/docs/12.x/prompts">Prompts</a></li> <li class="active"><a href="/docs/12.x/pulse">Pulse</a></li> <li><a href="/docs/12.x/reverb">Reverb</a></li> <li><a href="/docs/12.x/sail">Sail</a></li> <li><a href="/docs/12.x/sanctum">Sanctum</a></li> <li><a href="/docs/12.x/scout">Scout</a></li> <li><a href="/docs/12.x/socialite">Socialite</a></li> <li><a href="/docs/12.x/telescope">Telescope</a></li> <li><a href="/docs/12.x/valet">Valet</a></li> </ul> </li> <li><a href="https://api.laravel.com/docs/12.x">API Documentation</a></li> </ul> </div> </div> <div class="px-4 xl:px-16"> <a id="skip-to-content-link" href="#main-content" class="absolute bg-gray-100 px-4 py-2 top-3 left-3 text-gray-700 shadow-xl" > Skip to content </a> <div class="grid grid-cols-12 gap-4 lg:gap-6 xl:gap-x-10 px-6 mt-10 lg:px-0" id="docsScreen"> <aside class="relative col-span-3 lg:pb-6"> <div class="sticky bottom-0 left-0 z-20 hidden top-22 lg:block"> <div class="relative flex flex-col flex-1 max-h-screen pl-16 -ml-16 overflow-auto sticky-side-nav"> <nav id="indexed-nav" class="hidden lg:block"> <div class="docs_sidebar"> <ul> <li> <h2>Prologue</h2> <ul> <li><a href="/docs/12.x/releases">Release Notes</a></li> <li><a href="/docs/12.x/upgrade">Upgrade Guide</a></li> <li><a href="/docs/12.x/contributions">Contribution Guide</a></li> </ul> </li> <li> <h2>Getting Started</h2> <ul> <li><a href="/docs/12.x/installation">Installation</a></li> <li><a href="/docs/12.x/configuration">Configuration</a></li> <li><a href="/docs/12.x/structure">Directory Structure</a></li> <li><a href="/docs/12.x/frontend">Frontend</a></li> <li><a href="/docs/12.x/starter-kits">Starter Kits</a></li> <li><a href="/docs/12.x/deployment">Deployment</a></li> </ul> </li> <li> <h2>Architecture Concepts</h2> <ul> <li><a href="/docs/12.x/lifecycle">Request Lifecycle</a></li> <li><a href="/docs/12.x/container">Service Container</a></li> <li><a href="/docs/12.x/providers">Service Providers</a></li> <li><a href="/docs/12.x/facades">Facades</a></li> </ul> </li> <li> <h2>The Basics</h2> <ul> <li><a href="/docs/12.x/routing">Routing</a></li> <li><a href="/docs/12.x/middleware">Middleware</a></li> <li><a href="/docs/12.x/csrf">CSRF Protection</a></li> <li><a href="/docs/12.x/controllers">Controllers</a></li> <li><a href="/docs/12.x/requests">Requests</a></li> <li><a href="/docs/12.x/responses">Responses</a></li> <li><a href="/docs/12.x/views">Views</a></li> <li><a href="/docs/12.x/blade">Blade Templates</a></li> <li><a href="/docs/12.x/vite">Asset Bundling</a></li> <li><a href="/docs/12.x/urls">URL Generation</a></li> <li><a href="/docs/12.x/session">Session</a></li> <li><a href="/docs/12.x/validation">Validation</a></li> <li><a href="/docs/12.x/errors">Error Handling</a></li> <li><a href="/docs/12.x/logging">Logging</a></li> </ul> </li> <li> <h2>Digging Deeper</h2> <ul> <li><a href="/docs/12.x/artisan">Artisan Console</a></li> <li><a href="/docs/12.x/broadcasting">Broadcasting</a></li> <li><a href="/docs/12.x/cache">Cache</a></li> <li><a href="/docs/12.x/collections">Collections</a></li> <li><a href="/docs/12.x/concurrency">Concurrency</a></li> <li><a href="/docs/12.x/context">Context</a></li> <li><a href="/docs/12.x/contracts">Contracts</a></li> <li><a href="/docs/12.x/events">Events</a></li> <li><a href="/docs/12.x/filesystem">File Storage</a></li> <li><a href="/docs/12.x/helpers">Helpers</a></li> <li><a href="/docs/12.x/http-client">HTTP Client</a></li> <li><a href="/docs/12.x/localization">Localization</a></li> <li><a href="/docs/12.x/mail">Mail</a></li> <li><a href="/docs/12.x/notifications">Notifications</a></li> <li><a href="/docs/12.x/packages">Package Development</a></li> <li><a href="/docs/12.x/processes">Processes</a></li> <li><a href="/docs/12.x/queues">Queues</a></li> <li><a href="/docs/12.x/rate-limiting">Rate Limiting</a></li> <li><a href="/docs/12.x/strings">Strings</a></li> <li><a href="/docs/12.x/scheduling">Task Scheduling</a></li> </ul> </li> <li> <h2>Security</h2> <ul> <li><a href="/docs/12.x/authentication">Authentication</a></li> <li><a href="/docs/12.x/authorization">Authorization</a></li> <li><a href="/docs/12.x/verification">Email Verification</a></li> <li><a href="/docs/12.x/encryption">Encryption</a></li> <li><a href="/docs/12.x/hashing">Hashing</a></li> <li><a href="/docs/12.x/passwords">Password Reset</a></li> </ul> </li> <li> <h2>Database</h2> <ul> <li><a href="/docs/12.x/database">Getting Started</a></li> <li><a href="/docs/12.x/queries">Query Builder</a></li> <li><a href="/docs/12.x/pagination">Pagination</a></li> <li><a href="/docs/12.x/migrations">Migrations</a></li> <li><a href="/docs/12.x/seeding">Seeding</a></li> <li><a href="/docs/12.x/redis">Redis</a></li> <li><a href="/docs/12.x/mongodb">MongoDB</a></li> </ul> </li> <li> <h2>Eloquent ORM</h2> <ul> <li><a href="/docs/12.x/eloquent">Getting Started</a></li> <li><a href="/docs/12.x/eloquent-relationships">Relationships</a></li> <li><a href="/docs/12.x/eloquent-collections">Collections</a></li> <li><a href="/docs/12.x/eloquent-mutators">Mutators / Casts</a></li> <li><a href="/docs/12.x/eloquent-resources">API Resources</a></li> <li><a href="/docs/12.x/eloquent-serialization">Serialization</a></li> <li><a href="/docs/12.x/eloquent-factories">Factories</a></li> </ul> </li> <li> <h2>Testing</h2> <ul> <li><a href="/docs/12.x/testing">Getting Started</a></li> <li><a href="/docs/12.x/http-tests">HTTP Tests</a></li> <li><a href="/docs/12.x/console-tests">Console Tests</a></li> <li><a href="/docs/12.x/dusk">Browser Tests</a></li> <li><a href="/docs/12.x/database-testing">Database</a></li> <li><a href="/docs/12.x/mocking">Mocking</a></li> </ul> </li> <li class="sub--on"> <h2>Packages</h2> <ul> <li><a href="/docs/12.x/billing">Cashier (Stripe)</a></li> <li><a href="/docs/12.x/cashier-paddle">Cashier (Paddle)</a></li> <li><a href="/docs/12.x/dusk">Dusk</a></li> <li><a href="/docs/12.x/envoy">Envoy</a></li> <li><a href="/docs/12.x/fortify">Fortify</a></li> <li><a href="/docs/12.x/folio">Folio</a></li> <li><a href="/docs/12.x/homestead">Homestead</a></li> <li><a href="/docs/12.x/horizon">Horizon</a></li> <li><a href="/docs/12.x/mix">Mix</a></li> <li><a href="/docs/12.x/octane">Octane</a></li> <li><a href="/docs/12.x/passport">Passport</a></li> <li><a href="/docs/12.x/pennant">Pennant</a></li> <li><a href="/docs/12.x/pint">Pint</a></li> <li><a href="/docs/12.x/precognition">Precognition</a></li> <li><a href="/docs/12.x/prompts">Prompts</a></li> <li class="active"><a href="/docs/12.x/pulse">Pulse</a></li> <li><a href="/docs/12.x/reverb">Reverb</a></li> <li><a href="/docs/12.x/sail">Sail</a></li> <li><a href="/docs/12.x/sanctum">Sanctum</a></li> <li><a href="/docs/12.x/scout">Scout</a></li> <li><a href="/docs/12.x/socialite">Socialite</a></li> <li><a href="/docs/12.x/telescope">Telescope</a></li> <li><a href="/docs/12.x/valet">Valet</a></li> </ul> </li> <li><a href="https://api.laravel.com/docs/12.x">API Documentation</a></li> </ul> </div> </nav> </div> </div> </aside> <section class="col-span-12 lg:col-span-9 xl:col-span-6"> <div> <section> <section class="docs_main max-w-prose"> <div id="main-content"> <h1>Laravel Pulse</h1> <ul> <li><a href="#introduction">Introduction</a></li> <li><a href="#installation">Installation</a> <ul> <li><a href="#configuration">Configuration</a></li> </ul> </li> <li><a href="#dashboard">Dashboard</a> <ul> <li><a href="#dashboard-authorization">Authorization</a></li> <li><a href="#dashboard-customization">Customization</a></li> <li><a href="#dashboard-resolving-users">Resolving Users</a></li> <li><a href="#dashboard-cards">Cards</a></li> </ul> </li> <li><a href="#capturing-entries">Capturing Entries</a> <ul> <li><a href="#recorders">Recorders</a></li> <li><a href="#filtering">Filtering</a></li> </ul> </li> <li><a href="#performance">Performance</a> <ul> <li><a href="#using-a-different-database">Using a Different Database</a></li> <li><a href="#ingest">Redis Ingest</a></li> <li><a href="#sampling">Sampling</a></li> <li><a href="#trimming">Trimming</a></li> <li><a href="#pulse-exceptions">Handling Pulse Exceptions</a></li> </ul> </li> <li><a href="#custom-cards">Custom Cards</a> <ul> <li><a href="#custom-card-components">Card Components</a></li> <li><a href="#custom-card-styling">Styling</a></li> <li><a href="#custom-card-data">Data Capture and Aggregation</a></li> </ul> </li> </ul> <h2 id="introduction"><a href="#introduction">Introduction</a></h2> <p><a href="https://github.com/laravel/pulse">Laravel Pulse</a> delivers at-a-glance insights into your application's performance and usage. With Pulse, you can track down bottlenecks like slow jobs and endpoints, find your most active users, and more.</p> <p>For in-depth debugging of individual events, check out <a href="/docs/12.x/telescope">Laravel Telescope</a>.</p> <h2 id="installation"><a href="#installation">Installation</a></h2> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 rounded-xs flex items-center justify-center shrink-0 bg-[#F53003]"> <svg width="2" height="18" viewBox="0 0 2 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1 17V16.99M1 1V13" stroke="#FDFDFC" stroke-width="2" stroke-linecap="square"/> </svg> </div> <p class="callout"> Pulse's first-party storage implementation currently requires a MySQL, MariaDB, or PostgreSQL database. If you are using a different database engine, you will need a separate MySQL, MariaDB, or PostgreSQL database for your Pulse data.</p> </div> <p>You may install Pulse using the Composer package manager:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="shell" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">composer </span><span style="color: #BFC7D5;">require</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">laravel/pulse</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> composer require laravel/pulse</div></code></pre> </div> <p>Next, you should publish the Pulse configuration and migration files using the <code>vendor:publish</code> Artisan command:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="shell" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">php </span><span style="color: #BFC7D5;">artisan</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">vendor:publish</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">--provider=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">Laravel\Pulse\PulseServiceProvider</span><span style="color: #D9F5DD;">"</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> php artisan vendor:publish --provider="Laravel\Pulse\PulseServiceProvider"</div></code></pre> </div> <p>Finally, you should run the <code>migrate</code> command in order to create the tables needed to store Pulse's data:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="shell" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">php </span><span style="color: #BFC7D5;">artisan</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">migrate</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> php artisan migrate</div></code></pre> </div> <p>Once Pulse's database migrations have been run, you may access the Pulse dashboard via the <code>/pulse</code> route.</p> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 rounded-xs flex items-center justify-center shrink-0 bg-[#8D54C5]"> <svg width="16" height="21" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 20H11M5.5 14H10.5M15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 10.7924 2.63505 13.2029 5 14.3264V17H11V14.3264C13.3649 13.2029 15 10.7924 15 8Z" stroke="#FDFDFC" stroke-width="1.5" stroke-linecap="square"/> </svg> </div> <p class="callout"> If you do not want to store Pulse data in your application's primary database, you may <a href="#using-a-different-database">specify a dedicated database connection</a>.</p> </div> <h3 id="configuration"><a href="#configuration">Configuration</a></h3> <p>Many of Pulse's configuration options can be controlled using environment variables. To see the available options, register new recorders, or configure advanced options, you may publish the <code>config/pulse.php</code> configuration file:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="shell" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">php </span><span style="color: #BFC7D5;">artisan</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">vendor:publish</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">--tag=pulse-config</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> php artisan vendor:publish --tag=pulse-config</div></code></pre> </div> <h2 id="dashboard"><a href="#dashboard">Dashboard</a></h2> <h3 id="dashboard-authorization"><a href="#dashboard-authorization">Authorization</a></h3> <p>The Pulse dashboard may be accessed via the <code>/pulse</code> route. By default, you will only be able to access this dashboard in the <code>local</code> environment, so you will need to configure authorization for your production environments by customizing the <code>'viewPulse'</code> authorization gate. You can accomplish this within your application's <code>app/Providers/AppServiceProvider.php</code> file:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> App\Models\</span><span style="color: #FFCB8B;">User</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Support\Facades\</span><span style="color: #FFCB8B;">Gate</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #697098;"> * Bootstrap any application services.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">boot</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">void</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">Gate</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">define</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">viewPulse</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">User</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$user</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$user</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">isAdmin</span><span style="color: #BFC7D5;">();</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #BFC7D5;"> });</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> ...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">14</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> use App\Models\User; use Illuminate\Support\Facades\Gate; /** * Bootstrap any application services. */ public function boot(): void { Gate::define('viewPulse', function (User $user) { return $user->isAdmin(); }); // ... }</div></code></pre> </div> <h3 id="dashboard-customization"><a href="#dashboard-customization">Customization</a></h3> <p>The Pulse dashboard cards and layout may be configured by publishing the dashboard view. The dashboard view will be published to <code>resources/views/vendor/pulse/dashboard.blade.php</code>:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="shell" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">php </span><span style="color: #BFC7D5;">artisan</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">vendor:publish</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">--tag=pulse-dashboard</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> php artisan vendor:publish --tag=pulse-dashboard</div></code></pre> </div> <p>The dashboard is powered by <a href="https://livewire.laravel.com/">Livewire</a>, and allows you to customize the cards and layout without needing to rebuild any JavaScript assets.</p> <p>Within this file, the <code><x-pulse></code> component is responsible for rendering the dashboard and provides a grid layout for the cards. If you would like the dashboard to span the full width of the screen, you may provide the <code>full-width</code> prop to the component:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-pulse</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">full-width</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> ...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">x-pulse</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <x-pulse full-width> ... </x-pulse></div></code></pre> </div> <p>By default, the <code><x-pulse></code> component will create a 12 column grid, but you may customize this using the <code>cols</code> prop:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-pulse</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">cols</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">16</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> ...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">x-pulse</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <x-pulse cols="16"> ... </x-pulse></div></code></pre> </div> <p>Each card accepts a <code>cols</code> and <code>rows</code> prop to control the space and positioning:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FFFFFF;">livewire:pulse.usage</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">cols</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">4</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">rows</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">2</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;"> /></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <livewire:pulse.usage cols="4" rows="2" /></div></code></pre> </div> <p>Most cards also accept an <code>expand</code> prop to show the full card instead of scrolling:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FFFFFF;">livewire:pulse.slow-queries</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">expand</span><span style="color: #89DDFF;"> /></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <livewire:pulse.slow-queries expand /></div></code></pre> </div> <h3 id="dashboard-resolving-users"><a href="#dashboard-resolving-users">Resolving Users</a></h3> <p>For cards that display information about your users, such as the Application Usage card, Pulse will only record the user's ID. When rendering the dashboard, Pulse will resolve the <code>name</code> and <code>email</code> fields from your default <code>Authenticatable</code> model and display avatars using the Gravatar web service.</p> <p>You may customize the fields and avatar by invoking the <code>Pulse::user</code> method within your application's <code>App\Providers\AppServiceProvider</code> class.</p> <p>The <code>user</code> method accepts a closure which will receive the <code>Authenticatable</code> model to be displayed and should return an array containing <code>name</code>, <code>extra</code>, and <code>avatar</code> information for the user:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Laravel\Pulse\Facades\</span><span style="color: #FFCB8B;">Pulse</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #697098;"> * Bootstrap any application services.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">boot</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">void</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">Pulse</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">user</span><span style="color: #BFC7D5;">(</span><span style="color: #C792EA;">fn</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #BEC5D4;">$user</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> => [</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">name</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$user</span><span style="color: #89DDFF;">->name</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">extra</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$user</span><span style="color: #89DDFF;">->email</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">avatar</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$user</span><span style="color: #89DDFF;">->avatar_url</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span style="color: #BFC7D5;"> ]);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">14</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> ...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">15</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> use Laravel\Pulse\Facades\Pulse; /** * Bootstrap any application services. */ public function boot(): void { Pulse::user(fn ($user) => [ 'name' => $user->name, 'extra' => $user->email, 'avatar' => $user->avatar_url, ]); // ... }</div></code></pre> </div> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 rounded-xs flex items-center justify-center shrink-0 bg-[#8D54C5]"> <svg width="16" height="21" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 20H11M5.5 14H10.5M15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 10.7924 2.63505 13.2029 5 14.3264V17H11V14.3264C13.3649 13.2029 15 10.7924 15 8Z" stroke="#FDFDFC" stroke-width="1.5" stroke-linecap="square"/> </svg> </div> <p class="callout"> You may completely customize how the authenticated user is captured and retrieved by implementing the <code>Laravel\Pulse\Contracts\ResolvesUsers</code> contract and binding it in Laravel's <a href="/docs/12.x/container#binding-a-singleton">service container</a>.</p> </div> <h3 id="dashboard-cards"><a href="#dashboard-cards">Cards</a></h3> <h4 id="servers-card"><a href="#servers-card">Servers</a></h4> <p>The <code><livewire:pulse.servers /></code> card displays system resource usage for all servers running the <code>pulse:check</code> command. Please refer to the documentation regarding the <a href="#servers-recorder">servers recorder</a> for more information on system resource reporting.</p> <p>If you replace a server in your infrastructure, you may wish to stop displaying the inactive server in the Pulse dashboard after a given duration. You may accomplish this using the <code>ignore-after</code> prop, which accepts the number of seconds after which inactive servers should be removed from the Pulse dashboard. Alternatively, you may provide a relative time formatted string, such as <code>1 hour</code> or <code>3 days and 1 hour</code>:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FFFFFF;">livewire:pulse.servers</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">ignore-after</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">3 hours</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;"> /></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <livewire:pulse.servers ignore-after="3 hours" /></div></code></pre> </div> <h4 id="application-usage-card"><a href="#application-usage-card">Application Usage</a></h4> <p>The <code><livewire:pulse.usage /></code> card displays the top 10 users making requests to your application, dispatching jobs, and experiencing slow requests.</p> <p>If you wish to view all usage metrics on screen at the same time, you may include the card multiple times and specify the <code>type</code> attribute:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FFFFFF;">livewire:pulse.usage</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">type</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">requests</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;"> /></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #89DDFF;"><</span><span style="color: #FFFFFF;">livewire:pulse.usage</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">type</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">slow_requests</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;"> /></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"><</span><span style="color: #FFFFFF;">livewire:pulse.usage</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">type</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">jobs</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;"> /></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <livewire:pulse.usage type="requests" /> <livewire:pulse.usage type="slow_requests" /> <livewire:pulse.usage type="jobs" /></div></code></pre> </div> <p>To learn how to customize how Pulse retrieves and displays user information, consult our documentation on <a href="#dashboard-resolving-users">resolving users</a>.</p> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 rounded-xs flex items-center justify-center shrink-0 bg-[#8D54C5]"> <svg width="16" height="21" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 20H11M5.5 14H10.5M15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 10.7924 2.63505 13.2029 5 14.3264V17H11V14.3264C13.3649 13.2029 15 10.7924 15 8Z" stroke="#FDFDFC" stroke-width="1.5" stroke-linecap="square"/> </svg> </div> <p class="callout"> If your application receives a lot of requests or dispatches a lot of jobs, you may wish to enable <a href="#sampling">sampling</a>. See the <a href="#user-requests-recorder">user requests recorder</a>, <a href="#user-jobs-recorder">user jobs recorder</a>, and <a href="#slow-jobs-recorder">slow jobs recorder</a> documentation for more information.</p> </div> <h4 id="exceptions-card"><a href="#exceptions-card">Exceptions</a></h4> <p>The <code><livewire:pulse.exceptions /></code> card shows the frequency and recency of exceptions occurring in your application. By default, exceptions are grouped based on the exception class and location where it occurred. See the <a href="#exceptions-recorder">exceptions recorder</a> documentation for more information.</p> <h4 id="queues-card"><a href="#queues-card">Queues</a></h4> <p>The <code><livewire:pulse.queues /></code> card shows the throughput of the queues in your application, including the number of jobs queued, processing, processed, released, and failed. See the <a href="#queues-recorder">queues recorder</a> documentation for more information.</p> <h4 id="slow-requests-card"><a href="#slow-requests-card">Slow Requests</a></h4> <p>The <code><livewire:pulse.slow-requests /></code> card shows incoming requests to your application that exceed the configured threshold, which is 1,000ms by default. See the <a href="#slow-requests-recorder">slow requests recorder</a> documentation for more information.</p> <h4 id="slow-jobs-card"><a href="#slow-jobs-card">Slow Jobs</a></h4> <p>The <code><livewire:pulse.slow-jobs /></code> card shows the queued jobs in your application that exceed the configured threshold, which is 1,000ms by default. See the <a href="#slow-jobs-recorder">slow jobs recorder</a> documentation for more information.</p> <h4 id="slow-queries-card"><a href="#slow-queries-card">Slow Queries</a></h4> <p>The <code><livewire:pulse.slow-queries /></code> card shows the database queries in your application that exceed the configured threshold, which is 1,000ms by default.</p> <p>By default, slow queries are grouped based on the SQL query (without bindings) and the location where it occurred, but you may choose to not capture the location if you wish to group solely on the SQL query.</p> <p>If you encounter rendering performance issues due to extremely large SQL queries receiving syntax highlighting, you may disable highlighting by adding the <code>without-highlighting</code> prop:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FFFFFF;">livewire:pulse.slow-queries</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">without-highlighting</span><span style="color: #89DDFF;"> /></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <livewire:pulse.slow-queries without-highlighting /></div></code></pre> </div> <p>See the <a href="#slow-queries-recorder">slow queries recorder</a> documentation for more information.</p> <h4 id="slow-outgoing-requests-card"><a href="#slow-outgoing-requests-card">Slow Outgoing Requests</a></h4> <p>The <code><livewire:pulse.slow-outgoing-requests /></code> card shows outgoing requests made using Laravel's <a href="/docs/12.x/http-client">HTTP client</a> that exceed the configured threshold, which is 1,000ms by default.</p> <p>By default, entries will be grouped by the full URL. However, you may wish to normalize or group similar outgoing requests using regular expressions. See the <a href="#slow-outgoing-requests-recorder">slow outgoing requests recorder</a> documentation for more information.</p> <h4 id="cache-card"><a href="#cache-card">Cache</a></h4> <p>The <code><livewire:pulse.cache /></code> card shows the cache hit and miss statistics for your application, both globally and for individual keys.</p> <p>By default, entries will be grouped by key. However, you may wish to normalize or group similar keys using regular expressions. See the <a href="#cache-interactions-recorder">cache interactions recorder</a> documentation for more information.</p> <h2 id="capturing-entries"><a href="#capturing-entries">Capturing Entries</a></h2> <p>Most Pulse recorders will automatically capture entries based on framework events dispatched by Laravel. However, the <a href="#servers-recorder">servers recorder</a> and some third-party cards must poll for information regularly. To use these cards, you must run the <code>pulse:check</code> daemon on all of your individual application servers:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #82AAFF;">php</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">artisan</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">pulse</span><span style="color: #BFC7D5;">:</span><span style="color: #82AAFF;">check</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> php artisan pulse:check</div></code></pre> </div> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 rounded-xs flex items-center justify-center shrink-0 bg-[#8D54C5]"> <svg width="16" height="21" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 20H11M5.5 14H10.5M15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 10.7924 2.63505 13.2029 5 14.3264V17H11V14.3264C13.3649 13.2029 15 10.7924 15 8Z" stroke="#FDFDFC" stroke-width="1.5" stroke-linecap="square"/> </svg> </div> <p class="callout"> To keep the <code>pulse:check</code> process running permanently in the background, you should use a process monitor such as Supervisor to ensure that the command does not stop running.</p> </div> <p>As the <code>pulse:check</code> command is a long-lived process, it will not see changes to your codebase without being restarted. You should gracefully restart the command by calling the <code>pulse:restart</code> command during your application's deployment process:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="shell" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">php </span><span style="color: #BFC7D5;">artisan</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">pulse:restart</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> php artisan pulse:restart</div></code></pre> </div> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 rounded-xs flex items-center justify-center shrink-0 bg-[#8D54C5]"> <svg width="16" height="21" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 20H11M5.5 14H10.5M15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 10.7924 2.63505 13.2029 5 14.3264V17H11V14.3264C13.3649 13.2029 15 10.7924 15 8Z" stroke="#FDFDFC" stroke-width="1.5" stroke-linecap="square"/> </svg> </div> <p class="callout"> Pulse uses the <a href="/docs/12.x/cache">cache</a> to store restart signals, so you should verify that a cache driver is properly configured for your application before using this feature.</p> </div> <h3 id="recorders"><a href="#recorders">Recorders</a></h3> <p>Recorders are responsible for capturing entries from your application to be recorded in the Pulse database. Recorders are registered and configured in the <code>recorders</code> section of the <a href="#configuration">Pulse configuration file</a>.</p> <h4 id="cache-interactions-recorder"><a href="#cache-interactions-recorder">Cache Interactions</a></h4> <p>The <code>CacheInteractions</code> recorder captures information about the <a href="/docs/12.x/cache">cache</a> hits and misses occurring in your application for display on the <a href="#cache-card">Cache</a> card.</p> <p>You may optionally adjust the <a href="#sampling">sample rate</a> and ignored key patterns.</p> <p>You may also configure key grouping so that similar keys are grouped as a single entry. For example, you may wish to remove unique IDs from keys caching the same type of information. Groups are configured using a regular expression to "find and replace" parts of the key. An example is included in the configuration file:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">Recorders\</span><span style="color: #FFCB8B;">CacheInteractions</span><span style="color: #89DDFF;">::</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> [</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> ...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">groups</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> [</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> '/:\d+/' => ':*',</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;"> ],</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;">],</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> Recorders\CacheInteractions::class => [ // ... 'groups' => [ // '/:\d+/' => ':*', ], ],</div></code></pre> </div> <p>The first pattern that matches will be used. If no patterns match, then the key will be captured as-is.</p> <h4 id="exceptions-recorder"><a href="#exceptions-recorder">Exceptions</a></h4> <p>The <code>Exceptions</code> recorder captures information about reportable exceptions occurring in your application for display on the <a href="#exceptions-card">Exceptions</a> card.</p> <p>You may optionally adjust the <a href="#sampling">sample rate</a> and ignored exceptions patterns. You may also configure whether to capture the location that the exception originated from. The captured location will be displayed on the Pulse dashboard which can help to track down the exception origin; however, if the same exception occurs in multiple locations then it will appear multiple times for each unique location.</p> <h4 id="queues-recorder"><a href="#queues-recorder">Queues</a></h4> <p>The <code>Queues</code> recorder captures information about your applications queues for display on the <a href="#queues-card">Queues</a>.</p> <p>You may optionally adjust the <a href="#sampling">sample rate</a> and ignored jobs patterns.</p> <h4 id="slow-jobs-recorder"><a href="#slow-jobs-recorder">Slow Jobs</a></h4> <p>The <code>SlowJobs</code> recorder captures information about slow jobs occurring in your application for display on the <a href="#slow-jobs-recorder">Slow Jobs</a> card.</p> <p>You may optionally adjust the slow job threshold, <a href="#sampling">sample rate</a>, and ignored job patterns.</p> <p>You may have some jobs that you expect to take longer than others. In those cases, you may configure per-job thresholds:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">Recorders\</span><span style="color: #FFCB8B;">SlowJobs</span><span style="color: #89DDFF;">::</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> [</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> ...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">threshold</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> [</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">#^App</span><span style="color: #F78C6C;">\\</span><span style="color: #C3E88D;">Jobs</span><span style="color: #F78C6C;">\\</span><span style="color: #C3E88D;">GenerateYearlyReports$#</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #F78C6C;">5000</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">default</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">env</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">PULSE_SLOW_JOBS_THRESHOLD</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span><span style="color: #82AAFF;"> </span><span style="color: #F78C6C;">1000</span><span style="color: #BFC7D5;">),</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> ],</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #BFC7D5;">],</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> Recorders\SlowJobs::class => [ // ... 'threshold' => [ '#^App\\Jobs\\GenerateYearlyReports$#' => 5000, 'default' => env('PULSE_SLOW_JOBS_THRESHOLD', 1000), ], ],</div></code></pre> </div> <p>If no regular expression patterns match the job's classname, then the <code>'default'</code> value will be used.</p> <h4 id="slow-outgoing-requests-recorder"><a href="#slow-outgoing-requests-recorder">Slow Outgoing Requests</a></h4> <p>The <code>SlowOutgoingRequests</code> recorder captures information about outgoing HTTP requests made using Laravel's <a href="/docs/12.x/http-client">HTTP client</a> that exceed the configured threshold for display on the <a href="#slow-outgoing-requests-card">Slow Outgoing Requests</a> card.</p> <p>You may optionally adjust the slow outgoing request threshold, <a href="#sampling">sample rate</a>, and ignored URL patterns.</p> <p>You may have some outgoing requests that you expect to take longer than others. In those cases, you may configure per-request thresholds:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">Recorders\</span><span style="color: #FFCB8B;">SlowOutgoingRequests</span><span style="color: #89DDFF;">::</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> [</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> ...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">threshold</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> [</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">#backup.zip$#</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #F78C6C;">5000</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">default</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">env</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">PULSE_SLOW_OUTGOING_REQUESTS_THRESHOLD</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span><span style="color: #82AAFF;"> </span><span style="color: #F78C6C;">1000</span><span style="color: #BFC7D5;">),</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> ],</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #BFC7D5;">],</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> Recorders\SlowOutgoingRequests::class => [ // ... 'threshold' => [ '#backup.zip$#' => 5000, 'default' => env('PULSE_SLOW_OUTGOING_REQUESTS_THRESHOLD', 1000), ], ],</div></code></pre> </div> <p>If no regular expression patterns match the request's URL, then the <code>'default'</code> value will be used.</p> <p>You may also configure URL grouping so that similar URLs are grouped as a single entry. For example, you may wish to remove unique IDs from URL paths or group by domain only. Groups are configured using a regular expression to "find and replace" parts of the URL. Some examples are included in the configuration file:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">Recorders\</span><span style="color: #FFCB8B;">SlowOutgoingRequests</span><span style="color: #89DDFF;">::</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> [</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> ...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">groups</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> [</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> '#^https://api\.github\.com/repos/.*$#' => 'api.github.com/repos/*',</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> '#^https?://([^/]*).*$#' => '\1',</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> '#/\d+#' => '/*',</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #BFC7D5;"> ],</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">8</span><span style="color: #BFC7D5;">],</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> Recorders\SlowOutgoingRequests::class => [ // ... 'groups' => [ // '#^https://api\.github\.com/repos/.*$#' => 'api.github.com/repos/*', // '#^https?://([^/]*).*$#' => '\1', // '#/\d+#' => '/*', ], ],</div></code></pre> </div> <p>The first pattern that matches will be used. If no patterns match, then the URL will be captured as-is.</p> <h4 id="slow-queries-recorder"><a href="#slow-queries-recorder">Slow Queries</a></h4> <p>The <code>SlowQueries</code> recorder captures any database queries in your application that exceed the configured threshold for display on the <a href="#slow-queries-card">Slow Queries</a> card.</p> <p>You may optionally adjust the slow query threshold, <a href="#sampling">sample rate</a>, and ignored query patterns. You may also configure whether to capture the query location. The captured location will be displayed on the Pulse dashboard which can help to track down the query origin; however, if the same query is made in multiple locations then it will appear multiple times for each unique location.</p> <p>You may have some queries that you expect to take longer than others. In those cases, you may configure per-query thresholds:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">Recorders\</span><span style="color: #FFCB8B;">SlowQueries</span><span style="color: #89DDFF;">::</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> [</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> ...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">threshold</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> [</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">#^insert into `yearly_reports`#</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #F78C6C;">5000</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">default</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">env</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">PULSE_SLOW_QUERIES_THRESHOLD</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span><span style="color: #82AAFF;"> </span><span style="color: #F78C6C;">1000</span><span style="color: #BFC7D5;">),</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> ],</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #BFC7D5;">],</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> Recorders\SlowQueries::class => [ // ... 'threshold' => [ '#^insert into `yearly_reports`#' => 5000, 'default' => env('PULSE_SLOW_QUERIES_THRESHOLD', 1000), ], ],</div></code></pre> </div> <p>If no regular expression patterns match the query's SQL, then the <code>'default'</code> value will be used.</p> <h4 id="slow-requests-recorder"><a href="#slow-requests-recorder">Slow Requests</a></h4> <p>The <code>Requests</code> recorder captures information about requests made to your application for display on the <a href="#slow-requests-card">Slow Requests</a> and <a href="#application-usage-card">Application Usage</a> cards.</p> <p>You may optionally adjust the slow route threshold, <a href="#sampling">sample rate</a>, and ignored paths.</p> <p>You may have some requests that you expect to take longer than others. In those cases, you may configure per-request thresholds:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">Recorders\</span><span style="color: #FFCB8B;">SlowRequests</span><span style="color: #89DDFF;">::</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> [</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> ...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">threshold</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> [</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">#^/admin/#</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #F78C6C;">5000</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">default</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">env</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">PULSE_SLOW_REQUESTS_THRESHOLD</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span><span style="color: #82AAFF;"> </span><span style="color: #F78C6C;">1000</span><span style="color: #BFC7D5;">),</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> ],</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #BFC7D5;">],</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> Recorders\SlowRequests::class => [ // ... 'threshold' => [ '#^/admin/#' => 5000, 'default' => env('PULSE_SLOW_REQUESTS_THRESHOLD', 1000), ], ],</div></code></pre> </div> <p>If no regular expression patterns match the request's URL, then the <code>'default'</code> value will be used.</p> <h4 id="servers-recorder"><a href="#servers-recorder">Servers</a></h4> <p>The <code>Servers</code> recorder captures CPU, memory, and storage usage of the servers that power your application for display on the <a href="#servers-card">Servers</a> card. This recorder requires the <a href="#capturing-entries"><code>pulse:check</code> command</a> to be running on each of the servers you wish to monitor.</p> <p>Each reporting server must have a unique name. By default, Pulse will use the value returned by PHP's <code>gethostname</code> function. If you wish to customize this, you may set the <code>PULSE_SERVER_NAME</code> environment variable:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="env" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #FFCB6B;">PULSE_SERVER_NAME</span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;">load-balancer</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> PULSE_SERVER_NAME=load-balancer</div></code></pre> </div> <p>The Pulse configuration file also allows you to customize the directories that are monitored.</p> <h4 id="user-jobs-recorder"><a href="#user-jobs-recorder">User Jobs</a></h4> <p>The <code>UserJobs</code> recorder captures information about the users dispatching jobs in your application for display on the <a href="#application-usage-card">Application Usage</a> card.</p> <p>You may optionally adjust the <a href="#sampling">sample rate</a> and ignored job patterns.</p> <h4 id="user-requests-recorder"><a href="#user-requests-recorder">User Requests</a></h4> <p>The <code>UserRequests</code> recorder captures information about the users making requests to your application for display on the <a href="#application-usage-card">Application Usage</a> card.</p> <p>You may optionally adjust the <a href="#sampling">sample rate</a> and ignored URL patterns.</p> <h3 id="filtering"><a href="#filtering">Filtering</a></h3> <p>As we have seen, many <a href="#recorders">recorders</a> offer the ability to, via configuration, "ignore" incoming entries based on their value, such as a request's URL. But, sometimes it may be useful to filter out records based on other factors, such as the currently authenticated user. To filter out these records, you may pass a closure to Pulse's <code>filter</code> method. Typically, the <code>filter</code> method should be invoked within the <code>boot</code> method of your application's <code>AppServiceProvider</code>:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Support\Facades\</span><span style="color: #FFCB8B;">Auth</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Laravel\Pulse\</span><span style="color: #FFCB8B;">Entry</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Laravel\Pulse\Facades\</span><span style="color: #FFCB8B;">Pulse</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Laravel\Pulse\</span><span style="color: #FFCB8B;">Value</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #697098;"> * Bootstrap any application services.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">boot</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">void</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">Pulse</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">filter</span><span style="color: #BFC7D5;">(</span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">Entry</span><span style="color: #BFC7D5;">|</span><span style="color: #FFCB8B;">Value</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$entry</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">Auth</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">user</span><span style="color: #BFC7D5;">()</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">isNotAdmin</span><span style="color: #BFC7D5;">();</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span style="color: #BFC7D5;"> });</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">14</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">15</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> ...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">16</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> use Illuminate\Support\Facades\Auth; use Laravel\Pulse\Entry; use Laravel\Pulse\Facades\Pulse; use Laravel\Pulse\Value; /** * Bootstrap any application services. */ public function boot(): void { Pulse::filter(function (Entry|Value $entry) { return Auth::user()->isNotAdmin(); }); // ... }</div></code></pre> </div> <h2 id="performance"><a href="#performance">Performance</a></h2> <p>Pulse has been designed to drop into an existing application without requiring any additional infrastructure. However, for high-traffic applications, there are several ways of removing any impact Pulse may have on your application's performance.</p> <h3 id="using-a-different-database"><a href="#using-a-different-database">Using a Different Database</a></h3> <p>For high-traffic applications, you may prefer to use a dedicated database connection for Pulse to avoid impacting your application database.</p> <p>You may customize the <a href="/docs/12.x/database#configuration">database connection</a> used by Pulse by setting the <code>PULSE_DB_CONNECTION</code> environment variable.</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="env" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #FFCB6B;">PULSE_DB_CONNECTION</span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;">pulse</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> PULSE_DB_CONNECTION=pulse</div></code></pre> </div> <h3 id="ingest"><a href="#ingest">Redis Ingest</a></h3> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 rounded-xs flex items-center justify-center shrink-0 bg-[#F53003]"> <svg width="2" height="18" viewBox="0 0 2 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1 17V16.99M1 1V13" stroke="#FDFDFC" stroke-width="2" stroke-linecap="square"/> </svg> </div> <p class="callout"> The Redis Ingest requires Redis 6.2 or greater and <code>phpredis</code> or <code>predis</code> as the application's configured Redis client driver.</p> </div> <p>By default, Pulse will store entries directly to the <a href="#using-a-different-database">configured database connection</a> after the HTTP response has been sent to the client or a job has been processed; however, you may use Pulse's Redis ingest driver to send entries to a Redis stream instead. This can be enabled by configuring the <code>PULSE_INGEST_DRIVER</code> environment variable:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="ini" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">PULSE_INGEST_DRIVER</span><span style="color: #BFC7D5;">=redis</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> PULSE_INGEST_DRIVER=redis</div></code></pre> </div> <p>Pulse will use your default <a href="/docs/12.x/redis#configuration">Redis connection</a> by default, but you may customize this via the <code>PULSE_REDIS_CONNECTION</code> environment variable:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="ini" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">PULSE_REDIS_CONNECTION</span><span style="color: #BFC7D5;">=pulse</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> PULSE_REDIS_CONNECTION=pulse</div></code></pre> </div> <p>When using the Redis ingest, you will need to run the <code>pulse:work</code> command to monitor the stream and move entries from Redis into Pulse's database tables.</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #82AAFF;">php</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">artisan</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">pulse</span><span style="color: #BFC7D5;">:</span><span style="color: #82AAFF;">work</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> php artisan pulse:work</div></code></pre> </div> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 rounded-xs flex items-center justify-center shrink-0 bg-[#8D54C5]"> <svg width="16" height="21" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 20H11M5.5 14H10.5M15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 10.7924 2.63505 13.2029 5 14.3264V17H11V14.3264C13.3649 13.2029 15 10.7924 15 8Z" stroke="#FDFDFC" stroke-width="1.5" stroke-linecap="square"/> </svg> </div> <p class="callout"> To keep the <code>pulse:work</code> process running permanently in the background, you should use a process monitor such as Supervisor to ensure that the Pulse worker does not stop running.</p> </div> <p>As the <code>pulse:work</code> command is a long-lived process, it will not see changes to your codebase without being restarted. You should gracefully restart the command by calling the <code>pulse:restart</code> command during your application's deployment process:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="shell" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">php </span><span style="color: #BFC7D5;">artisan</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">pulse:restart</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> php artisan pulse:restart</div></code></pre> </div> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 rounded-xs flex items-center justify-center shrink-0 bg-[#8D54C5]"> <svg width="16" height="21" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 20H11M5.5 14H10.5M15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 10.7924 2.63505 13.2029 5 14.3264V17H11V14.3264C13.3649 13.2029 15 10.7924 15 8Z" stroke="#FDFDFC" stroke-width="1.5" stroke-linecap="square"/> </svg> </div> <p class="callout"> Pulse uses the <a href="/docs/12.x/cache">cache</a> to store restart signals, so you should verify that a cache driver is properly configured for your application before using this feature.</p> </div> <h3 id="sampling"><a href="#sampling">Sampling</a></h3> <p>By default, Pulse will capture every relevant event that occurs in your application. For high-traffic applications, this can result in needing to aggregate millions of database rows in the dashboard, especially for longer time periods.</p> <p>You may instead choose to enable "sampling" on certain Pulse data recorders. For example, setting the sample rate to <code>0.1</code> on the <a href="#user-requests-recorder"><code>User Requests</code></a> recorder will mean that you only record approximately 10% of the requests to your application. In the dashboard, the values will be scaled up and prefixed with a <code>~</code> to indicate that they are an approximation.</p> <p>In general, the more entries you have for a particular metric, the lower you can safely set the sample rate without sacrificing too much accuracy.</p> <h3 id="trimming"><a href="#trimming">Trimming</a></h3> <p>Pulse will automatically trim its stored entries once they are outside of the dashboard window. Trimming occurs when ingesting data using a lottery system which may be customized in the Pulse <a href="#configuration">configuration file</a>.</p> <h3 id="pulse-exceptions"><a href="#pulse-exceptions">Handling Pulse Exceptions</a></h3> <p>If an exception occurs while capturing Pulse data, such as being unable to connect to the storage database, Pulse will silently fail to avoid impacting your application.</p> <p>If you wish to customize how these exceptions are handled, you may provide a closure to the <code>handleExceptionsUsing</code> method:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Laravel\Pulse\Facades\</span><span style="color: #FFCB8B;">Pulse</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Support\Facades\</span><span style="color: #FFCB8B;">Log</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #FFCB8B;">Pulse</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">handleExceptionsUsing</span><span style="color: #BFC7D5;">(</span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #BEC5D4;">$e</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">Log</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">debug</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">An exception happened in Pulse</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, [</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">message</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$e</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">getMessage</span><span style="color: #BFC7D5;">(),</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">stack</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$e</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">getTraceAsString</span><span style="color: #BFC7D5;">(),</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">8</span><span style="color: #BFC7D5;"> ]);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">9</span><span style="color: #BFC7D5;">});</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> use Laravel\Pulse\Facades\Pulse; use Illuminate\Support\Facades\Log; Pulse::handleExceptionsUsing(function ($e) { Log::debug('An exception happened in Pulse', [ 'message' => $e->getMessage(), 'stack' => $e->getTraceAsString(), ]); });</div></code></pre> </div> <h2 id="custom-cards"><a href="#custom-cards">Custom Cards</a></h2> <p>Pulse allows you to build custom cards to display data relevant to your application's specific needs. Pulse uses <a href="https://livewire.laravel.com">Livewire</a>, so you may want to <a href="https://livewire.laravel.com/docs">review its documentation</a> before building your first custom card.</p> <h3 id="custom-card-components"><a href="#custom-card-components">Card Components</a></h3> <p>Creating a custom card in Laravel Pulse starts with extending the base <code>Card</code> Livewire component and defining a corresponding view:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #C792EA;">namespace</span><span style="color: #BFC7D5;"> App\Livewire\Pulse;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Laravel\Pulse\Livewire\</span><span style="color: #FFCB8B;">Card</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Livewire\Attributes\</span><span style="color: #FFCB8B;">Lazy</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #BFC7D5;">#[Lazy]</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB6B;">TopSellers</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">extends</span><span style="color: #BFC7D5;"> </span><span style="color: #A9C77D;">Card</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">render</span><span style="color: #D9F5DD;">()</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">view</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">livewire.pulse.top-sellers</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span style="color: #BFC7D5;"> }</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> namespace App\Livewire\Pulse; use Laravel\Pulse\Livewire\Card; use Livewire\Attributes\Lazy; #[Lazy] class TopSellers extends Card { public function render() { return view('livewire.pulse.top-sellers'); } }</div></code></pre> </div> <p>When using Livewire's <a href="https://livewire.laravel.com/docs/lazy">lazy loading</a> feature, The <code>Card</code> component will automatically provide a placeholder that respects the <code>cols</code> and <code>rows</code> attributes passed to your component.</p> <p>When writing your Pulse card's corresponding view, you may leverage Pulse's Blade components for a consistent look and feel:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #89DDFF;"><</span><span style="color: #FFFFFF;">x-pulse::card</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">:cols</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">$cols</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">:rows</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">$rows</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">:class</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">$class</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">wire:poll.5s</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">""</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FFFFFF;">x-pulse::card-header</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">name</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">Top Sellers</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FFFFFF;">x-slot:icon</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #BFC7D5;"> ...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"></</span><span style="color: #FFFFFF;">x-slot:icon</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"></</span><span style="color: #FFFFFF;">x-pulse::card-header</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FFFFFF;">x-pulse::scroll</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">:expand</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">$expand</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;"> ...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"></</span><span style="color: #FFFFFF;">x-pulse::scroll</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #89DDFF;"></</span><span style="color: #FFFFFF;">x-pulse::card</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <x-pulse::card :cols="$cols" :rows="$rows" :class="$class" wire:poll.5s=""> <x-pulse::card-header name="Top Sellers"> <x-slot:icon> ... </x-slot:icon> </x-pulse::card-header> <x-pulse::scroll :expand="$expand"> ... </x-pulse::scroll> </x-pulse::card></div></code></pre> </div> <p>The <code>$cols</code>, <code>$rows</code>, <code>$class</code>, and <code>$expand</code> variables should be passed to their respective Blade components so the card layout may be customized from the dashboard view. You may also wish to include the <code>wire:poll.5s=""</code> attribute in your view to have the card automatically update.</p> <p>Once you have defined your Livewire component and template, the card may be included in your <a href="#dashboard-customization">dashboard view</a>:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-pulse</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> ...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FFFFFF;">livewire:pulse.top-sellers</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">cols</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">4</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;"> /></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">x-pulse</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <x-pulse> ... <livewire:pulse.top-sellers cols="4" /> </x-pulse></div></code></pre> </div> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 rounded-xs flex items-center justify-center shrink-0 bg-[#8D54C5]"> <svg width="16" height="21" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 20H11M5.5 14H10.5M15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 10.7924 2.63505 13.2029 5 14.3264V17H11V14.3264C13.3649 13.2029 15 10.7924 15 8Z" stroke="#FDFDFC" stroke-width="1.5" stroke-linecap="square"/> </svg> </div> <p class="callout"> If your card is included in a package, you will need to register the component with Livewire using the <code>Livewire::component</code> method.</p> </div> <h3 id="custom-card-styling"><a href="#custom-card-styling">Styling</a></h3> <p>If your card requires additional styling beyond the classes and components included with Pulse, there are a few options for including custom CSS for your cards.</p> <h4 id="custom-card-styling-vite"><a href="#custom-card-styling-vite">Laravel Vite Integration</a></h4> <p>If your custom card lives within your application's code base and you are using Laravel's <a href="/docs/12.x/vite">Vite integration</a>, you may update your <code>vite.config.js</code> file to include a dedicated CSS entry point for your card:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="js" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #82AAFF;">laravel</span><span style="color: #BFC7D5;">({</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> input: [</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">resources/css/pulse/top-sellers.css</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> ...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;"> ],</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;">}),</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> laravel({ input: [ 'resources/css/pulse/top-sellers.css', // ... ], }),</div></code></pre> </div> <p>You may then use the <code>@vite</code> Blade directive in your <a href="#dashboard-customization">dashboard view</a>, specifying the CSS entrypoint for your card:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-pulse</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">@vite</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">resources/css/pulse/top-sellers.css</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> ...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">x-pulse</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <x-pulse> @vite('resources/css/pulse/top-sellers.css') ... </x-pulse></div></code></pre> </div> <h4 id="custom-card-styling-css"><a href="#custom-card-styling-css">CSS Files</a></h4> <p>For other use cases, including Pulse cards contained within a package, you may instruct Pulse to load additional stylesheets by defining a <code>css</code> method on your Livewire component that returns the file path to your CSS file:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB6B;">TopSellers</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">extends</span><span style="color: #BFC7D5;"> </span><span style="color: #A9C77D;">Card</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> ...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">protected</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">css</span><span style="color: #D9F5DD;">()</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">__DIR__</span><span style="color: #89DDFF;">.</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">/../../dist/top-sellers.css</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">8</span><span style="color: #BFC7D5;"> }</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">9</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> class TopSellers extends Card { // ... protected function css() { return __DIR__.'/../../dist/top-sellers.css'; } }</div></code></pre> </div> <p>When this card is included on the dashboard, Pulse will automatically include the contents of this file within a <code><style></code> tag so it does not need to be published to the <code>public</code> directory.</p> <h4 id="custom-card-styling-tailwind"><a href="#custom-card-styling-tailwind">Tailwind CSS</a></h4> <p>When using Tailwind CSS, you should create a dedicated Tailwind configuration file to avoid loading unnecessary CSS or conflicting with Pulse's Tailwind classes:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="js" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #C792EA;">export</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">default</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span><span style="color: #BFC7D5;"> darkMode: </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">class</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #BFC7D5;"> important: </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">#top-sellers</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #BFC7D5;"> content: [</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">./resources/views/livewire/pulse/top-sellers.blade.php</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #BFC7D5;"> ],</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #BFC7D5;"> corePlugins: {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BFC7D5;"> preflight: </span><span style="color: #FF5874;">false</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;"> },</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;">};</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> export default { darkMode: 'class', important: '#top-sellers', content: [ './resources/views/livewire/pulse/top-sellers.blade.php', ], corePlugins: { preflight: false, }, };</div></code></pre> </div> <p>You may then specify the configuration file in your CSS entrypoint:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="css" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">@config</span><span style="color: #BFC7D5;"> "../../tailwind.top-sellers.config.js";</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #C792EA;">@tailwind</span><span style="color: #BFC7D5;"> base;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #C792EA;">@tailwind</span><span style="color: #BFC7D5;"> components;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #C792EA;">@tailwind</span><span style="color: #BFC7D5;"> utilities;</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @config "../../tailwind.top-sellers.config.js"; @tailwind base; @tailwind components; @tailwind utilities;</div></code></pre> </div> <p>You will also need to include an <code>id</code> or <code>class</code> attribute in your card's view that matches the selector passed to Tailwind's <a href="https://tailwindcss.com/docs/configuration#selector-strategy"><code>important</code> selector strategy</a>:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FFFFFF;">x-pulse::card</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">id</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">top-sellers</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">:cols</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">$cols</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">:rows</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">$rows</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">class</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">$class</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> ...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"></</span><span style="color: #FFFFFF;">x-pulse::card</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <x-pulse::card id="top-sellers" :cols="$cols" :rows="$rows" class="$class"> ... </x-pulse::card></div></code></pre> </div> <h3 id="custom-card-data"><a href="#custom-card-data">Data Capture and Aggregation</a></h3> <p>Custom cards may fetch and display data from anywhere; however, you may wish to leverage Pulse's powerful and efficient data recording and aggregation system.</p> <h4 id="custom-card-data-capture"><a href="#custom-card-data-capture">Capturing Entries</a></h4> <p>Pulse allows you to record "entries" using the <code>Pulse::record</code> method:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Laravel\Pulse\Facades\</span><span style="color: #FFCB8B;">Pulse</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #FFCB8B;">Pulse</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">record</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">user_sale</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$user</span><span style="color: #89DDFF;">->id</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$sale</span><span style="color: #89DDFF;">->amount</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">sum</span><span style="color: #BFC7D5;">()</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">count</span><span style="color: #BFC7D5;">();</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> use Laravel\Pulse\Facades\Pulse; Pulse::record('user_sale', $user->id, $sale->amount) ->sum() ->count();</div></code></pre> </div> <p>The first argument provided to the <code>record</code> method is the <code>type</code> for the entry you are recording, while the second argument is the <code>key</code> that determines how the aggregated data should be grouped. For most aggregation methods you will also need to specify a <code>value</code> to be aggregated. In the example above, the value being aggregated is <code>$sale->amount</code>. You may then invoke one or more aggregation methods (such as <code>sum</code>) so that Pulse may capture pre-aggregated values into "buckets" for efficient retrieval later.</p> <p>The available aggregation methods are:</p> <ul> <li><code>avg</code></li> <li><code>count</code></li> <li><code>max</code></li> <li><code>min</code></li> <li><code>sum</code></li> </ul> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 rounded-xs flex items-center justify-center shrink-0 bg-[#8D54C5]"> <svg width="16" height="21" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 20H11M5.5 14H10.5M15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 10.7924 2.63505 13.2029 5 14.3264V17H11V14.3264C13.3649 13.2029 15 10.7924 15 8Z" stroke="#FDFDFC" stroke-width="1.5" stroke-linecap="square"/> </svg> </div> <p class="callout"> When building a card package that captures the currently authenticated user ID, you should use the <code>Pulse::resolveAuthenticatedUserId()</code> method, which respects any <a href="#dashboard-resolving-users">user resolver customizations</a> made to the application.</p> </div> <h4 id="custom-card-data-retrieval"><a href="#custom-card-data-retrieval">Retrieving Aggregate Data</a></h4> <p>When extending Pulse's <code>Card</code> Livewire component, you may use the <code>aggregate</code> method to retrieve aggregated data for the period being viewed in the dashboard:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB6B;">TopSellers</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">extends</span><span style="color: #BFC7D5;"> </span><span style="color: #A9C77D;">Card</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">render</span><span style="color: #D9F5DD;">()</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">view</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">livewire.pulse.top-sellers</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">[</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #82AAFF;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">topSellers</span><span style="color: #D9F5DD;">'</span><span style="color: #82AAFF;"> </span><span style="color: #89DDFF;">=></span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">$</span><span style="color: #FF5572;">this</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">aggregate</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">user_sale</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">[</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">sum</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span><span style="color: #82AAFF;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">count</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">])</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">]);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">8</span><span style="color: #BFC7D5;"> }</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">9</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> class TopSellers extends Card { public function render() { return view('livewire.pulse.top-sellers', [ 'topSellers' => $this->aggregate('user_sale', ['sum', 'count']) ]); } }</div></code></pre> </div> <p>The <code>aggregate</code> method returns a collection of PHP <code>stdClass</code> objects. Each object will contain the <code>key</code> property captured earlier, along with keys for each of the requested aggregates:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">@foreach </span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$topSellers</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">as</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$seller</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$seller</span><span style="color: #89DDFF;">->key</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$seller</span><span style="color: #89DDFF;">->sum</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$seller</span><span style="color: #89DDFF;">->count</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #C792EA;">@endforeach</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @foreach ($topSellers as $seller) {{ $seller->key }} {{ $seller->sum }} {{ $seller->count }} @endforeach</div></code></pre> </div> <p>Pulse will primarily retrieve data from the pre-aggregated buckets; therefore, the specified aggregates must have been captured up-front using the <code>Pulse::record</code> method. The oldest bucket will typically fall partially outside the period, so Pulse will aggregate the oldest entries to fill the gap and give an accurate value for the entire period, without needing to aggregate the entire period on each poll request.</p> <p>You may also retrieve a total value for a given type by using the <code>aggregateTotal</code> method. For example, the following method would retrieve the total of all user sales instead of grouping them by user.</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BEC5D4;">$total</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #FF5572;">$this</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">aggregateTotal</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">user_sale</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">sum</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $total = $this->aggregateTotal('user_sale', 'sum');</div></code></pre> </div> <h4 id="custom-card-displaying-users"><a href="#custom-card-displaying-users">Displaying Users</a></h4> <p>When working with aggregates that record a user ID as the key, you may resolve the keys to user records using the <code>Pulse::resolveUsers</code> method:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #BEC5D4;">$aggregates</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #FF5572;">$this</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">aggregate</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">user_sale</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, [</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">sum</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">count</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">]);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #BEC5D4;">$users</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">Pulse</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">resolveUsers</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$aggregates</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">pluck</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">key</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">));</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">view</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">livewire.pulse.top-sellers</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">[</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #82AAFF;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">sellers</span><span style="color: #D9F5DD;">'</span><span style="color: #82AAFF;"> </span><span style="color: #89DDFF;">=></span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">$</span><span style="color: #BEC5D4;">aggregates</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">map</span><span style="color: #BFC7D5;">(</span><span style="color: #C792EA;">fn</span><span style="color: #82AAFF;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #BFC7D5;">$</span><span style="color: #BEC5D4;">aggregate</span><span style="color: #D9F5DD;">)</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">=></span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">(</span><span style="color: #C792EA;">object</span><span style="color: #BFC7D5;">)</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">[</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #82AAFF;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">user</span><span style="color: #D9F5DD;">'</span><span style="color: #82AAFF;"> </span><span style="color: #89DDFF;">=></span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">$</span><span style="color: #BEC5D4;">users</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">find</span><span style="color: #BFC7D5;">($</span><span style="color: #BEC5D4;">aggregate</span><span style="color: #89DDFF;">->key</span><span style="color: #BFC7D5;">),</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #82AAFF;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">sum</span><span style="color: #D9F5DD;">'</span><span style="color: #82AAFF;"> </span><span style="color: #89DDFF;">=></span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">$</span><span style="color: #BEC5D4;">aggregate</span><span style="color: #89DDFF;">->sum</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #82AAFF;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">count</span><span style="color: #D9F5DD;">'</span><span style="color: #82AAFF;"> </span><span style="color: #89DDFF;">=></span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">$</span><span style="color: #BEC5D4;">aggregate</span><span style="color: #89DDFF;">->count</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">])</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #BFC7D5;">]);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> $aggregates = $this->aggregate('user_sale', ['sum', 'count']); $users = Pulse::resolveUsers($aggregates->pluck('key')); return view('livewire.pulse.top-sellers', [ 'sellers' => $aggregates->map(fn ($aggregate) => (object) [ 'user' => $users->find($aggregate->key), 'sum' => $aggregate->sum, 'count' => $aggregate->count, ]) ]);</div></code></pre> </div> <p>The <code>find</code> method returns an object containing <code>name</code>, <code>extra</code>, and <code>avatar</code> keys, which you may optionally pass directly to the <code><x-pulse::user-card></code> Blade component:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FFFFFF;">x-pulse::user-card</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">:user</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">{{</span><span style="color: #C3E88D;"> </span><span style="color: #BEC5D4;">$seller</span><span style="color: #89DDFF;">->user</span><span style="color: #C3E88D;"> </span><span style="color: #89DDFF;">}}</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">:stats</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">{{</span><span style="color: #C3E88D;"> </span><span style="color: #BEC5D4;">$seller</span><span style="color: #89DDFF;">->sum</span><span style="color: #C3E88D;"> </span><span style="color: #89DDFF;">}}</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;"> /></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <x-pulse::user-card :user="{{ $seller->user }}" :stats="{{ $seller->sum }}" /></div></code></pre> </div> <h4 id="custom-recorders"><a href="#custom-recorders">Custom Recorders</a></h4> <p>Package authors may wish to provide recorder classes to allow users to configure the capturing of data.</p> <p>Recorders are registered in the <code>recorders</code> section of the application's <code>config/pulse.php</code> configuration file:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #BFC7D5;">[</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> ...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">recorders</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> [</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #BFC7D5;"> Acme\Recorders\</span><span style="color: #FFCB8B;">Deployments</span><span style="color: #89DDFF;">::</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> [</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> ...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #BFC7D5;"> ],</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> ...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;"> ],</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;">]</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> [ // ... 'recorders' => [ Acme\Recorders\Deployments::class => [ // ... ], // ... ], ]</div></code></pre> </div> <p>Recorders may listen to events by specifying a <code>$listen</code> property. Pulse will automatically register the listeners and call the recorders <code>record</code> method:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #D3423E;"><?php</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #C792EA;">namespace</span><span style="color: #BFC7D5;"> Acme\Recorders;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Acme\Events\</span><span style="color: #FFCB8B;">Deployment</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Support\Facades\</span><span style="color: #FFCB8B;">Config</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Laravel\Pulse\Facades\</span><span style="color: #FFCB8B;">Pulse</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB6B;">Deployments</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span style="color: #697098;"> * The events to listen for.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span style="color: #697098;"> *</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">14</span><span style="color: #697098;"> * </span><span style="color: #C792EA;">@var</span><span style="color: #697098;"> </span><span style="color: #C792EA;">array</span><span style="color: #697098;"><</span><span style="color: #C792EA;">int</span><span style="color: #697098;">, class-string></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">15</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">16</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">array</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$listen</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> [</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">17</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">Deployment</span><span style="color: #89DDFF;">::</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">18</span><span style="color: #BFC7D5;"> ];</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">19</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">20</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">21</span><span style="color: #697098;"> * Record the deployment.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">22</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">23</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">record</span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">Deployment</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$event</span><span style="color: #D9F5DD;">)</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">void</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">24</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">25</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$config</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">Config</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">get</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">pulse.recorders.</span><span style="color: #D9F5DD;">'</span><span style="color: #89DDFF;">.</span><span style="color: #C792EA;">static</span><span style="color: #89DDFF;">::</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">26</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">27</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">Pulse</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">record</span><span style="color: #BFC7D5;">(</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">28</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> ...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">29</span><span style="color: #BFC7D5;"> );</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">30</span><span style="color: #BFC7D5;"> }</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">31</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <?php namespace Acme\Recorders; use Acme\Events\Deployment; use Illuminate\Support\Facades\Config; use Laravel\Pulse\Facades\Pulse; class Deployments { /** * The events to listen for. * * @var array<int, class-string> */ public array $listen = [ Deployment::class, ]; /** * Record the deployment. */ public function record(Deployment $event): void { $config = Config::get('pulse.recorders.'.static::class); Pulse::record( // ... ); } }</div></code></pre> </div> </div> </section> </section> </div> </section> </div> </div> </div> </div> <div class="text-sand-dark-10"> <div class="max-w-full w-full xl:max-w-[1400px] pt-10 md:pt-24 px-4 xl:px-16 mx-auto border-l border-sand-light-7"> <div class="grid grid-cols-12 lg:gap-12"> <div class="col-span-12 lg:col-span-3 lg:mt-14"> <p class="text-pretty">Laravel is the most productive way to<br class="block lg:hidden"> build, deploy, and monitor software.</p> <ul class="flex items-center justify-start my-8 space-x-6 lg:my-16"> <li> <a href="https://github.com/laravel" target="_blank" title="Laravel on GitHub" class="transition duration-100 hover:text-sand-dark-6"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path fill-rule="evenodd" clip-rule="evenodd" d="M0 12.305C0 17.74 3.438 22.352 8.207 23.979C8.807 24.092 9.027 23.712 9.027 23.386C9.027 23.094 9.016 22.32 9.01 21.293C5.671 22.037 4.967 19.643 4.967 19.643C4.422 18.223 3.635 17.845 3.635 17.845C2.545 17.081 3.718 17.096 3.718 17.096C4.921 17.183 5.555 18.364 5.555 18.364C6.626 20.244 8.364 19.702 9.048 19.386C9.157 18.591 9.468 18.049 9.81 17.741C7.145 17.431 4.344 16.376 4.344 11.661C4.344 10.318 4.811 9.219 5.579 8.359C5.456 8.048 5.044 6.797 5.696 5.103C5.696 5.103 6.704 4.773 8.996 6.364C9.954 6.091 10.98 5.955 12.001 5.95C13.02 5.955 14.047 6.091 15.005 6.364C17.295 4.772 18.302 5.103 18.302 5.103C18.956 6.797 18.544 8.048 18.421 8.359C19.191 9.219 19.655 10.318 19.655 11.661C19.655 16.387 16.849 17.428 14.175 17.732C14.606 18.112 14.99 18.862 14.99 20.011C14.99 21.656 14.975 22.982 14.975 23.386C14.975 23.715 15.191 24.098 15.8 23.977C20.565 22.347 24 17.738 24 12.305C24 5.508 18.627 0 12 0C5.373 0 0 5.508 0 12.305Z" fill="currentColor" /> </svg> </a> </li> <li> <a href="https://x.com/laravelphp" target="_blank" title="Laravel on X" class="transition duration-100 hover:text-sand-dark-6"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M13.969 10.1571L22.7069 0H20.6363L13.0491 8.81931L6.9893 0H0L9.16366 13.3364L0 23.9877H2.07073L10.083 14.6742L16.4826 23.9877H23.4719L13.9684 10.1571H13.969ZM11.1328 13.4538L10.2043 12.1258L2.81684 1.55881H5.99736L11.9592 10.0867L12.8876 11.4147L20.6373 22.4998H17.4567L11.1328 13.4544V13.4538Z" fill="currentColor" /> </svg> </a> </li> <li> <a href="https://www.youtube.com/@LaravelPHP" target="_blank" title="Laravel on YouTube" class="transition duration-100 hover:text-sand-dark-6"> <svg width="35" height="24" viewBox="0 0 35 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M33.892 3.75519C33.4994 2.27706 32.3428 1.11294 30.8742 0.717875C28.2124 0 17.5385 0 17.5385 0C17.5385 0 6.8648 0 4.20286 0.717875C2.7343 1.113 1.57768 2.27706 1.18511 3.75519C0.471863 6.43437 0.471863 12.0243 0.471863 12.0243C0.471863 12.0243 0.471863 17.6141 1.18511 20.2933C1.57768 21.7714 2.7343 22.8871 4.20286 23.2821C6.8648 24 17.5385 24 17.5385 24C17.5385 24 28.2123 24 30.8742 23.2821C32.3428 22.8871 33.4994 21.7714 33.892 20.2933C34.6052 17.6141 34.6052 12.0243 34.6052 12.0243C34.6052 12.0243 34.6052 6.43437 33.892 3.75519ZM14.0476 17.0994V6.94906L22.9688 12.0244L14.0476 17.0994Z" fill="currentColor" /> </svg> </a> </li> <li> <a href="https://discord.com/invite/laravel" target="_blank" title="Laravel on Discord" class="transition duration-100 hover:text-sand-dark-6"> <svg width="33" height="24" viewBox="0 0 33 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M27.4296 2.00996C25.3491 1.05745 23.1528 0.381713 20.8966 0C20.5879 0.551901 20.3086 1.11973 20.0598 1.70112C17.6566 1.33898 15.2127 1.33898 12.8095 1.70112C12.5605 1.11979 12.2812 0.551968 11.9726 0C9.71504 0.384937 7.51722 1.06228 5.43462 2.01494C1.30013 8.132 0.179328 14.0971 0.739727 19.9776C3.16099 21.7665 5.87108 23.127 8.75218 24C9.40092 23.1275 9.97497 22.2018 10.4682 21.2329C9.53134 20.883 8.62706 20.4512 7.76588 19.9427C7.99253 19.7783 8.2142 19.609 8.42839 19.4446C10.9342 20.623 13.6692 21.234 16.4384 21.234C19.2075 21.234 21.9425 20.623 24.4483 19.4446C24.665 19.6214 24.8867 19.7908 25.1108 19.9427C24.248 20.4521 23.3421 20.8846 22.4035 21.2354C22.8962 22.2039 23.4702 23.1287 24.1196 24C27.0031 23.1305 29.7153 21.7707 32.137 19.9801C32.7945 13.1606 31.0137 7.25031 27.4296 2.00996ZM11.1781 16.3611C9.61644 16.3611 8.32628 14.944 8.32628 13.2005C8.32628 11.457 9.57161 10.0274 11.1731 10.0274C12.7746 10.0274 14.0548 11.457 14.0274 13.2005C14 14.944 12.7696 16.3611 11.1781 16.3611ZM21.6986 16.3611C20.1345 16.3611 18.8493 14.944 18.8493 13.2005C18.8493 11.457 20.0946 10.0274 21.6986 10.0274C23.3026 10.0274 24.5729 11.457 24.5455 13.2005C24.5181 14.944 23.2902 16.3611 21.6986 16.3611Z" fill="currentColor" /> </svg> </a> </li> </ul> <div> <ul class="flex justify-start space-x-8"> <li>© 2025 Laravel</li> <li><a href="https://laravel.com/trademark" class="transition duration-100 hover:text-sand-dark-6">Legal</a></li> <li><a href="https://status.laravel.com/" class="transition duration-100 hover:text-sand-dark-6">Status</a></li> </ul> </div> </div> <div class="grid grid-cols-subgrid col-span-12 lg:col-span-9"> <div class="grid grid-cols-subgrid mt-14 lg:mt-0 self-start lg:col-span-2 col-span-6 order-2"> <h4 class="mb-8 text-base text-sand-light-12 dark:text-sand-dark-12 font-medium lg:col-span-2 col-span-6"> Products </h4> <ul class="col-span-6 mb-6 space-y-6 lg:mb-0 lg:col-span-2"> <li> <a href="https://cloud.laravel.com" class="transition duration-100 hover:text-sand-dark-6">Cloud</a> </li> <li> <a href="https://forge.laravel.com" class="transition duration-100 hover:text-sand-dark-6">Forge</a> </li> <li> <a href="https://vapor.laravel.com" class="transition duration-100 hover:text-sand-dark-6">Vapor</a> </li> <li> <a href="https://nightwatch.laravel.com" class="transition duration-100 hover:text-sand-dark-6">Nightwatch</a> </li> <li> <a href="https://nova.laravel.com" class="transition duration-100 hover:text-sand-dark-6">Nova</a> </li> </ul> </div> <div class="grid grid-cols-subgrid mt-14 lg:mt-0 self-start lg:col-span-4 col-span-12 order-3"> <h4 class="mb-8 text-base text-sand-light-12 dark:text-sand-dark-12 font-medium lg:col-span-4 col-span-12"> Packages </h4> <ul class="col-span-6 mb-6 space-y-6 lg:mb-0 lg:col-span-2"> <li> <a href="/docs/cashier" class="transition duration-100 hover:text-sand-dark-6">Cashier</a> </li> <li> <a href="/docs/dusk" class="transition duration-100 hover:text-sand-dark-6">Dusk</a> </li> <li> <a href="/docs/horizon" class="transition duration-100 hover:text-sand-dark-6">Horizon</a> </li> <li> <a href="/docs/octane" class="transition duration-100 hover:text-sand-dark-6">Octane</a> </li> <li> <a href="/docs/scout" class="transition duration-100 hover:text-sand-dark-6">Scout</a> </li> <li> <a href="/docs/pennant" class="transition duration-100 hover:text-sand-dark-6">Pennant</a> </li> <li> <a href="/docs/pint" class="transition duration-100 hover:text-sand-dark-6">Pint</a> </li> </ul> <ul class="col-span-6 mb-6 space-y-6 lg:mb-0 lg:col-span-2"> <li> <a href="/docs/sail" class="transition duration-100 hover:text-sand-dark-6">Sail</a> </li> <li> <a href="/docs/sanctum" class="transition duration-100 hover:text-sand-dark-6">Sanctum</a> </li> <li> <a href="/docs/socialite" class="transition duration-100 hover:text-sand-dark-6">Socialite</a> </li> <li> <a href="/docs/telescope" class="transition duration-100 hover:text-sand-dark-6">Telescope</a> </li> <li> <a href="/docs/pulse" class="transition duration-100 hover:text-sand-dark-6">Pulse</a> </li> <li> <a href="/docs/reverb" class="transition duration-100 hover:text-sand-dark-6">Reverb</a> </li> <li> <a href="/docs/broadcasting" class="transition duration-100 hover:text-sand-dark-6">Echo</a> </li> </ul> </div> <div class="grid grid-cols-subgrid mt-14 lg:mt-0 self-start lg:col-span-2 col-span-6 order-1"> <h4 class="mb-8 text-base text-sand-light-12 dark:text-sand-dark-12 font-medium lg:col-span-2 col-span-6"> Resources </h4> <ul class="col-span-6 mb-6 space-y-6 lg:mb-0 lg:col-span-2"> <li> <a href="/docs" class="transition duration-100 hover:text-sand-dark-6">Documentation</a> </li> <li> <a href="/starter-kits" class="transition duration-100 hover:text-sand-dark-6">Starter Kits</a> </li> <li> <a href="/docs/releases" class="transition duration-100 hover:text-sand-dark-6">Release Notes</a> </li> <li> <a href="https://blog.laravel.com" class="transition duration-100 hover:text-sand-dark-6">Blog</a> </li> <li> <a href="https://partners.laravel.com" class="transition duration-100 hover:text-sand-dark-6">Partners</a> </li> <li> <a href="https://laravel-news.com" class="transition duration-100 hover:text-sand-dark-6">News</a> </li> <li> <a href="https://larabelles.com/" class="transition duration-100 hover:text-sand-dark-6">Larabelles</a> </li> <li> <a href="https://larajobs.com/?partner=5" class="transition duration-100 hover:text-sand-dark-6">Jobs</a> </li> <li> <a href="/careers" class="transition duration-100 hover:text-sand-dark-6">Careers</a> </li> </ul> </div> </div> <div class="col-span-12 text-sand-light-1"> <svg class="w-full h-full text-laravel-red" width="1280" height="308" viewBox="0 0 1280 308" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M50.2753 0H0V308.689H144.713V263.27H50.2753V0Z" fill="currentColor" /> <path d="M322.209 130.973C315.796 120.684 306.688 112.602 294.883 106.718C283.081 100.84 271.201 97.8969 259.253 97.8969C243.798 97.8969 229.665 100.764 216.843 106.496C204.014 112.228 193.015 120.099 183.834 130.091C174.654 140.088 167.51 151.628 162.412 164.706C157.308 177.792 154.761 191.54 154.761 205.94C154.761 220.645 157.308 234.457 162.412 247.39C167.508 260.332 174.652 271.796 183.834 281.788C193.015 291.785 204.017 299.647 216.843 305.379C229.665 311.111 243.798 313.978 259.253 313.978C271.201 313.978 283.081 311.038 294.883 305.159C306.688 299.282 315.796 291.197 322.209 280.904V308.685H369.865V103.186H322.209V130.973ZM317.837 231.076C314.922 239.016 310.841 245.925 305.598 251.804C300.35 257.687 294.009 262.389 286.579 265.917C279.146 269.445 270.905 271.208 261.875 271.208C252.837 271.208 244.676 269.445 237.391 265.917C230.104 262.389 223.839 257.687 218.593 251.804C213.345 245.925 209.335 239.016 206.57 231.076C203.794 223.138 202.417 214.759 202.417 205.942C202.417 197.12 203.794 188.742 206.57 180.804C209.335 172.866 213.345 165.961 218.593 160.078C223.839 154.201 230.102 149.493 237.391 145.965C244.676 142.437 252.837 140.674 261.875 140.674C270.908 140.674 279.146 142.437 286.579 145.965C294.009 149.493 300.35 154.199 305.598 160.078C310.844 165.961 314.922 172.866 317.837 180.804C320.748 188.742 322.209 197.12 322.209 205.942C322.209 214.759 320.748 223.138 317.837 231.076Z" fill="currentColor" /> <path d="M709.568 130.973C703.155 120.684 694.047 112.602 682.242 106.718C670.44 100.84 658.56 97.8969 646.612 97.8969C631.157 97.8969 617.024 100.764 604.202 106.496C591.373 112.228 580.374 120.099 571.193 130.091C562.013 140.088 554.869 151.628 549.771 164.706C544.666 177.792 542.12 191.54 542.12 205.94C542.12 220.645 544.666 234.457 549.771 247.39C554.867 260.332 562.01 271.796 571.193 281.788C580.374 291.785 591.375 299.647 604.202 305.379C617.024 311.111 631.157 313.978 646.612 313.978C658.56 313.978 670.44 311.038 682.242 305.159C694.047 299.282 703.155 291.197 709.568 280.904V308.685H757.224V103.186H709.568V130.973ZM705.198 231.076C702.283 239.016 698.202 245.925 692.959 251.804C687.711 257.687 681.37 262.389 673.94 265.917C666.507 269.445 658.266 271.208 649.236 271.208C640.198 271.208 632.037 269.445 624.752 265.917C617.465 262.389 611.2 257.687 605.954 251.804C600.706 245.925 596.696 239.016 593.931 231.076C591.155 223.138 589.778 214.759 589.778 205.942C589.778 197.12 591.155 188.742 593.931 180.804C596.696 172.866 600.706 165.961 605.954 160.078C611.2 154.201 617.463 149.493 624.752 145.965C632.037 142.437 640.198 140.674 649.236 140.674C658.269 140.674 666.507 142.437 673.94 145.965C681.37 149.493 687.711 154.199 692.959 160.078C698.205 165.961 702.283 172.866 705.198 180.804C708.109 188.742 709.57 197.12 709.57 205.942C709.568 214.759 708.107 223.138 705.198 231.076Z" fill="currentColor" /> <path d="M1280 1.12315e-05H1232.35V308.689H1280V1.12315e-05Z" fill="currentColor" /> <path d="M407.466 308.689H455.117V150.486H536.876V103.192H407.466V308.689Z" fill="currentColor" /> <path d="M948.281 103.192L888.386 260.557L828.489 103.192H780.224L858.441 308.689H918.331L996.546 103.192H948.281Z" fill="currentColor" /> <path d="M1100.48 97.908C1042.13 97.908 995.937 146.279 995.937 205.944C995.937 271.9 1040.64 313.98 1106.59 313.98C1143.5 313.98 1167.06 299.745 1195.85 268.746L1163.66 243.621C1163.64 243.646 1139.36 275.802 1103.1 275.802C1060.96 275.802 1043.22 241.533 1043.22 223.803H1201.32C1209.62 155.913 1165.37 97.908 1100.48 97.908ZM1043.35 188.085C1043.71 184.13 1049.2 136.086 1100.1 136.086C1151.01 136.086 1157.19 184.123 1157.55 188.085H1043.35Z" fill="currentColor" /> </svg> </div> </div> </div> </div> <script> var _gaq=[['_setAccount','UA-23865777-1'],['_trackPageview']]; (function(d,t){ var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js'; s.parentNode.insertBefore(g,s) }(document,'script')); </script>  <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/45240648.js"></script> </body> </html>