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
One core, many clients: the new Flare JavaScript client architecture
We recently reshaped the Flare JavaScript client from a single browser library and a few thin framework specific packages into a small family of packages built on a shared, platform-agnostic core. This post explains why we did it, what the core package exposes, how the browser and Node SDKs are built on top of it, why the React, Vue, and Svelte packages sit one level higher, and how anyone can use the same core to write a Flare JS client for a platform we do not ship ourselves.
Dries
Logging is here!
Logging is now available for all Flare users! Send any log from your app to Flare and use our polished interface to filter and search your logs in real-time.
Jimi
Subscribe to Backtrace, our quarterly Flare newsletter
No spam, just news & product updates
