If you've visited our blog or documentation in the last couple of weeks, you might've noticed things look a little different. We're now highlighting all code blocks using Shiki, an open-source syntax highlighter written in JavaScript. Shiki makes code blocks look a lot better than the previous highlighting method using highlight.php.
Some examples ✨
Let's start with a simple PHP example:
use Facade\FlareClient\Report;
class FlareMiddleware
{
public function handle(Report $report, $next)
{
$context = $report->allContext();
$context['session'] = null;
$report->userProvidedContext($context);
return $next($report);
}
}
JavaScript poses no challenge either:
import { flare } from "@flareapp/flare-client";
try {
functionThatMightThrow();
} catch (error) {
flare.report(error);
}
HTML looks great too:
<html lang="en">
<head>
<title>Laravel error tracking – Flare</title>
<meta name="description" content="Full-stack Laravel error tracking made specifically for your Laravel applications and JavaScript frontends.">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="alternate" type="application/atom+xml" href="https://flareapp.io/feed" title="flareapp.io">
<link rel="apple-touch-icon" sizes="180x180" href="https://flareapp.io/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://flareapp.io/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://flareapp.io/favicon-16x16.png">
<link rel="manifest" href="https://flareapp.io/site.webmanifest">
<meta name="msapplication-TileColor" content="#4f0f8f">
<meta name="theme-color" content="#4f0f8f">
</head>
</html>
CSS never was so pretty:
.modal-header {
flex: none;
display: grid;
align-items: center;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 1rem;
padding-bottom: 1rem;
height: var(--tab-bar-height);
background-color:var(--gray-200)
}
@media (min-width: 768px) {
.modal-header {
padding-left: 3rem;
padding-right:3rem
}
}
And last but not least, we can show diffs now:
--- public function invitations()
+++ public function invitations(): HasMany
{
return $this->hasMany(Invitation::class);
}
Behind the scenes
All of the above is powered by our newest laravel-markdown package. It converts markdown to HTML and it's using Shiki and our shiki-php package to highlight code blocks. Because Laravel has a built-in MarkdownRenderer that we like to use, we don't call CommonMark directly. Instead we resolve the renderer class from the container:
--- return CommonMark::convertToHtml($this->text);
+++ return app(MarkdownRenderer::class)->toHtml($this->text);
Because Shiki is quite heavy on performance (a nodeJS server is started on the backend each time you're trying to highlight a code block) we decided to add an extra layer of caching:
return cache()->remember(
"posts.{$this->id}.formatted_text",
null,
fn () => app(MarkdownRenderer::class)->toHtml($this->text)
);
On the Post model we added a listener that will (re-)cache the blogpost whenever it's saved. This will trigger when the model is created and updated:
static::saved(function (Post $post): void {
cache()->delete("posts.{$post->id}.formatted_text");
$post->getFormattedTextAttribute(); // re-cache
});
Continue reading
Bringing Flare back to Laravel 10 and PHP 8.1
Flare now supports Laravel 10 and PHP 8.1 again, so older apps get performance monitoring and logs too. Here’s how we did it.
Ruben
Your Laravel routes can carry metadata now, and Flare shows it
Laravel added a new way to attach metadata to routes, and Flare now automatically shows it on errors and traces
Ruben
Subscribe to Backtrace, our quarterly Flare newsletter
No spam, just news & product updates
