FEED Validator

for Atom and RSS and KML

Congratulations!

This is a valid RSS feed.

Recommendations

This feed is valid, but interoperability with the widest range of feed readers could be improved by implementing the following recommendations.

line 304, column 0: style attribute contains potentially dangerous content: max-height (4 occurrences) [help]
```
    'you@example.com',
```
line 839, column 0: content:encoded should not contain data-mtr-content attribute (503 occurrences) [help]
line 863, column 0: Non-html tag: bugsink (2 occurrences) [help]

Source: https://portalzine.de/feed?clean

<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:wfw="http://wellformedweb.org/CommentAPI/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
>
<channel>
<title>portalZINE NMN | Development meets Creativity</title>
<atom:link href="https://portalzine.de/feed/?clean" rel="self" type="application/rss+xml" />
<link>https://portalzine.de</link>
<description>Development meets Creativity</description>
<lastBuildDate>Thu, 24 Apr 2025 09:19:24 +0000</lastBuildDate>
<language>en-US</language>
<sy:updatePeriod>
hourly </sy:updatePeriod>
<sy:updateFrequency>
1 </sy:updateFrequency>
<image>
<url>https://portalzine.de/wp-content/uploads/2025/02/cropped-favicon-32x32.png</url>
<title>portalZINE NMN | Development meets Creativity</title>
<link>https://portalzine.de</link>
<width>32</width>
<height>32</height>
</image>
<item>
<title>Making Your Life Easier: Debugging with Monolog and Wonolog in WordPress</title>
<link>https://portalzine.de/making-your-life-easier-debugging-with-monolog-and-wonolog-in-wordpress/</link>
<comments>https://portalzine.de/making-your-life-easier-debugging-with-monolog-and-wonolog-in-wordpress/#respond</comments>
<dc:creator><![CDATA[]]></dc:creator>
<pubDate>Thu, 24 Apr 2025 09:19:21 +0000</pubDate>
<category><![CDATA[Development]]></category>
<category><![CDATA[Debugging]]></category>
<category><![CDATA[Deployment]]></category>
<category><![CDATA[PHP]]></category>
<category><![CDATA[WordPress]]></category>
<guid isPermaLink="false">https://portalzine.de/?p=8456</guid>
<description><![CDATA[Why Bother with Proper Logging? Let’s be honest – debugging can be a real pain. We’ve all been there, staring at a blank screen with no clue what went wrong. Or worse, getting vague error messages that lead nowhere. That’s where good logging comes in! PHP’s built-in error reporting is… well, it’s there. But it’s […]]]></description>
<content:encoded><![CDATA[
<h2 class="wp-block-heading">Why Bother with Proper Logging?</h2>
<p>Let’s be honest – debugging can be a real pain. We’ve all been there, staring at a blank screen with no clue what went wrong. Or worse, getting vague error messages that lead nowhere. That’s where <a href="https://en.wikipedia.org/wiki/Logging_(software)" target="_blank" rel="noopener">good logging</a> comes in!</p>
<p><a href="https://www.php.net/manual/en/function.error-reporting.php" target="_blank" rel="noopener">PHP’s built-in error reporting</a> is… well, it’s there. But it’s pretty basic. It’s like trying to fix a complex machine with just a hammer. You need more specialized tools for serious development work.</p>
<p>That’s where <a href="https://github.com/Seldaek/monolog" target="_blank" rel="noopener">Monolog</a> enters the picture. Think of it as your debugging Swiss Army knife – it gives you a ton of options to see what’s really happening in your code.</p>
<p><strong>Looking for a log navigator? </strong>Checkout my article about <a href="https://portalzine.de/lnav-a-powerful-tool-for-log-file-debugging/">LNAV</a>. <br><strong>Looking for a external error logger or Sentry alternative?</strong> Checkout these … <a href="https://portalzine.de/day-29-bugsink-self-hosted-error-tracking-7-days-of-docker/">Bugsink</a> / <a href="https://portalzine.de/day-3-glitchtip-7-days-of-docker/">Glitchtip</a>.</p>
<h2 class="wp-block-heading">What’s Monolog Anyway?</h2>
<p><a href="https://seldaek.github.io/monolog/" target="_blank" rel="noopener">Monolog</a> is basically the rock star of PHP logging libraries. It’s what all the cool frameworks use (<a href="https://laravel.com/docs/10.x/logging" target="_blank" rel="noopener">Laravel</a>, <a href="https://symfony.com/doc/current/logging.html" target="_blank" rel="noopener">Symfony</a> – you name it). With millions of downloads, it’s become the go-to solution for anyone who needs to know what’s happening in their application.</p>
<p>The beauty of Monolog is how flexible it is. Want to log to files? Sure. Databases? No problem. Email, Slack, or pretty much anywhere else? Monolog has got you covered. It plays nicely with other systems too, thanks to following the <a href="https://www.php-fig.org/psr/psr-3/" target="_blank" rel="noopener">PSR-3 standard</a> (fancy talk for “it works well with other logging tools”).</p>
<h2 class="wp-block-heading">Why Monolog Rocks for Debugging</h2>
<p>Here’s why Monolog is your new best friend when it comes to squashing bugs:</p>
<ul class="wp-block-list">
<li><strong>It’s multi-talented</strong> – Send your logs to different places at once (like keeping detailed logs in a file while getting urgent errors via email)</li>
<li><strong>It knows how serious things are</strong> – With eight different levels from “just FYI” to “everything’s on fire!”, you can filter what matters</li>
<li><strong>It’s context-aware</strong> – Automatically add extra info to your logs like user data or request details</li>
<li><strong>It’s pretty</strong> – Customize how your logs look so they’re actually readable</li>
<li><strong>It’s organized</strong> – Group logs by channels so you’re not searching through a haystack</li>
</ul>
<p>All this means you spend less time scratching your head and more time actually fixing problems!</p>
<h2 class="wp-block-heading">Getting Started with Monolog</h2>
<h3 class="wp-block-heading">Installation: Quick and Painless</h3>
<p>First things first, let’s get Monolog installed. It’s as simple as:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">composer require monolog/monolog</pre></div>
<p>That’s it! One line and you’re ready to roll. (If you’re new to Composer, check out the <a href="https://getcomposer.org/doc/00-intro.md" target="_blank" rel="noopener">getting started guide</a> first.)</p>
<h3 class="wp-block-heading">Basic Setup: Your First Debug Logger</h3>
<p>Here’s a simple setup to get you started:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">// Get Composer's autoloader in the mix
require __DIR__ . '/vendor/autoload.php';
// Bring in what we need from Monolog
use Monolog\Logger;
use Monolog\Handler\StreamHandler;
use Monolog\Processor\IntrospectionProcessor;
// Create our debug superhero
$logger = new Logger('debug');
// Tell it where to save the day (I mean, logs)
$logger--->pushHandler(new StreamHandler(__DIR__.'/logs/debug.log', Logger::DEBUG));
// Give it some extra powers (like knowing where the log came from)
$logger->pushProcessor(new IntrospectionProcessor());
// Now let's use it!
$logger->debug('Checking if user #123 is signed in', ['username' => 'bug_squasher']);</pre></div>
<p>This creates a logger that will capture all your debug info in a file and tell you exactly which line of code triggered each log. Pretty neat, right?</p>
<h2 class="wp-block-heading">Making the Most of Monolog</h2>
<h3 class="wp-block-heading">Log Levels: Choose Your Battle</h3>
<p>Monolog gives you <a href="https://github.com/Seldaek/monolog/blob/main/doc/01-usage.md#log-levels" target="_blank" rel="noopener">eight different log levels</a>, from “I’m just being chatty” to “EVERYTHING IS BROKEN!”:</p>
<ul class="wp-block-list">
<li><strong>DEBUG</strong>: “Hey, just FYI, this happened” (for development)</li>
<li><strong>INFO</strong>: “Something normal but noteworthy happened”</li>
<li><strong>NOTICE</strong>: “This is unusual but not worrying”</li>
<li><strong>WARNING</strong>: “This isn’t great but we’re still functioning”</li>
<li><strong>ERROR</strong>: “Houston, we have a problem”</li>
<li><strong>CRITICAL</strong>: “Major component down!”</li>
<li><strong>ALERT</strong>: “Someone needs to fix this NOW”</li>
<li><strong>EMERGENCY</strong>: “The building is on fire and everyone’s panicking”</li>
</ul>
<p>When you’re debugging, you’ll mostly use the first three levels, saving the scarier ones for actual problems. Here’s how you might use them:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">// When you're just being nosy about what's happening
$logger->debug('Here's what that variable contains', ['the_var' => $mysterious_variable]);
// When tracking normal application flow
$logger->info('User tried to log in', ['username' => $username]);
// When something's fishy but not broken
$logger->warning('That image upload failed, using the default instead', ['error' => $error]);</pre></div>
<h3 class="wp-block-heading">Context: The Secret Sauce</h3>
<p>Want to make your logs actually useful? Add context! Compare these two:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">// Boring and unhelpful
$logger->debug('Payment processed');
// Detailed and actually useful!
$logger->debug('Payment processed', [
'amount' => $amount,
'currency' => 'USD',
'customer_id' => $customer_id,
'payment_method' => $method,
'successful' => $success
]);</pre></div>
<p>See the difference? The second one tells you what’s actually going on. When you come back to these logs later (and trust me, you will), you’ll thank yourself for the extra details.</p>
<h2 class="wp-block-heading">Cool Monolog Tricks for Debugging</h2>
<h3 class="wp-block-heading">Rotating Log Files (So Your Disk Doesn’t Explode)</h3>
<p>Nobody wants a 10GB log file. Here’s how to create <a href="https://github.com/Seldaek/monolog/blob/main/src/Monolog/Handler/RotatingFileHandler.php" target="_blank" rel="noopener">daily logs that clean up after themselves</a>:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">use Monolog\Handler\RotatingFileHandler;
// Logs rotate daily and we keep a week's worth
$logger->pushHandler(new RotatingFileHandler(
__DIR__.'/logs/debug.log',
7, // days to keep
Logger::DEBUG
));</pre></div>
<h3 class="wp-block-heading">Browser Console Magic</h3>
<p>When working on frontend stuff, why not send debug info right to your browser’s console?</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">use Monolog\Handler\BrowserConsoleHandler;
// Only in development, obviously!
if (APP_ENV === 'dev') {
$logger->pushHandler(new BrowserConsoleHandler(Logger::DEBUG));
}</pre></div>
<h3 class="wp-block-heading">Wake-Me-Up Alerts</h3>
<p>For those “someone fix this now!” moments:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">use Monolog\Handler\NativeMailerHandler;
$logger->pushHandler(new NativeMailerHandler(
'you@example.com',
'<img src="https://s.w.org/images/core/emoji/15.1.0/72x72/1f525.png" alt="🔥" class="wp-smiley" style="height: 1em; max-height: 1em;" /> SITE ON FIRE <img src="https://s.w.org/images/core/emoji/15.1.0/72x72/1f525.png" alt="🔥" class="wp-smiley" style="height: 1em; max-height: 1em;" />',
'system@example.com',
Logger::CRITICAL
));</pre></div>
<h3 class="wp-block-heading">The Multi-Logger Approach</h3>
<p>Why settle for one logging method when you can have several? Here’s a setup that gives you the best of all worlds:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">// All the nitty-gritty details go here
$logger->pushHandler(new StreamHandler(__DIR__.'/logs/debug.log', Logger::DEBUG));
// Just the "hmm, that's interesting" stuff and above
$logger->pushHandler(new StreamHandler(__DIR__.'/logs/notice.log', Logger::NOTICE));
// Email me if something's actually broken
$logger->pushHandler(new NativeMailerHandler(
'dev@example.com',
'Site Error Alert',
'alerts@example.com',
Logger::ERROR
));</pre></div>
<h3 class="wp-block-heading">Automatic Context: Be Lazy (In a Good Way)</h3>
<p>Why manually add the same info to every log when you can <a href="https://github.com/Seldaek/monolog/blob/main/doc/02-handlers-formatters-processors.md#processors" target="_blank" rel="noopener">automate it</a>?</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">use Monolog\Processor\WebProcessor;
use Monolog\Processor\IntrospectionProcessor;
use Monolog\Processor\MemoryUsageProcessor;
// Add info about the web request
$logger->pushProcessor(new WebProcessor());
// Add file:line where the log happened
$logger->pushProcessor(new IntrospectionProcessor());
// See if your code is memory-hungry
$logger->pushProcessor(new MemoryUsageProcessor());</pre></div>
<p>Now every log entry automatically includes this info. It’s like having an assistant who fills in all the details you’d otherwise forget! Check out the <a href="https://github.com/Seldaek/monolog/tree/main/src/Monolog/Processor" target="_blank" rel="noopener">full list of available processors</a>.</p>
<h2 class="wp-block-heading">Wonolog: Monolog for WordPress Fans</h2>
<p>If you’re a WordPress developer, you might be thinking “This Monolog thing sounds great, but I work in WordPress-land!” Well, you’re in luck – that’s exactly where <a href="https://github.com/inpsyde/Wonolog" target="_blank" rel="noopener">Wonolog</a> comes in.</p>
<h3 class="wp-block-heading">What’s Wonolog All About?</h3>
<p>Wonolog is basically Monolog wearing a WordPress costume. It’s a special package that connects <a href="https://developer.wordpress.org/plugins/hooks/" target="_blank" rel="noopener">WordPress’s way of doing things</a> with Monolog’s powerful logging features. The team at <a href="https://inpsyde.com/" target="_blank" rel="noopener">Inpsyde</a> created it to let WordPress developers join the logging party.</p>
<p>The cool part? You don’t have to rewrite your WordPress code to use it. Wonolog listens for WordPress actions and hooks, then does the logging for you.</p>
<h2 class="wp-block-heading">Getting Wonolog Up and Running</h2>
<h3 class="wp-block-heading">Quick Install</h3>
<p>Just like Monolog, installation is a one-liner:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">composer require inpsyde/wonolog</pre></div>
<h3 class="wp-block-heading">Super Simple Setup</h3>
<p>Wonolog’s setup is ridiculously easy:</p>
<ol class="wp-block-list">
<li>Make sure <a href="https://developer.wordpress.org/advanced-administration/wordpress/composer/" target="_blank" rel="noopener">Composer’s autoloader is loaded early in WordPress</a></li>
<li>Create a super-simple <a href="https://developer.wordpress.org/plugins/must-use/" target="_blank" rel="noopener">must-use plugin</a> with this tiny code:</li>
</ol>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">// That's it. Seriously.
Inpsyde\Wonolog\bootstrap();</pre></div>
<p>Tada! You now have powerful logging for WordPress. Wonolog will create daily log files in <code>{WP_CONTENT_DIR}/wonolog/{Y/m/d}.log</code> – for example, <code>/wp-content/wonolog/2023/04/24.log</code>.</p>
<h3 class="wp-block-heading">What Gets Logged Automatically</h3>
<p>Wonolog is smart about what it logs based on your <code>WP_DEBUG_LOG</code> setting:</p>
<ul class="wp-block-list">
<li>If <code>WP_DEBUG_LOG</code> is <code>true</code>: “Log all the things!”</li>
<li>If <code>WP_DEBUG_LOG</code> is <code>false</code>: “Only log the scary stuff” (ERROR level and above)</li>
</ul>
<p>Right out of the box, Wonolog catches:</p>
<ul class="wp-block-list">
<li>PHP notices, warnings, and errors (oops!)</li>
<li>Exceptions that nobody caught (double oops!)</li>
<li>WordPress errors like database problems, HTTP API fails, wp_mail() issues, and those pesky 404s</li>
</ul>
<h2 class="wp-block-heading">WordPress-Style Debugging with Wonolog</h2>
<h3 class="wp-block-heading">The WordPress Way to Log</h3>
<p>The real magic of Wonolog is how it works with <a href="https://developer.wordpress.org/plugins/hooks/actions/" target="_blank" rel="noopener">WordPress’s action system</a>. Want to log something? Just do:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">// Simple debug log
do_action('wonolog.debug', 'Testing if shortcodes are working');
// With all the juicy details
do_action(
'wonolog.debug',
'User updated their profile',
[
'user_id' => $user->ID,
'fields_changed' => $changed_fields,
'came_from' => wp_get_referer()
]
);</pre></div>
<p>See how natural that feels in WordPress? No need to create logger objects or remember Monolog syntax – just use <a href="https://developer.wordpress.org/reference/functions/do_action/" target="_blank" rel="noopener">WordPress actions</a> like you normally would.</p>
<h3 class="wp-block-heading">Keeping Things Organized with Channels</h3>
<p>If you’re working on a bigger project, you’ll want to organize your logs. Wonolog lets you create custom channels:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">// In your e-commerce plugin
do_action(
'wonolog.log',
[
'level' => 'debug',
'message' => 'New order being processed',
'context' => ['order_id' => $order_id, 'total' => $total],
'channel' => 'my_shop_orders'
]
);</pre></div>
<p>Now all your shop order logs are grouped together, making it way easier to track down issues.</p>
<h3 class="wp-block-heading">WordPress-Specific Debugging</h3>
<p>Here are some cool tricks for debugging WordPress components:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">// See what database queries are running
add_action('query', function($query) {
do_action(
'wonolog.debug',
'SQL query executed',
[
'query' => $query,
'backtrace' => wp_debug_backtrace_summary()
],
'database'
);
});
// Track REST API activity
add_action('rest_api_init', function() {
add_filter('rest_pre_dispatch', function($result, $server, $request) {
do_action(
'wonolog.debug',
'REST API request received',
[
'endpoint' => $request->get_route(),
'method' => $request->get_method(),
'params' => $request->get_params()
],
'rest_api'
);
return $result;
}, 10, 3);
});</pre></div>
<h2 class="wp-block-heading">Taking Wonolog to the Next Level</h2>
<h3 class="wp-block-heading">Custom Log Files</h3>
<p>Want your logs somewhere specific? No problem:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">add_filter('wonolog.handler-factory', function($factory) {
// Create a custom handler for your plugin
$factory->addCustomFactory('my_plugin_handler', function(array $config) {
// Log to a specific file
return new StreamHandler(
WP_CONTENT_DIR . '/my-plugin/debug.log',
Logger::DEBUG
);
});
return $factory;
});
// Use your custom handler
add_filter('wonolog.default-hook-listeners', function($listeners) {
$listeners['debug']->useHandlers(['my_plugin_handler']);
return $listeners;
});</pre></div>
<h3 class="wp-block-heading">Different Logging for Different Environments</h3>
<p>You don’t want the same logging setup in development and production. Here’s how to adjust based on environment:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">add_filter('wonolog.bootstrap-config', function($config) {
// Check which environment we're in
if (defined('WP_ENV') && WP_ENV === 'development') {
// For development: log ALL the things!
$config['default_handlers']['minimum_level'] = Logger::DEBUG;
$config['use_buffer'] = false; // Log immediately
} elseif (defined('WP_ENV') && WP_ENV === 'staging') {
// For staging: be a bit more selective
$config['default_handlers']['minimum_level'] = Logger::INFO;
} else {
// For production: just the important stuff
$config['default_handlers']['minimum_level'] = Logger::WARNING;
}
return $config;
});</pre></div>
<h3 class="wp-block-heading">Auto-Magical WordPress Info</h3>
<p>Want to add WordPress-specific details to all your logs automatically? Here’s how:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">add_filter('wonolog.processor-factory', function($factory) {
// Create a processor that adds WP info
$factory->addCustomFactory('wp_debug_info', function() {
return function(array $record) {
// Add useful WordPress details
$record['extra']['wp_version'] = get_bloginfo('version');
$record['extra']['theme'] = wp_get_theme()->get('Name');
$record['extra']['active_plugins'] = count(get_option('active_plugins'));
$record['extra']['memory_used'] = size_format(memory_get_usage());
return $record;
};
});
return $factory;
});
// Use your custom processor
add_filter('wonolog.processor-record', function($processors) {
$processors[] = 'wp_debug_info';
return $processors;
});</pre></div>
<h2>Pro Tips for Debugging with Wonolog</h2>
<ol>
<li><strong>Dev vs Prod</strong>: Log everything in development, be picky in production</li>
<li><strong>Organize with Channels</strong>: Create separate channels for different parts of your site</li>
<li><strong>Context is King</strong>: Always include user IDs, post IDs, and other relevant data</li>
<li><strong>Be Specific with Levels</strong>: Don’t mark everything as ERROR – be honest about severity</li>
<li><strong>Log All the Things (in Development)</strong>: When building features, log liberally to understand what’s happening</li>
<li><strong>Keep Production Logs Clean</strong>: Nobody wants to sift through gigabytes of debug logs</li>
<li><strong>Think About Performance</strong>: In high-traffic sites, use <a href="https://github.com/inpsyde/Wonolog/blob/master/docs/05-wonolog-customization.md#buffer" target="_blank" rel="noopener">buffered logging</a> to reduce disk writes</li>
</ol>
<h2>Wrapping Up</h2>
<p>Monolog and Wonolog might sound like fancy technical tools, but they’re really just about making your life easier as a developer. Think of them as your debugging buddies – there to help you figure out what’s going wrong and why.</p>
<p>With <a href="https://seldaek.github.io/monolog/" target="_blank" rel="noopener">Monolog</a>, you get powerful, flexible logging for any PHP application. With <a href="https://inpsyde.github.io/Wonolog/" target="_blank" rel="noopener">Wonolog</a>, you get all that power in a WordPress-friendly package that just feels natural to use.</p>
<p>Start adding proper logging to your projects, and you’ll wonder how you ever lived without it. Trust me – your future self will thank you when you’re trying to track down that weird bug at 2 AM!</p>
<p>Want to learn more? Check out these resources:</p>
<ul>
<li><a href="https://github.com/Seldaek/monolog/blob/main/doc/01-usage.md" target="_blank" rel="noopener">Monolog Documentation</a></li>
<li><a href="https://inpsyde.github.io/Wonolog/docs/02-basic-wonolog-concepts.html" target="_blank" rel="noopener">Wonolog Concepts</a></li>
<li><a href="https://www.php-fig.org/psr/psr-3/" target="_blank" rel="noopener">PSR-3 Logger Interface</a></li>
<li><a href="https://codex.wordpress.org/Debugging_in_WordPress" target="_blank" rel="noopener">WordPress Debugging Guide</a></li>
</ul>
<p>Now go forth and log all the things (but maybe not in production)!</p>
]]></content:encoded>
<wfw:commentRss>https://portalzine.de/making-your-life-easier-debugging-with-monolog-and-wonolog-in-wordpress/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Day 29: Bugsink – Self-hosted Error Tracking – 7 Days of Docker</title>
<link>https://portalzine.de/day-29-bugsink-self-hosted-error-tracking-7-days-of-docker/</link>
<comments>https://portalzine.de/day-29-bugsink-self-hosted-error-tracking-7-days-of-docker/#respond</comments>
<dc:creator><![CDATA[]]></dc:creator>
<pubDate>Wed, 23 Apr 2025 11:34:24 +0000</pubDate>
<category><![CDATA[Development]]></category>
<category><![CDATA[Deployment]]></category>
<category><![CDATA[Docker]]></category>
<category><![CDATA[Hosting]]></category>
<category><![CDATA[Series Docker]]></category>
<guid isPermaLink="false">https://portalzine.de/?p=8441</guid>
<description><![CDATA[For the past several years, my error tracking journey has involved multiple platforms. Initially, I utilized Sentry in both their hosted service and self-hosted configurations. However, as Sentry’s pricing structure became prohibitively expensive and maintaining the self-hosted version proved resource-intensive. I transitioned to Glitchtip (Article about setting it up) approximately four years ago. Glitchtip has […]]]></description>
<content:encoded><![CDATA[
<p>For the past several years, my error tracking journey has involved multiple platforms. Initially, I utilized <a href="https://sentry.io/" target="_blank" rel="noopener">Sentry</a> in both their hosted service and self-hosted configurations. </p>
<p>However, as Sentry’s pricing structure became prohibitively expensive and maintaining the self-hosted version proved resource-intensive.</p>
<p>I transitioned to Glitchtip (<a href="https://portalzine.de/day-3-glitchtip-7-days-of-docker/">Article about setting it up</a>) approximately four years ago. Glitchtip has performed reliably overall, with only occasional REDIS-related crashes disrupting service. </p>
<p>Recently, I’ve become aware of <a href="https://www.bugsink.com/" target="_blank" rel="noopener">Bugsink</a>, an emerging competitor in the self-hosted error tracking space. They also offer a hosted service, at <a href="https://www.bugsink.com/#pricing" target="_blank" rel="noopener">competitive prices</a>. First impressions are solid, slim solution that concentrates on bug tracking … thank you!</p>
<h2 class="wp-block-heading">Prerequisites for self-hosting</h2>
<ul class="wp-block-list">
<li>A server with <a href="https://docs.docker.com/get-docker/" target="_blank" rel="noopener">Docker</a> and <a href="https://docs.docker.com/compose/install/" target="_blank" rel="noopener">Docker Compose</a> installed</li>
<li>Basic knowledge of Docker and Docker Compose</li>
<li>Terminal access to your server</li>
<li>Sufficient disk space for the MySQL database and event storage</li>
</ul>
<h2 class="wp-block-heading">Step 1: Get the Docker Compose Configuration</h2>
<p>1. Create a directory for your Bugsink installation:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">mkdir bugsink && cd bugsink</pre></div>
<p>2. Download the sample Docker Compose file from the Bugsink repository:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">curl -O https://raw.githubusercontent.com/bugsink/bugsink/main/compose-sample.yaml</pre></div>
<p>3. Rename it to <code>compose.yaml</code>:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">mv compose-sample.yaml compose.yaml</pre></div>
<h2 class="wp-block-heading">Step 2: Configure Your compose.yaml File</h2>
<p>Edit the <code>compose.yaml</code> file to customize your installation. Here’s the default configuration:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">services:
mysql:
image: mysql:latest
restart: unless-stopped
environment:
MYSQL_ROOT_PASSWORD: change_your_passwords_for_real_usage # TODO: Change this
MYSQL_DATABASE: bugsink
volumes:
- my-datavolume:/var/lib/mysql
healthcheck:
test: ["CMD-SHELL", "exit | mysql -h localhost -P 3306 -u root -p$$MYSQL_ROOT_PASSWORD" ]
interval: 1s
timeout: 20s
retries: 30
web:
image: bugsink/bugsink
depends_on:
mysql:
condition: service_healthy
restart: unless-stopped
ports:
- "8000:8000"
environment:
SECRET_KEY: django-insecure-RMLYThim9NybWgXiUGat32Aa0Qbgqscf4NPDQuZO2glcZPOiXn # Change this (and remove django-insecure prefix)
CREATE_SUPERUSER: admin:admin # Change this (or remove it and execute 'createsuperuser' against the running container)
PORT: 8000
DATABASE_URL: mysql://root:change_your_passwords_for_real_usage@mysql:3306/bugsink
healthcheck:
test: ["CMD-SHELL", "python -c 'import requests; requests.get(\"http://localhost:8000/\").raise_for_status()'"]
interval: 5s
timeout: 20s
retries: 10
volumes:
my-datavolume:</pre></div>
<h3 class="wp-block-heading">Important Security Settings to Change:</h3>
<ol class="wp-block-list">
<li><code>MYSQL_ROOT_PASSWORD</code>: Change to a secure password</li>
<li><code>SECRET_KEY</code>: Generate a secure key (e.g., <code>openssl rand -base64 50</code>) and remove the “django-insecure” prefix</li>
<li><code>CREATE_SUPERUSER</code>: Change to your desired admin username and password</li>
<li>Update <code>DATABASE_URL</code> to match your MySQL password</li>
</ol>
<h2 class="wp-block-heading">Step 3: Environment Variables by Group</h2>
<h3 class="wp-block-heading">Core Settings</h3>
<figure class="wp-block-table"><table class="mtr-table mtr-thead-th"><thead><tr><th data-mtr-content="Variable" class="mtr-th-tag"><div class="mtr-cell-content">Variable</div></th><th data-mtr-content="Description" class="mtr-th-tag"><div class="mtr-cell-content">Description</div></th><th data-mtr-content="Default" class="mtr-th-tag"><div class="mtr-cell-content">Default</div></th><th data-mtr-content="Example" class="mtr-th-tag"><div class="mtr-cell-content">Example</div></th></tr></thead><tbody><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>SECRET_KEY</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Secret key for cryptographic signing</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content">–</div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>openssl rand -base64 50</code></div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>PORT</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Port the webserver listens on</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content"><code>8000</code></div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>8000</code></div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>CREATE_SUPERUSER</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Create admin user on startup</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content">–</div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>admin:securepassword</code></div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>BASE_URL</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">URL where Bugsink is hosted</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content"><code>http://localhost:8000</code></div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>https://bugsink.yourdomain.com</code></div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>SITE_TITLE</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Custom site title</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content"><code>Bugsink</code></div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>Company Bugsink</code></div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>TIME_ZONE</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Default timezone</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content"><code>UTC</code></div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>America/New_York</code></div></td></tr></tbody></table></figure>
<h3 class="wp-block-heading">Database Settings</h3>
<figure class="wp-block-table"><table class="mtr-table mtr-thead-th"><thead><tr><th data-mtr-content="Variable" class="mtr-th-tag"><div class="mtr-cell-content">Variable</div></th><th data-mtr-content="Description" class="mtr-th-tag"><div class="mtr-cell-content">Description</div></th><th data-mtr-content="Default" class="mtr-th-tag"><div class="mtr-cell-content">Default</div></th><th data-mtr-content="Example" class="mtr-th-tag"><div class="mtr-cell-content">Example</div></th></tr></thead><tbody><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>DATABASE_URL</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Database connection string</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content">–</div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>mysql://user:password@mysql:3306/bugsink</code></div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>MYSQL_ROOT_PASSWORD</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">MySQL root password</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content">–</div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>your-secure-password</code></div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>MYSQL_DATABASE</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">MySQL database name</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content"><code>bugsink</code></div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>bugsink</code></div></td></tr></tbody></table></figure>
<h3 class="wp-block-heading">Proxy and HTTPS Settings</h3>
<figure class="wp-block-table"><table class="mtr-table mtr-thead-th"><thead><tr><th data-mtr-content="Variable" class="mtr-th-tag"><div class="mtr-cell-content">Variable</div></th><th data-mtr-content="Description" class="mtr-th-tag"><div class="mtr-cell-content">Description</div></th><th data-mtr-content="Default" class="mtr-th-tag"><div class="mtr-cell-content">Default</div></th><th data-mtr-content="Example" class="mtr-th-tag"><div class="mtr-cell-content">Example</div></th></tr></thead><tbody><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>BEHIND_HTTPS_PROXY</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Whether Bugsink is behind HTTPS proxy</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content"><code>False</code></div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>True</code></div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>SECURE_PROXY_SSL_HEADER</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">SSL header configuration</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content">–</div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>('HTTP_X_FORWARDED_PROTO', 'https')</code></div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>SESSION_COOKIE_SECURE</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Use secure cookies</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content"><code>False</code></div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>True</code></div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>CSRF_COOKIE_SECURE</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Use secure CSRF cookies</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content"><code>False</code></div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>True</code></div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>USE_X_REAL_IP</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Use X-Real-IP header</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content"><code>False</code></div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>True</code></div></td></tr></tbody></table></figure>
<h3 class="wp-block-heading">Email Settings</h3>
<figure class="wp-block-table"><table class="mtr-table mtr-thead-th"><thead><tr><th data-mtr-content="Variable" class="mtr-th-tag"><div class="mtr-cell-content">Variable</div></th><th data-mtr-content="Description" class="mtr-th-tag"><div class="mtr-cell-content">Description</div></th><th data-mtr-content="Default" class="mtr-th-tag"><div class="mtr-cell-content">Default</div></th><th data-mtr-content="Example" class="mtr-th-tag"><div class="mtr-cell-content">Example</div></th></tr></thead><tbody><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>EMAIL_HOST</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">SMTP host</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content">–</div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>smtp.example.com</code></div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>EMAIL_HOST_USER</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">SMTP username</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content">–</div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>user@example.com</code></div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>EMAIL_HOST_PASSWORD</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">SMTP password</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content">–</div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>your-password</code></div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>EMAIL_PORT</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">SMTP port</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content"><code>587</code></div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>587</code></div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>EMAIL_USE_TLS</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Use TLS for email</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content"><code>True</code></div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>True</code></div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>EMAIL_USE_SSL</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Use SSL for email</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content"><code>False</code></div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>False</code></div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>DEFAULT_FROM_EMAIL</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Default sender email</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content"><code>Bugsink <bugsink></bugsink></code></div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>Bugsink <alerts></alerts></code></div></td></tr></tbody></table></figure>
<h3 class="wp-block-heading">User and Team Settings</h3>
<figure class="wp-block-table"><table class="mtr-table mtr-thead-th"><thead><tr><th data-mtr-content="Variable" class="mtr-th-tag"><div class="mtr-cell-content">Variable</div></th><th data-mtr-content="Description" class="mtr-th-tag"><div class="mtr-cell-content">Description</div></th><th data-mtr-content="Default" class="mtr-th-tag"><div class="mtr-cell-content">Default</div></th><th data-mtr-content="Example" class="mtr-th-tag"><div class="mtr-cell-content">Example</div></th></tr></thead><tbody><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>SINGLE_USER</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Disable multi-user functionality</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content"><code>False</code></div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>True</code></div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>SINGLE_TEAM</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Disable multi-team functionality</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content"><code>False</code></div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>True</code></div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>USER_REGISTRATION</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Control user registration</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content">–</div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>CB_ADMINS</code></div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>USER_REGISTRATION_VERIFY_EMAIL</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Require email verification</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content"><code>False</code></div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>True</code></div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>TEAM_CREATION</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Control team creation</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content">–</div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>CB_ADMINS</code></div></td></tr></tbody></table></figure>
<h3 class="wp-block-heading">Rate Limiting and Resource Settings</h3>
<figure class="wp-block-table"><table class="mtr-table mtr-thead-th"><thead><tr><th data-mtr-content="Variable" class="mtr-th-tag"><div class="mtr-cell-content">Variable</div></th><th data-mtr-content="Description" class="mtr-th-tag"><div class="mtr-cell-content">Description</div></th><th data-mtr-content="Default" class="mtr-th-tag"><div class="mtr-cell-content">Default</div></th><th data-mtr-content="Example" class="mtr-th-tag"><div class="mtr-cell-content">Example</div></th></tr></thead><tbody><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>MAX_EVENT_SIZE</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Maximum event size</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content"><code>1048576</code> (1MB)</div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>2097152</code> (2MB)</div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>MAX_ENVELOPE_SIZE</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Maximum envelope size</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content"><code>104857600</code> (100MB)</div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>104857600</code></div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>MAX_EVENTS_PER_PROJECT_PER_5_MINUTES</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">5-minute rate limit</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content"><code>1000</code></div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>5000</code></div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>MAX_EVENTS_PER_PROJECT_PER_HOUR</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Hourly rate limit</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content"><code>5000</code></div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>20000</code></div></td></tr></tbody></table></figure>
<h3 class="wp-block-heading">Event Storage Settings</h3>
<figure class="wp-block-table"><table class="mtr-table mtr-thead-th"><thead><tr><th data-mtr-content="Variable" class="mtr-th-tag"><div class="mtr-cell-content">Variable</div></th><th data-mtr-content="Description" class="mtr-th-tag"><div class="mtr-cell-content">Description</div></th><th data-mtr-content="Default" class="mtr-th-tag"><div class="mtr-cell-content">Default</div></th><th data-mtr-content="Example" class="mtr-th-tag"><div class="mtr-cell-content">Example</div></th></tr></thead><tbody><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>FILE_EVENT_STORAGE_PATH</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Path for file event storage</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content">–</div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>/app/event_storage</code></div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>FILE_EVENT_STORAGE_USE_FOR_WRITE</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Enable file storage</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content"><code>False</code></div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>True</code></div></td></tr></tbody></table></figure>
<h3 class="wp-block-heading">Background Worker Settings</h3>
<figure class="wp-block-table"><table class="mtr-table mtr-thead-th"><thead><tr><th data-mtr-content="Variable" class="mtr-th-tag"><div class="mtr-cell-content">Variable</div></th><th data-mtr-content="Description" class="mtr-th-tag"><div class="mtr-cell-content">Description</div></th><th data-mtr-content="Default" class="mtr-th-tag"><div class="mtr-cell-content">Default</div></th><th data-mtr-content="Example" class="mtr-th-tag"><div class="mtr-cell-content">Example</div></th></tr></thead><tbody><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>DIGEST_IMMEDIATELY</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Process events immediately</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content"><code>True</code></div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>False</code></div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>TASK_ALWAYS_EAGER</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Run tasks inline</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content"><code>True</code></div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>False</code></div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content"><code>SNAPPEA_NUM_WORKERS</code></div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Number of worker threads</div></td><td data-mtr-content="Default" class="mtr-td-tag"><div class="mtr-cell-content"><code>2</code></div></td><td data-mtr-content="Example" class="mtr-td-tag"><div class="mtr-cell-content"><code>4</code></div></td></tr></tbody></table></figure>
<h2 class="wp-block-heading">Step 4: Start the Bugsink Server</h2>
<p>1. Launch the services:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">docker compose up -d</pre></div>
<p>2. Check if the services are running:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">docker compose ps</pre></div>
<p>3. Check the logs for any issues:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">docker compose logs</pre></div>
<p>4. Access your Bugsink instance at http://your-server-ip:8000/ and log in with the credentials specified in <code>CREATE_SUPERUSER</code>.</p>
<h2 class="wp-block-heading">Step 5: Setting Up a Reverse Proxy for Production (Recommended)</h2>
<p>For production environments, it’s strongly recommended to use a reverse proxy like <a href="https://nginx.org/" target="_blank" rel="noopener">Nginx</a>. Here’s a basic Nginx configuration:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">server {
listen 80;
server_name bugsink.yourdomain.com;
location / {
proxy_pass http://localhost:8000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}</pre></div>
<p>With SSL (recommended):</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">server {
listen 443 ssl;
server_name bugsink.yourdomain.com;
ssl_certificate /path/to/cert.pem;
ssl_certificate_key /path/to/key.pem;
location / {
proxy_pass http://localhost:8000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
server {
listen 80;
server_name bugsink.yourdomain.com;
return 301 https://$host$request_uri;
}</pre></div>
<p>Remember to set <code>BEHIND_HTTPS_PROXY: "True"</code> in your Docker Compose configuration when using HTTPS.</p>
<h2 class="wp-block-heading">Step 6: Event Storage Configuration (Optional)</h2>
<p>By default, Bugsink stores events in the database. For larger installations, you might want to use file-based storage:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">environment:
# Existing variables...
# File event storage
FILE_EVENT_STORAGE_PATH: "/app/event_storage"
FILE_EVENT_STORAGE_USE_FOR_WRITE: "True"</pre></div>
<p>Add a volume mount to persist the event storage:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">volumes:
- event-storage:/app/event_storage
# And add this to the volumes section
volumes:
my-datavolume:
event-storage:</pre></div>
<h2 class="wp-block-heading">Useful Links</h2>
<ul class="wp-block-list">
<li><a href="https://www.bugsink.com/" target="_blank" rel="noopener">Bugsink Official Website</a></li>
<li><a href="https://www.bugsink.com/docs/installation/" target="_blank" rel="noopener">Bugsink Documentation</a></li>
<li><a href="https://www.youtube.com/watch?v=dwh5sPOTn-U" target="_blank" rel="noopener">Bugsink Youtube Introduction</a></li>
<li><a href="https://www.bugsink.com/docs/docker-compose-install/" target="_blank" rel="noopener">Docker Compose Install Guide</a></li>
<li><a href="https://www.bugsink.com/docs/settings/" target="_blank" rel="noopener">Bugsink Settings Reference</a></li>
<li><a href="https://github.com/bugsink/bugsink" target="_blank" rel="noopener">Bugsink GitHub Repository</a></li>
<li><a href="https://discord.gg/bugsink" target="_blank" rel="noopener">Bugsink Discord Community</a></li>
<li><a href="https://docs.docker.com/" target="_blank" rel="noopener">Docker Documentation</a></li>
<li><a href="https://docs.docker.com/compose/" target="_blank" rel="noopener">Docker Compose Documentation</a></li>
<li><a href="https://nginx.org/en/docs/" target="_blank" rel="noopener">Nginx Documentation</a></li>
<li><a href="https://dev.mysql.com/doc/" target="_blank" rel="noopener">MySQL Documentation</a></li>
</ul>
<h2 class="wp-block-heading">Comparison: Sentry vs GlitchTip vs Bugsink</h2>
<h3 class="wp-block-heading">Overview</h3>
<figure class="wp-block-table"><table class="has-fixed-layout mtr-table mtr-thead-th"><thead><tr><th data-mtr-content="Platform" class="mtr-th-tag"><div class="mtr-cell-content">Platform</div></th><th data-mtr-content="Description" class="mtr-th-tag"><div class="mtr-cell-content">Description</div></th><th data-mtr-content="Philosophy" class="mtr-th-tag"><div class="mtr-cell-content">Philosophy</div></th><th data-mtr-content="Target Audience" class="mtr-th-tag"><div class="mtr-cell-content">Target Audience</div></th></tr></thead><tbody><tr><td data-mtr-content="Platform" class="mtr-td-tag"><div class="mtr-cell-content">Sentry</div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Comprehensive monitoring platform with robust features</div></td><td data-mtr-content="Philosophy" class="mtr-td-tag"><div class="mtr-cell-content">Full-featured monitoring solution beyond error tracking</div></td><td data-mtr-content="Target Audience" class="mtr-td-tag"><div class="mtr-cell-content">From small teams to large enterprises</div></td></tr><tr><td data-mtr-content="Platform" class="mtr-td-tag"><div class="mtr-cell-content">GlitchTip</div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Open-source alternative compatible with Sentry SDKs</div></td><td data-mtr-content="Philosophy" class="mtr-td-tag"><div class="mtr-cell-content">Simpler, more affordable Sentry alternative</div></td><td data-mtr-content="Target Audience" class="mtr-td-tag"><div class="mtr-cell-content">Teams seeking cost-effective monitoring</div></td></tr><tr><td data-mtr-content="Platform" class="mtr-td-tag"><div class="mtr-cell-content">Bugsink</div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Focused error tracking with emphasis on self-hosting</div></td><td data-mtr-content="Philosophy" class="mtr-td-tag"><div class="mtr-cell-content">Streamlined, specialized error tracking</div></td><td data-mtr-content="Target Audience" class="mtr-td-tag"><div class="mtr-cell-content">Developers prioritizing simplicity, control, and predictable costs</div></td></tr></tbody></table></figure>
<h3 class="wp-block-heading">Feature Comparison</h3>
<figure class="wp-block-table"><table class="has-fixed-layout mtr-table mtr-thead-th"><thead><tr><th data-mtr-content="Feature" class="mtr-th-tag"><div class="mtr-cell-content">Feature</div></th><th data-mtr-content="Sentry" class="mtr-th-tag"><div class="mtr-cell-content">Sentry</div></th><th data-mtr-content="GlitchTip" class="mtr-th-tag"><div class="mtr-cell-content">GlitchTip</div></th><th data-mtr-content="Bugsink" class="mtr-th-tag"><div class="mtr-cell-content">Bugsink</div></th></tr></thead><tbody><tr><td data-mtr-content="Feature" class="mtr-td-tag"><div class="mtr-cell-content">Error Tracking</div></td><td data-mtr-content="Sentry" class="mtr-td-tag"><div class="mtr-cell-content">Yes (Advanced)</div></td><td data-mtr-content="GlitchTip" class="mtr-td-tag"><div class="mtr-cell-content">Yes (Compatible with Sentry)</div></td><td data-mtr-content="Bugsink" class="mtr-td-tag"><div class="mtr-cell-content">Yes (Core focus)</div></td></tr><tr><td data-mtr-content="Feature" class="mtr-td-tag"><div class="mtr-cell-content">Performance Monitoring</div></td><td data-mtr-content="Sentry" class="mtr-td-tag"><div class="mtr-cell-content">Yes (Comprehensive)</div></td><td data-mtr-content="GlitchTip" class="mtr-td-tag"><div class="mtr-cell-content">Yes (Basic)</div></td><td data-mtr-content="Bugsink" class="mtr-td-tag"><div class="mtr-cell-content">No (Not a focus)</div></td></tr><tr><td data-mtr-content="Feature" class="mtr-td-tag"><div class="mtr-cell-content">Uptime Monitoring</div></td><td data-mtr-content="Sentry" class="mtr-td-tag"><div class="mtr-cell-content">Yes</div></td><td data-mtr-content="GlitchTip" class="mtr-td-tag"><div class="mtr-cell-content">Yes</div></td><td data-mtr-content="Bugsink" class="mtr-td-tag"><div class="mtr-cell-content">No</div></td></tr><tr><td data-mtr-content="Feature" class="mtr-td-tag"><div class="mtr-cell-content">Session Replay</div></td><td data-mtr-content="Sentry" class="mtr-td-tag"><div class="mtr-cell-content">Yes</div></td><td data-mtr-content="GlitchTip" class="mtr-td-tag"><div class="mtr-cell-content">No</div></td><td data-mtr-content="Bugsink" class="mtr-td-tag"><div class="mtr-cell-content">No</div></td></tr><tr><td data-mtr-content="Feature" class="mtr-td-tag"><div class="mtr-cell-content">Profiling</div></td><td data-mtr-content="Sentry" class="mtr-td-tag"><div class="mtr-cell-content">Yes (UI & Continuous)</div></td><td data-mtr-content="GlitchTip" class="mtr-td-tag"><div class="mtr-cell-content">No</div></td><td data-mtr-content="Bugsink" class="mtr-td-tag"><div class="mtr-cell-content">No</div></td></tr><tr><td data-mtr-content="Feature" class="mtr-td-tag"><div class="mtr-cell-content">Cron Monitoring</div></td><td data-mtr-content="Sentry" class="mtr-td-tag"><div class="mtr-cell-content">Yes</div></td><td data-mtr-content="GlitchTip" class="mtr-td-tag"><div class="mtr-cell-content">No</div></td><td data-mtr-content="Bugsink" class="mtr-td-tag"><div class="mtr-cell-content">No</div></td></tr><tr><td data-mtr-content="Feature" class="mtr-td-tag"><div class="mtr-cell-content">Custom Dashboards</div></td><td data-mtr-content="Sentry" class="mtr-td-tag"><div class="mtr-cell-content">Yes (Business+)</div></td><td data-mtr-content="GlitchTip" class="mtr-td-tag"><div class="mtr-cell-content">No</div></td><td data-mtr-content="Bugsink" class="mtr-td-tag"><div class="mtr-cell-content">No</div></td></tr><tr><td data-mtr-content="Feature" class="mtr-td-tag"><div class="mtr-cell-content">Unlimited Projects</div></td><td data-mtr-content="Sentry" class="mtr-td-tag"><div class="mtr-cell-content">Yes</div></td><td data-mtr-content="GlitchTip" class="mtr-td-tag"><div class="mtr-cell-content">Yes</div></td><td data-mtr-content="Bugsink" class="mtr-td-tag"><div class="mtr-cell-content">Yes</div></td></tr><tr><td data-mtr-content="Feature" class="mtr-td-tag"><div class="mtr-cell-content">Unlimited Team Members</div></td><td data-mtr-content="Sentry" class="mtr-td-tag"><div class="mtr-cell-content">Yes (Team+)</div></td><td data-mtr-content="GlitchTip" class="mtr-td-tag"><div class="mtr-cell-content">Yes</div></td><td data-mtr-content="Bugsink" class="mtr-td-tag"><div class="mtr-cell-content">Yes (Self-hosted)</div></td></tr></tbody></table></figure>
<h3 class="wp-block-heading">Deployment Options</h3>
<figure class="wp-block-table"><table class="has-fixed-layout mtr-table mtr-thead-th"><thead><tr><th data-mtr-content="Platform" class="mtr-th-tag"><div class="mtr-cell-content">Platform</div></th><th data-mtr-content="Self-Hosted" class="mtr-th-tag"><div class="mtr-cell-content">Self-Hosted</div></th><th data-mtr-content="Cloud-Hosted" class="mtr-th-tag"><div class="mtr-cell-content">Cloud-Hosted</div></th><th data-mtr-content="Installation Complexity" class="mtr-th-tag"><div class="mtr-cell-content">Installation Complexity</div></th></tr></thead><tbody><tr><td data-mtr-content="Platform" class="mtr-td-tag"><div class="mtr-cell-content">Sentry</div></td><td data-mtr-content="Self-Hosted" class="mtr-td-tag"><div class="mtr-cell-content">Yes (Discouraged)</div></td><td data-mtr-content="Cloud-Hosted" class="mtr-td-tag"><div class="mtr-cell-content">Yes (Primary)</div></td><td data-mtr-content="Installation Complexity" class="mtr-td-tag"><div class="mtr-cell-content">Complex (Difficult & Demanding)</div></td></tr><tr><td data-mtr-content="Platform" class="mtr-td-tag"><div class="mtr-cell-content">GlitchTip</div></td><td data-mtr-content="Self-Hosted" class="mtr-td-tag"><div class="mtr-cell-content">Yes</div></td><td data-mtr-content="Cloud-Hosted" class="mtr-td-tag"><div class="mtr-cell-content">Yes</div></td><td data-mtr-content="Installation Complexity" class="mtr-td-tag"><div class="mtr-cell-content">Moderate ( Pretty Easy)</div></td></tr><tr><td data-mtr-content="Platform" class="mtr-td-tag"><div class="mtr-cell-content">Bugsink</div></td><td data-mtr-content="Self-Hosted" class="mtr-td-tag"><div class="mtr-cell-content">Yes (Primary)</div></td><td data-mtr-content="Cloud-Hosted" class="mtr-td-tag"><div class="mtr-cell-content">Yes (Managed)</div></td><td data-mtr-content="Installation Complexity" class="mtr-td-tag"><div class="mtr-cell-content">Simple (30-second claim)</div></td></tr></tbody></table></figure>
<h3 class="wp-block-heading">Pricing</h3>
<figure class="wp-block-table"><table class="has-fixed-layout mtr-table mtr-thead-th"><thead><tr><th data-mtr-content="Platform" class="mtr-th-tag"><div class="mtr-cell-content">Platform</div></th><th data-mtr-content="Free Tier" class="mtr-th-tag"><div class="mtr-cell-content">Free Tier</div></th><th data-mtr-content="Paid Plans" class="mtr-th-tag"><div class="mtr-cell-content">Paid Plans</div></th><th data-mtr-content="Pricing Model" class="mtr-th-tag"><div class="mtr-cell-content">Pricing Model</div></th></tr></thead><tbody><tr><td data-mtr-content="Platform" class="mtr-td-tag"><div class="mtr-cell-content">Sentry</div></td><td data-mtr-content="Free Tier" class="mtr-td-tag"><div class="mtr-cell-content">Developer: 1 user, 5K errors</div></td><td data-mtr-content="Paid Plans" class="mtr-td-tag"><div class="mtr-cell-content">• Team: $26/mo (50K errors)<br>• Business: $80/mo (50K errors)<br>• Enterprise: Custom</div></td><td data-mtr-content="Pricing Model" class="mtr-td-tag"><div class="mtr-cell-content">Managed: Event-based<br>Self-hosed: Free </div></td></tr><tr><td data-mtr-content="Platform" class="mtr-td-tag"><div class="mtr-cell-content">GlitchTip</div></td><td data-mtr-content="Free Tier" class="mtr-td-tag"><div class="mtr-cell-content">1K events/month</div></td><td data-mtr-content="Paid Plans" class="mtr-td-tag"><div class="mtr-cell-content">• Small: $15/mo (100K events)<br>• Medium: $50/mo (500K events)<br>• Large: $250/mo (3M events)</div></td><td data-mtr-content="Pricing Model" class="mtr-td-tag"><div class="mtr-cell-content">Managed:Event-based<br>Self-hosted: Free </div></td></tr><tr><td data-mtr-content="Platform" class="mtr-td-tag"><div class="mtr-cell-content">Bugsink</div></td><td data-mtr-content="Free Tier" class="mtr-td-tag"><div class="mtr-cell-content">• Self-hosted: Free<br>• Single Developer: Free (5K events)</div></td><td data-mtr-content="Paid Plans" class="mtr-td-tag"><div class="mtr-cell-content">• Team: €15/mo (50K events)<br>• Enterprise: Custom</div></td><td data-mtr-content="Pricing Model" class="mtr-td-tag"><div class="mtr-cell-content">Self-hosted: Free<br>Managed: User-based+events<br><a href="https://www.bugsink.com/blog/new-license-new-pricing/" target="_blank" rel="noopener">License Info</a></div></td></tr></tbody></table></figure>
<h3 class="wp-block-heading">Technical Aspects</h3>
<figure class="wp-block-table"><table class="has-fixed-layout mtr-table mtr-thead-th"><thead><tr><th data-mtr-content="Aspect" class="mtr-th-tag"><div class="mtr-cell-content">Aspect</div></th><th data-mtr-content="Sentry" class="mtr-th-tag"><div class="mtr-cell-content">Sentry</div></th><th data-mtr-content="GlitchTip" class="mtr-th-tag"><div class="mtr-cell-content">GlitchTip</div></th><th data-mtr-content="Bugsink" class="mtr-th-tag"><div class="mtr-cell-content">Bugsink</div></th></tr></thead><tbody><tr><td data-mtr-content="Aspect" class="mtr-td-tag"><div class="mtr-cell-content">SDK Compatibility</div></td><td data-mtr-content="Sentry" class="mtr-td-tag"><div class="mtr-cell-content">Native SDKs for multiple languages</div></td><td data-mtr-content="GlitchTip" class="mtr-td-tag"><div class="mtr-cell-content">Uses Sentry’s open-source SDKs</div></td><td data-mtr-content="Bugsink" class="mtr-td-tag"><div class="mtr-cell-content">Compatible with Sentry SDKs</div></td></tr><tr><td data-mtr-content="Aspect" class="mtr-td-tag"><div class="mtr-cell-content">Scalability</div></td><td data-mtr-content="Sentry" class="mtr-td-tag"><div class="mtr-cell-content">Enterprise-grade</div></td><td data-mtr-content="GlitchTip" class="mtr-td-tag"><div class="mtr-cell-content">Limited information</div></td><td data-mtr-content="Bugsink" class="mtr-td-tag"><div class="mtr-cell-content">Claims to handle millions of events on minimal hardware</div></td></tr><tr><td data-mtr-content="Aspect" class="mtr-td-tag"><div class="mtr-cell-content">Open-Source Status</div></td><td data-mtr-content="Sentry" class="mtr-td-tag"><div class="mtr-cell-content">Open-source core with commercial offerings</div></td><td data-mtr-content="GlitchTip" class="mtr-td-tag"><div class="mtr-cell-content">Fully open-source</div></td><td data-mtr-content="Bugsink" class="mtr-td-tag"><div class="mtr-cell-content">Source-available proprietary</div></td></tr><tr><td data-mtr-content="Aspect" class="mtr-td-tag"><div class="mtr-cell-content">Data Control</div></td><td data-mtr-content="Sentry" class="mtr-td-tag"><div class="mtr-cell-content">Limited in cloud version</div></td><td data-mtr-content="GlitchTip" class="mtr-td-tag"><div class="mtr-cell-content">Better in self-hosted</div></td><td data-mtr-content="Bugsink" class="mtr-td-tag"><div class="mtr-cell-content">Full control with self-hosted</div></td></tr></tbody></table></figure>
<h3 class="wp-block-heading">Which Platform Is Right For You?</h3>
<h4 class="wp-block-heading">Sentry is best for:</h4>
<ul class="wp-block-list">
<li>Teams needing comprehensive monitoring beyond error tracking</li>
<li>Organizations requiring enterprise-grade features</li>
<li>Users who prefer a mature, fully-featured cloud solution</li>
</ul>
<h4 class="wp-block-heading">GlitchTip is best for:</h4>
<ul class="wp-block-list">
<li>Teams looking for a more affordable Sentry alternative</li>
<li>Organizations that value open-source software</li>
<li>Users who want unlimited team members at a lower price point</li>
</ul>
<h4 class="wp-block-heading">Bugsink is best for:</h4>
<ul class="wp-block-list">
<li>Developers focused specifically on error tracking</li>
<li>Teams wanting complete data control through self-hosting</li>
<li>Organizations seeking simple setup and predictable costs</li>
<li>Users who want to avoid event-based pricing models for self-hosted deployments</li>
</ul>
<h3 class="wp-block-heading">Conclusion</h3>
<p>When choosing an error monitoring platform, consider your specific needs, team size, budget, and technical requirements. Sentry provides a robust, feature-rich solution suitable for enterprise environments. GlitchTip offers a cost-effective, open-source alternative with balanced capabilities. Bugsink focuses on simplicity and self-hosting with predictable costs. <strong>Also see my comments at the start of the article ;)</strong></p>
<p>
The ideal platform depends on your priorities: comprehensive features (Sentry), cost-effectiveness with decent features (GlitchTip), or simplicity with full control (Bugsink). Each has its strengths, making them suitable for different development environments and organizational requirements.
</p>
<h3 class="wp-block-heading">Sources</h3>
<ul class="wp-block-list">
<li><a href="https://sentry.io/pricing/" target="_blank" rel="noopener">Sentry Pricing Page</a></li>
<li><a href="https://glitchtip.com/" target="_blank" rel="noopener">GlitchTip Official Website</a></li>
<li><a href="https://www.bugsink.com/" target="_blank" rel="noopener">Bugsink Official Website</a></li>
<li><a href="https://www.bugsink.com/sentry-vs-bugsink/" target="_blank" rel="noopener">Sentry vs. Bugsink Comparison</a></li>
</ul>
]]></content:encoded>
<wfw:commentRss>https://portalzine.de/day-29-bugsink-self-hosted-error-tracking-7-days-of-docker/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Day 28: FrankenWP – FrankePHP + WordPress – 7 Days of Docker</title>
<link>https://portalzine.de/day-28-frankenwp-frankephp-wordpress-7-days-of-docker/</link>
<comments>https://portalzine.de/day-28-frankenwp-frankephp-wordpress-7-days-of-docker/#respond</comments>
<dc:creator><![CDATA[]]></dc:creator>
<pubDate>Tue, 22 Apr 2025 10:26:00 +0000</pubDate>
<category><![CDATA[Development]]></category>
<category><![CDATA[Deployment]]></category>
<category><![CDATA[Docker]]></category>
<category><![CDATA[Hosting]]></category>
<category><![CDATA[WordPress]]></category>
<category><![CDATA[Series Docker]]></category>
<guid isPermaLink="false">https://portalzine.de/?p=8437</guid>
<description><![CDATA[FrankenWP is a specialized WordPress Docker image built on FrankenPHP, which is a PHP application server built on top of the Caddy web server. This combination offers several advantages: This guide will walk you through setting up FrankenWP on your own server using Docker Compose, including all necessary configuration options and client connection details. Also […]]]></description>
<content:encoded><![CDATA[
<p><a href="https://github.com/StephenMiracle/frankenwp" target="_blank" rel="noopener">FrankenWP</a> is a specialized WordPress Docker image built on <a href="https://frankenphp.dev/" target="_blank" rel="noopener">FrankenPHP</a>, which is a PHP application server built on top of the <a href="https://caddyserver.com/" target="_blank" rel="noopener">Caddy web server</a>. This combination offers several advantages:</p>
<ul class="wp-block-list">
<li>Single Docker image for WordPress that includes built-in distributed server caching</li>
<li>Uses Souin & Caddy server for performance comparable to PHP-FPM + fastcgi</li>
<li>Simplified deployment with a single container instead of separate web server and PHP containers</li>
<li>Ability to mount server cache on multiple autoscaled servers</li>
</ul>
<p>This guide will walk you through setting up FrankenWP on your own server using Docker Compose, including all necessary configuration options and client connection details.</p>
<p>Also see <a href="https://portalzine.de/frankenphp-in-2025-the-zombie-app-server-that-brought-php-back-from-the-dead/">my article about FrankenPHP</a> and using it under WSL2 on Windows as a development environment.</p>
<h2 class="wp-block-heading">Prerequisites</h2>
<ul class="wp-block-list">
<li>A server with <a href="https://docs.docker.com/engine/install/" target="_blank" rel="noopener">Docker</a> and <a href="https://docs.docker.com/compose/install/" target="_blank" rel="noopener">Docker Compose</a> installed</li>
<li>Basic knowledge of Docker and Docker Compose</li>
<li>Basic understanding of <a href="https://wordpress.org/documentation/" target="_blank" rel="noopener">WordPress configuration</a></li>
<li>Access to your server via SSH or other remote management tools</li>
</ul>
<h2 class="wp-block-heading" id="setup">Setting Up the Docker Compose Environment</h2>
<h3 class="wp-block-heading">1. Create a Project Directory</h3>
<p>First, create a directory for your FrankenWP project:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">mkdir frankenwp-project
cd frankenwp-project</pre></div>
<h3 class="wp-block-heading">2. Create the Docker Compose File</h3>
<p>Create a <code>compose.yaml</code> file in your project directory:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">services:
wordpress:
image: stephenmiracle/frankenwp:latest
restart: always
ports:
- "8094:80" # HTTP
# - "80:80" # HTTP
# - "443:443" # HTTPS
# - "443:443/udp" # HTTP/3
environment:
SERVER_NAME: ${SERVER_NAME:-:80}
WORDPRESS_DB_HOST: ${DB_HOST:-db}
WORDPRESS_DB_USER: ${DB_USER:-exampleuser}
WORDPRESS_DB_PASSWORD: ${DB_PASSWORD:-examplepass}
WORDPRESS_DB_NAME: ${DB_NAME:-exampledb}
WORDPRESS_DEBUG: ${WP_DEBUG:-true}
WORDPRESS_TABLE_PREFIX: ${DB_TABLE_PREFIX:-wp_}
CACHE_AGE: ${CACHE_AGE:-8000}
STATIC_CACHE_AGE: ${STATIC_CACHE_AGE:-8000}
CADDY_GLOBAL_OPTIONS: |
email myemail@sample.com
auto_https disable_redirects
debug
# WORDPRESS_CONFIG_EXTRA: |
# define('WP_SITEURL', '');
# define('WP_HOME', '');
volumes:
- ./wp-content:/var/www/html/wp-content
depends_on:
- db
tty: true
db:
image: mariadb:latest
restart: always
ports:
- ${LOCAL_DB_PORT:-3309}:3306
environment:
MYSQL_DATABASE: ${DB_NAME:-exampledb}
MYSQL_USER: ${DB_USER:-exampleuser}
MYSQL_PASSWORD: ${DB_PASSWORD:-examplepass}
MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD:-examplepass}
volumes:
- wpdbv:/var/lib/mysql
phpmyadmin:
image: phpmyadmin/phpmyadmin
restart: always
ports:
- ${LOCAL_PHPMYADMIN_PORT:-8096}:80
environment:
PMA_HOST: db
MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD:-examplepass}
depends_on:
- db
volumes:
wpdbv:</pre></div>
<p>This Docker Compose file sets up three services:</p>
<ul class="wp-block-list">
<li><strong>wordpress</strong>: The FrankenWP container running WordPress on FrankenPHP</li>
<li><strong>db</strong>: A MariaDB database container</li>
<li><strong>phpmyadmin</strong>: A phpMyAdmin container for database management</li>
</ul>
<h3 class="wp-block-heading">3. Create the Environment File</h3>
<p>Create a <code>.env</code> file in your project directory to customize the environment variables:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">SERVER_NAME=:8094
WP_DEBUG=0
WORDPRESS_DB_HOST=db
WORDPRESS_DB_USER=exampleuser
WORDPRESS_DB_PASSWORD=examplepass
WORDPRESS_DB_NAME=exampledb
WORDPRESS_TABLE_PREFIX=wp_
DB_ROOT_PASSWORD=examplepass
LOCAL_DB_PORT=3306
LOCAL_PHPMYADMIN_PORT=8096</pre></div>
<h3 class="wp-block-heading">4. Create the wp-content Directory</h3>
<p>Create a <code>wp-content</code> directory in your project folder:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">mkdir wp-content</pre></div>
<p>This directory will be mounted into the WordPress container and will store themes, plugins, and uploads.</p>
<h2 class="wp-block-heading" id="configuration">Configuration Options</h2>
<h3 class="wp-block-heading" id="env-variables">Environment Variables</h3>
<p>The FrankenWP Docker Compose setup uses several environment variables that can be customized in your <code>.env</code> file:</p>
<figure class="wp-block-table"><table class="has-fixed-layout mtr-table mtr-tr-th"><tbody><tr><th data-mtr-content="Variable" class="mtr-th-tag"><div class="mtr-cell-content">Variable</div></th><th data-mtr-content="Description" class="mtr-th-tag"><div class="mtr-cell-content">Description</div></th><th data-mtr-content="Default Value" class="mtr-th-tag"><div class="mtr-cell-content">Default Value</div></th></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content">SERVER_NAME</div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Caddy server name</div></td><td data-mtr-content="Default Value" class="mtr-td-tag"><div class="mtr-cell-content">:80</div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content">WP_DEBUG</div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Enable WordPress debug mode</div></td><td data-mtr-content="Default Value" class="mtr-td-tag"><div class="mtr-cell-content">true</div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content">WORDPRESS_DB_HOST</div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Database host</div></td><td data-mtr-content="Default Value" class="mtr-td-tag"><div class="mtr-cell-content">db</div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content">WORDPRESS_DB_USER</div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Database user</div></td><td data-mtr-content="Default Value" class="mtr-td-tag"><div class="mtr-cell-content">exampleuser</div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content">WORDPRESS_DB_PASSWORD</div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Database password</div></td><td data-mtr-content="Default Value" class="mtr-td-tag"><div class="mtr-cell-content">examplepass</div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content">WORDPRESS_DB_NAME</div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Database name</div></td><td data-mtr-content="Default Value" class="mtr-td-tag"><div class="mtr-cell-content">exampledb</div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content">WORDPRESS_TABLE_PREFIX</div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">WordPress table prefix</div></td><td data-mtr-content="Default Value" class="mtr-td-tag"><div class="mtr-cell-content">wp_</div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content">DB_ROOT_PASSWORD</div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">MySQL root password</div></td><td data-mtr-content="Default Value" class="mtr-td-tag"><div class="mtr-cell-content">examplepass</div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content">LOCAL_DB_PORT</div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Local port for MySQL</div></td><td data-mtr-content="Default Value" class="mtr-td-tag"><div class="mtr-cell-content">3309</div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content">LOCAL_PHPMYADMIN_PORT</div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Local port for phpMyAdmin</div></td><td data-mtr-content="Default Value" class="mtr-td-tag"><div class="mtr-cell-content">8096</div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content">CACHE_AGE</div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Cache age in seconds</div></td><td data-mtr-content="Default Value" class="mtr-td-tag"><div class="mtr-cell-content">8000</div></td></tr><tr><td data-mtr-content="Variable" class="mtr-td-tag"><div class="mtr-cell-content">STATIC_CACHE_AGE</div></td><td data-mtr-content="Description" class="mtr-td-tag"><div class="mtr-cell-content">Static cache age in seconds</div></td><td data-mtr-content="Default Value" class="mtr-td-tag"><div class="mtr-cell-content">8000</div></td></tr></tbody></table></figure>
<h3 class="wp-block-heading" id="caddy-config">Caddy Server Configuration</h3>
<p>The FrankenWP image uses <a href="https://caddyserver.com/docs/" target="_blank" rel="noopener">Caddy server</a>, which is configured through the <code>CADDY_GLOBAL_OPTIONS</code> environment variable in the Docker Compose file. This variable allows you to set various <a href="https://caddyserver.com/docs/caddyfile/options" target="_blank" rel="noopener">Caddy options</a>:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">CADDY_GLOBAL_OPTIONS: |
email myemail@sample.com
auto_https disable_redirects
debug</pre></div>
<p>Common Caddy options include:</p>
<ul class="wp-block-list">
<li><code>email</code>: Email address for Let’s Encrypt certificate</li>
<li><code>auto_https</code>: HTTPS configuration (disable_redirects turns off HTTP to HTTPS redirects)</li>
<li><code>debug</code>: Enable debug mode</li>
<li><code>frankenphp</code>: FrankenPHP configuration options</li>
</ul>
<p>For production use, you should enable HTTPS by updating the <code>CADDY_GLOBAL_OPTIONS</code> and uncommenting the HTTPS port mapping in the Docker Compose file.</p>
<h3 class="wp-block-heading" id="wp-config">WordPress Configuration</h3>
<p>Additional <a href="https://wordpress.org/documentation/article/editing-wp-config-php/" target="_blank" rel="noopener">WordPress configuration</a> can be added using the <code>WORDPRESS_CONFIG_EXTRA</code> environment variable:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">WORDPRESS_CONFIG_EXTRA: |
define('WP_SITEURL', 'https://example.com');
define('WP_HOME', 'https://example.com');</pre></div>
<h2 class="wp-block-heading" id="running">Running the FrankenWP Server</h2>
<h3 class="wp-block-heading">1. Start the Containers</h3>
<p>From your project directory, run:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">docker compose up -d</pre></div>
<p>This will start all three containers in detached mode.</p>
<h3 class="wp-block-heading">2. Check the Status</h3>
<p>Verify that all containers are running properly:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">docker compose ps</pre></div>
<h3 class="wp-block-heading">3. Access WordPress</h3>
<p>Once the containers are running, you can access WordPress at:</p>
<ul class="wp-block-list">
<li>WordPress: http://your-server-ip:8094</li>
<li>phpMyAdmin: http://your-server-ip:8096</li>
</ul>
<h3 class="wp-block-heading">4. Complete the WordPress Setup</h3>
<p>Visit http://your-server-ip:8094 in your browser to complete the WordPress installation process.</p>
<h2 class="wp-block-heading" id="connecting">Connecting to the Server</h2>
<h3 class="wp-block-heading">1. Browser Connection</h3>
<p>To connect to your FrankenWP server, simply point your web browser to:</p>
<ul class="wp-block-list">
<li>http://your-server-ip:8094 (or whichever port you configured)</li>
</ul>
<h3 class="wp-block-heading">2. WordPress Admin</h3>
<p>Once WordPress is set up, you can access the admin panel at:</p>
<ul class="wp-block-list">
<li>http://your-server-ip:8094/wp-admin</li>
</ul>
<h3 class="wp-block-heading" id="domain-config">3. Domain Configuration</h3>
<p>For production use, you’ll want to use a domain name instead of an IP address. Update your <a href="https://www.cloudflare.com/learning/dns/what-is-dns/" target="_blank" rel="noopener">DNS settings</a> to point your domain to your server’s IP address.</p>
<p>Then, update the Docker Compose file to use your domain:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">environment:
SERVER_NAME: yourdomain.com
# Other environment variables...</pre></div>
<p>And uncomment the HTTPS port mappings:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">ports:
# - "8094:80" # HTTP (development)
- "80:80" # HTTP
- "443:443" # HTTPS
- "443:443/udp" # HTTP/3</pre></div>
<p>Update the Caddy configuration to enable automatic HTTPS:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">CADDY_GLOBAL_OPTIONS: |
email youremail@yourdomain.com
# Remove or comment out auto_https disable_redirects</pre></div>
<h2 class="wp-block-heading" id="advanced">Advanced Configuration</h2>
<h3 class="wp-block-heading" id="frankephp-settings">Customizing FrankenPHP Settings</h3>
<p><a href="https://frankenphp.dev/docs/config/" target="_blank" rel="noopener">FrankenPHP settings</a> can be customized in the Caddy configuration. For example, to adjust PHP worker threads:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">CADDY_GLOBAL_OPTIONS: |
email youremail@yourdomain.com
frankenphp {
num_threads 16 # Sets the number of PHP threads to start
max_threads 32 # Limits the number of additional PHP threads
php_ini upload_max_filesize 100M # Set PHP configuration
php_ini post_max_size 100M
}</pre></div>
<h3 class="wp-block-heading" id="custom-caddyfile">Custom Caddyfile</h3>
<p>For more complex <a href="https://caddyserver.com/docs/caddyfile" target="_blank" rel="noopener">Caddy configurations</a>, you can mount a custom Caddyfile into the container:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">services:
wordpress:
# Other settings...
volumes:
- ./wp-content:/var/www/html/wp-content
- ./Caddyfile:/etc/caddy/Caddyfile</pre></div>
<h3 class="wp-block-heading" id="ssl-tls">SSL/TLS Configuration</h3>
<p>Caddy automatically handles <a href="https://caddyserver.com/docs/automatic-https" target="_blank" rel="noopener">SSL/TLS certificates</a> using <a href="https://letsencrypt.org/" target="_blank" rel="noopener">Let’s Encrypt</a> when you configure a domain name. In production, enable HTTPS by updating your Docker Compose file:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">ports:
- "80:80"
- "443:443"
- "443:443/udp" # HTTP/3
environment:
SERVER_NAME: yourdomain.com
CADDY_GLOBAL_OPTIONS: |
email youremail@yourdomain.com</pre></div>
<h2 class="wp-block-heading" id="references">References</h2>
<ul class="wp-block-list">
<li><a href="https://github.com/StephenMiracle/wordpress-docker-frankenphp" target="_blank" rel="noopener">StephenMiracle/wordpress-docker-frankenphp on GitHub</a></li>
<li><a href="https://gist.github.com/StephenMiracle/a16f5bee113d2a0d6b68c5e1787c0066" target="_blank" rel="noopener">FrankenWP Docker Compose Sample</a></li>
<li><a href="https://frankenphp.dev/docs/" target="_blank" rel="noopener">FrankenPHP Documentation</a></li>
<li><a href="https://caddyserver.com/docs/" target="_blank" rel="noopener">Caddy Server Documentation</a></li>
<li><a href="https://docs.docker.com/compose/compose-file/" target="_blank" rel="noopener">Docker Compose Documentation</a></li>
<li><a href="https://wordpress.org/documentation/" target="_blank" rel="noopener">WordPress Documentation</a></li>
<li><a href="https://wpeverywhere.com/introducing-the-frankenwp-docker-image/" target="_blank" rel="noopener">WP Everywhere – Introducing FrankenWP</a></li>
</ul>
]]></content:encoded>
<wfw:commentRss>https://portalzine.de/day-28-frankenwp-frankephp-wordpress-7-days-of-docker/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>FrankenPHP in 2025: The Zombie App Server That Brought PHP Back From the Dead!</title>
<link>https://portalzine.de/frankenphp-in-2025-the-zombie-app-server-that-brought-php-back-from-the-dead/</link>
<comments>https://portalzine.de/frankenphp-in-2025-the-zombie-app-server-that-brought-php-back-from-the-dead/#respond</comments>
<dc:creator><![CDATA[]]></dc:creator>
<pubDate>Sat, 19 Apr 2025 08:08:10 +0000</pubDate>
<category><![CDATA[Development]]></category>
<category><![CDATA[Automation]]></category>
<category><![CDATA[Build-Tools]]></category>
<category><![CDATA[Debugging]]></category>
<category><![CDATA[Deployment]]></category>
<category><![CDATA[Enviroment]]></category>
<category><![CDATA[Local]]></category>
<category><![CDATA[PHP]]></category>
<guid isPermaLink="false">https://portalzine.de/?p=8420</guid>
<description><![CDATA[Remember when people used to joke that PHP was dying? Well, in 2025, PHP is not only alive and kicking but thriving thanks to its Frankenstein-inspired application server that’s been taking the web development world by storm! What Is This Monster? FrankenPHP is the brainchild of Kévin Dunglas (the same genius behind API Platform) who […]]]></description>
<content:encoded><![CDATA[
<p>Remember when people used to joke that PHP was dying? Well, in 2025, PHP is not only alive and kicking but thriving thanks to its Frankenstein-inspired application server that’s been taking the web development world by storm!</p>
<h2 class="wp-block-heading">What Is This Monster?</h2>
<p><a href="https://frankenphp.dev/" target="_blank" rel="noopener">FrankenPHP</a> is the brainchild of Kévin Dunglas (the same genius behind API Platform) who first unleashed this creation in October 2022. It’s a PHP application server built on top of the <a href="https://caddyserver.com/" target="_blank" rel="noopener">Caddy web server</a> and written in <a href="https://go.dev/" target="_blank" rel="noopener">Go</a>. </p>
<p>Think of it as the cool science experiment that combined the best parts of different technologies to create something even more powerful than the sum of its parts.</p>
<p>Unlike the monster from Mary Shelley’s novel, this creation is extremely friendly and incredibly helpful!</p>
<h2 class="wp-block-heading">Why Developers Are Obsessed With It in 2025</h2>
<p>Three years after its major 1.3 <a href="https://github.com/dunglas/frankenphp/releases" target="_blank" rel="noopener">release</a> (which delivered a whopping 54% performance boost), FrankenPHP has become the go-to solution for PHP developers who want speed, reliability, and modern features.</p>
<p>The server landscape in 2025 has drastically changed. What used to be a complicated dance of Nginx/Apache configurations, PHP-FPM setups, and various proxy layers has been simplified to “just use FrankenPHP” in many PHP shops.</p>
<p>“I literally deleted 200 lines of server config and replaced it with 10 lines of FrankenPHP config,” says one happy developer on Reddit’s r/PHP. “It’s like I finally got my weekends back!”</p>
<h2 class="wp-block-heading">The Secret Sauce: What Makes It Special</h2>
<p>FrankenPHP’s popularity in 2025 comes down to a few key ingredients:</p>
<ul class="wp-block-list">
<li><strong>Worker Mode</strong>: Applications run lightning-fast because code stays loaded in memory</li>
<li><strong>Real-time Capabilities</strong>: Built-in Mercure hub for instant updates (no more polling!)</li>
<li><strong>Developer Experience</strong>: The file watcher feature means you can edit code and just refresh your browser</li>
<li><strong>Modern By Default</strong>: Automatic HTTPS, HTTP/2, and HTTP/3 support without painful configuration</li>
<li><strong>Container-Friendly</strong>: The deployment darling for DevOps teams everywhere</li>
</ul>
<p>One feature that’s been a game-changer in 2025: the advanced metrics integration that’s made it super easy for teams to monitor and optimize their applications. Operations teams are particularly fond of the granular control over thread and worker management.</p>
<h2 class="wp-block-heading">The Community Effect</h2>
<p>The <a href="https://api-platform.com/con/2025/" target="_blank" rel="noopener">API Platform Conference 2025</a> happening September 18-19 in Lille, France has an entire track dedicated to FrankenPHP—no surprise considering how popular it’s become. The conference brings together FrankenPHP creators, contributors, and enthusiastic users sharing their success stories.</p>
<p>What’s fascinating is how FrankenPHP has bridged communities: PHP devs learning Go basics to contribute, and Go developers dipping their toes into PHP waters to enhance the server. It’s created this weird but wonderful cross-pollination that’s energized both communities.</p>
<h2 class="wp-block-heading">Real Talk: Is It Perfect?</h2>
<p>Of course not! But that’s part of its charm. The FrankenPHP Discord server has this legendary channel called #franken-fails where developers share their most spectacular configuration disasters—often followed by the simple fix that made everything work.</p>
<p>“I somehow managed to crash my entire cluster with one typo,” shared one developer at a recent meetup. “But the error message was so clear I had it fixed before my boss noticed!”</p>
<h2 class="wp-block-heading">What’s Next?</h2>
<p>Rumor has it that the FrankenPHP team is working on even deeper integration with major frameworks and improved observability features. There’s also talk of experimental machine learning capabilities to automatically optimize server settings based on your application’s patterns.</p>
<p>While we wait for the next big update, developers continue finding creative ways to use this “monster” server. From ultra-lightweight microservices to mammoth enterprise applications, FrankenPHP has proven itself versatile enough to handle just about anything thrown at it.</p>
<h2 class="wp-block-heading">The Bottom Line</h2>
<p>In 2025, if you’re still running PHP without FrankenPHP, your colleagues are probably wondering why. It’s become as standard to PHP development as composer and curly braces.</p>
<p>As one conference speaker recently put it: “FrankenPHP didn’t just improve PHP deployment—it brought the fun back to server management.” And in the sometimes tedious world of server configuration, that might be its greatest achievement yet!</p>
<h2 class="wp-block-heading">Links & Resources</h2>
<h3 class="wp-block-heading">Official Resources</h3>
<ul class="wp-block-list">
<li><strong>Main Website</strong>: <a href="https://frankenphp.dev/" target="_blank" rel="noopener">frankenphp.dev</a></li>
<li><strong>Documentation</strong>: <a href="https://frankenphp.dev/docs/" target="_blank" rel="noopener">frankenphp.dev/docs</a></li>
<li><strong>GitHub Repository</strong>: <a href="https://github.com/dunglas/frankenphp" target="_blank" rel="noopener">github.com/dunglas/frankenphp</a></li>
<li><strong>GitHub Discussions</strong> (official community forum): <a href="https://github.com/dunglas/frankenphp/discussions" target="_blank" rel="noopener">github.com/dunglas/frankenphp/discussions</a></li>
<li><a href="https://www.youtube.com/watch?v=nuxI6MSEMEg" target="_blank" rel="noopener">PHP UK Conference – Youtube Presentation</a></li>
</ul>
<h3 class="wp-block-heading">Community Resources</h3>
<ul class="wp-block-list">
<li><strong>No Official Discord</strong>: The maintainers explicitly prefer GitHub Discussions over Discord for better searchability and organization (confirmed in <a href="https://github.com/dunglas/frankenphp/issues/823" target="_blank" rel="noopener">GitHub issue #823</a>)</li>
<li><strong>GitHub Issues</strong>: <a href="https://github.com/dunglas/frankenphp/issues" target="_blank" rel="noopener">github.com/dunglas/frankenphp/issues</a></li>
<li><strong>API Platform Conference</strong>: Annual event with FrankenPHP creators and contributors (Next: Sep 18-19, 2025 in Lille, France)</li>
</ul>
<h3 class="wp-block-heading">Creator Information</h3>
<ul class="wp-block-list">
<li><strong>Kévin Dunglas</strong>: Creator of FrankenPHP, Symfony Core Team member</li>
<li><strong>Twitter/X</strong>: <a href="https://twitter.com/dunglas" target="_blank" rel="noopener">@dunglas</a></li>
<li><strong>Mastodon</strong>: <a href="https://mastodon.social/@dunglas" target="_blank" rel="noopener">@dunglas@mastodon.social</a></li>
<li><strong>GitHub</strong>: <a href="https://github.com/dunglas" target="_blank" rel="noopener">github.com/dunglas</a></li>
<li><strong>Website</strong>: <a href="https://dunglas.dev/" target="_blank" rel="noopener">dunglas.dev</a></li>
</ul>
<h2 class="wp-block-heading">Bonus: Installing FrankenPHP and WordPress on Linux / WSL2</h2>
<p>Hey there, WordPress enthusiasts! Are you tired of sluggish WordPress performance for local development?</p>
<p>In this guide, I’ll walk you through setting up WordPress with FrankenPHP – it’s easier than you might think!</p>
<p><strong>This works perfectly on Windows <a href="https://github.com/microsoft/WSL" target="_blank" rel="noopener">WSL2</a> as well, a lot faster than most packaged solutions out there and will beat Docker on lower powered systems easily .</strong></p>
<p>Looking for a Docker Solution ? Check out <a href="https://github.com/StephenMiracle/frankenwp" target="_blank" rel="noopener">FrankeWP</a>.</p>
<h3 class="wp-block-heading">1. Getting Your System Ready</h3>
<p>Let’s start with the basics! First, we need to update your system (because who likes working with outdated packages, right?):</p>
<p><strong>Got Debian?</strong> Run this:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">sudo apt update && sudo apt upgrade -y</pre></div>
<p>Now, let’s grab some essential tools we’ll need for this project:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">sudo apt install -y curl unzip git</pre></div>
<h3 class="wp-block-heading">2. Getting FrankenPHP Up and Running</h3>
<p>Now comes the exciting part – installing FrankenPHP! Just copy-paste these commands and you’ll be all set:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">curl https://frankenphp.dev/install.sh | sh
mv frankenphp /usr/local/bin/</pre></div>
<p>Let’s make sure it worked (fingers crossed):</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">frankenphp -v</pre></div>
<h3 class="wp-block-heading">3. Getting WordPress Ready</h3>
<p>Time to grab WordPress! Let’s download and unpack it:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">curl -O https://wordpress.org/latest.zip
unzip latest.zip
mv wordpress /var/www/wordpress
cd /var/www/wordpress</pre></div>
<p>Now we need to set some permissions (boring but necessary stuff):</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">sudo chown -R www-data:www-data /var/www/wordpress
sudo chmod -R 755 /var/www/wordpress</pre></div>
<h3 class="wp-block-heading">4. Lets go FrankenPHP</h3>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">frankenphp php-server --listen :9000 /var/www/wordpress</pre></div>
<p>Boom! Your WordPress is now running on port 8080. Open your browser and go to http://server-ip:8080 to see the magic happening!</p>
<h3 class="wp-block-heading">5. Setting Up the Database</h3>
<p>WordPress needs a database to store all your awesome content. Let’s set up MariaDB:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">sudo apt-get install mariadb -y</pre></div>
<p>Let’s start MariaDB and make sure it runs at startup (because who wants to manually start it every time, right?):</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">sudo systemctl enable --now mariadb</pre></div>
<p>Time to create a database for WordPress! Log in to MySQL (you’ll need to enter your password):</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">sudo mysql -u root -p</pre></div>
<p>Once you’re in, run these SQL commands (make sure to change that ‘strongpassword’ to something actually strong!):</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">CREATE DATABASE wordpress;
CREATE USER 'wpuser'@'localhost' IDENTIFIED BY 'strongpassword';
GRANT ALL PRIVILEGES ON wordpress.* TO 'wpuser'@'localhost';
FLUSH PRIVILEGES;
EXIT;</pre></div>
<h3 class="wp-block-heading">6. Wrapping Up the WordPress Setup</h3>
<p>Almost done! Fire up your browser and go to http://server-ip:8080. You’ll see the famous WordPress setup wizard. Just enter the database details we created earlier, and you’re good to go!</p>
<h4 class="wp-block-heading">Start on Boot</h4>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">sudo nano /etc/systemd/system/frankenphp.service</pre></div>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">[Unit]
Description=FrankenPHP service
After=network.target
StartLimitIntervalSec=0
[Service]
Type=simple
Restart=always
RestartSec=1
User=YOURUSER
WorkingDirectory=/home/YOURUSER
ExecStart=frankenphp php-server --listen :9000 /var/www/wordpress
[Install]
WantedBy=multi-user.target</pre></div>
<h4 class="wp-block-heading">Start Service</h4>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">systemctl start frankenphp</pre></div>
<h4 class="wp-block-heading">Check Status</h4>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">systemctl status frankenphp</pre></div>
<h4 class="wp-block-heading">Autostart</h4>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">systemctl enable frankenphp</pre></div>
<h4 class="wp-block-heading">PHP Tweaks</h4>
<p><a href="https://github.com/laravel/docs/pull/9932/files#r1789864795" target="_blank" rel="noopener">Create</a> a <strong>php.ini</strong> in <strong>/lib</strong></p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">memory_limit = 256M
max_execution_time = 120
display_errors = Off
zend_extension=opcache
opcache.enable=1
upload_max_filesize = 64M
zlib.output_compression = On
zlib.output_compression_level = 5
realpath_cache_size = 16M
realpath_cache_ttl = 120
session.save_handler = files
session.save_path = /var/lib/php/sessions
session.cache_limiter = public
session.cache_expire = 180</pre></div>
<h3 class="wp-block-heading">That’s It – You’re Done!</h3>
<p>Congrats! You’ve just set up WordPress using FrankenPHP, which means your site should be faster and more efficient than a regular WordPress installation. Pretty cool, right?</p>
<p>I hope this guide helped you get your super-fast WordPress site up and running! Now go create some awesome content and enjoy those faster load times. Your visitors (and Google) will thank you!</p>
]]></content:encoded>
<wfw:commentRss>https://portalzine.de/frankenphp-in-2025-the-zombie-app-server-that-brought-php-back-from-the-dead/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>The Ultimate Guide to Presence Detection in JavaScript: What Works and Why</title>
<link>https://portalzine.de/the-ultimate-guide-to-presence-detection-in-javascript-what-works-and-why/</link>
<comments>https://portalzine.de/the-ultimate-guide-to-presence-detection-in-javascript-what-works-and-why/#respond</comments>
<dc:creator><![CDATA[]]></dc:creator>
<pubDate>Mon, 14 Apr 2025 19:56:10 +0000</pubDate>
<category><![CDATA[Development]]></category>
<category><![CDATA[API]]></category>
<category><![CDATA[Javascript]]></category>
<guid isPermaLink="false">https://portalzine.de/?p=8099</guid>
<description><![CDATA[Hey there! Ever wondered how websites know when you’re actually looking at them, or if you’ve wandered off to make coffee? That’s presence detection in action – and it’s super useful for creating responsive, user-friendly web apps. In this guide, I’ll walk you through everything you need to know about detecting user presence with JavaScript […]]]></description>
<content:encoded><![CDATA[
<p>Hey there! Ever wondered how websites know when you’re actually looking at them, or if you’ve wandered off to make coffee? That’s presence detection in action – and it’s super useful for creating responsive, user-friendly web apps.</p>
<p>In this guide, I’ll walk you through everything you need to know about detecting user presence with JavaScript – from figuring out if someone’s still actively using your app to knowing if they’ve lost their internet connection. Let’s dive in!</p>
<h2 class="wp-block-heading">What’s This Presence Detection Thing All About?</h2>
<p>When we talk about presence detection in JavaScript, we’re really looking at four main things:</p>
<ol class="wp-block-list">
<li><strong>Is the user still there?</strong> (Idle/inactivity detection)</li>
<li><strong>Are they connected to the internet?</strong> (Online/offline status)</li>
<li><strong>Which users are currently active?</strong> (Real-time user presence for multi-user apps)</li>
<li><strong>Is our app visible or hidden?</strong> (Tab/window focus detection)</li>
</ol>
<p>Each of these gives us different insights into user behavior, and they’re all super useful for different reasons. Let’s break them down one by one.</p>
<h2 class="wp-block-heading">1. Catching Idle Users: “Hello? Anyone There?”</h2>
<h3 class="wp-block-heading">What’s the deal?</h3>
<p>This is about figuring out when someone hasn’t touched their keyboard, moved their mouse, or interacted with your app for a while. Maybe they got distracted by a cat video or went to grab lunch.</p>
<h3 class="wp-block-heading">Why you’d want this:</h3>
<ul class="wp-block-list">
<li>Auto-logout for security (so nobody messes with your banking session)</li>
<li>Saving battery life by pausing heavy animations</li>
<li>Showing others you’re “Away” in chat apps</li>
<li>Nudging users with “Hey, are you still there?” notifications</li>
</ul>
<h3 class="wp-block-heading">The simple way with vanilla JavaScript:</h3>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">let inactivityTime = function() {
let time;
// Reset the timer whenever the user does something
window.onload = resetTimer;
document.onmousemove = resetTimer;
document.onkeypress = resetTimer;
document.onclick = resetTimer;
document.ontouchstart = resetTimer;
document.onscroll = resetTimer;
function resetTimer() {
clearTimeout(time);
time = setTimeout(logout, 30000); // 30 seconds until we consider them idle
}
function logout() {
console.log("Looks like they're gone...");
// Do something - show a message, log them out, etc.
}
};
// Fire it up!
inactivityTime();</pre></div>
<h3 class="wp-block-heading">Ready-made solutions that make life easier:</h3>
<h4 class="wp-block-heading"><a href="https://github.com/thorst/jquery-idletimer" target="_blank" rel="noopener">idle-timer.js</a> (if you’re using jQuery)</h4>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">$(document).idleTimer({
timeout: 30000, // 30 seconds
idle: false
});
$(document).on("idle.idleTimer", function(event, elem, obj) {
console.log("User wandered off");
// Do your idle stuff here
});
$(document).on("active.idleTimer", function(event, elem, obj) {
console.log("They're back!");
// Welcome them back
});</pre></div>
<h4><a href="https://github.com/shawnmclean/Idle.js" target="_blank" rel="noopener">idle.js</a> (for vanilla JS lovers)</h4>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">const idle = new IdleJs({
idle: 30000, // 30 seconds
onIdle: function() {
console.log("Gone fishing...");
// Handle idle state
},
onActive: function() {
console.log("Back to work!");
// Handle active state
},
events: ['mousemove', 'keydown', 'mousedown', 'touchstart', 'scroll']
});
idle.start();</pre></div>
<h3 class="wp-block-heading">Pro tips for idle detection:</h3>
<ol class="wp-block-list">
<li><strong>Don’t be too trigger-happy</strong> – Balance security with not annoying users</li>
<li><strong>Remember multiple tabs exist</strong> – They might be active elsewhere in your app</li>
<li><strong>Give fair warnings</strong> – Nobody likes being logged out without notice</li>
<li><strong>Be accessibility-friendly</strong> – Some folks need more time to interact</li>
<li><strong>Test on phones</strong> – Mobile interactions are a whole different ballgame</li>
</ol>
<h2 class="wp-block-heading">2. Online or Offline? “Is This Thing Connected?”</h2>
<h3 class="wp-block-heading">What’s the deal?</h3>
<p>This is about figuring out if your user has an internet connection. Super important if you want your app to work smoothly when someone’s connection drops (like in an elevator or on the subway).</p>
<h3 class="wp-block-heading">Why you’d want this:</h3>
<ul class="wp-block-list">
<li>Building apps that work offline</li>
<li>Saving data when someone goes offline, then syncing when they’re back</li>
<li>Showing handy “You’re offline!” messages</li>
<li>Disabling features that need internet when it’s not available</li>
</ul>
<h3 class="wp-block-heading"><a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/onLine" target="_blank" rel="noopener">The easiest way (Navigator.onLine):</a></h3>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">// Check if we're online
const updateConnectionStatus = () => {
const status = navigator.onLine ? "online" : "offline";
console.log(`Looks like you're ${status}`);
// Add a visual indicator
document.body.classList.toggle('offline-mode', !navigator.onLine);
};
// Listen for changes
window.addEventListener('online', updateConnectionStatus);
window.addEventListener('offline', updateConnectionStatus);
// Check right away
updateConnectionStatus();</pre></div>
<h3 class="wp-block-heading">A more reliable approach (actually checking if we can reach the internet):</h3>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">function checkRealConnectivity() {
return fetch('https://www.example.com/ping', {
method: 'HEAD',
mode: 'no-cors',
cache: 'no-store'
})
.then(() => {
console.log("Yep, we're online!");
document.body.classList.remove('offline-mode');
return true;
})
.catch(() => {
console.log("Nope, we're offline!");
document.body.classList.add('offline-mode');
return false;
});
}
// Check when the page loads
checkRealConnectivity();
// Check every 30 seconds
setInterval(checkRealConnectivity, 30000);</pre></div>
<h3 class="wp-block-heading"><a href="https://github.com/sindresorhus/is-online" target="_blank" rel="noopener">The easy button (is-online library):</a></h3>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">import isOnline from 'is-online';
async function checkConnection() {
const online = await isOnline();
console.log(`We're ${online ? 'connected! <img src="https://s.w.org/images/core/emoji/15.1.0/72x72/1f389.png" alt="🎉" class="wp-smiley" style="height: 1em; max-height: 1em;" />' : 'offline <img src="https://s.w.org/images/core/emoji/15.1.0/72x72/1f622.png" alt="😢" class="wp-smiley" style="height: 1em; max-height: 1em;" />'}`);
// Update the UI
document.body.classList.toggle('offline-mode', !online);
}
// Check when the page loads
checkConnection();
// Check periodically
setInterval(checkConnection, 30000);</pre></div>
<h3 class="wp-block-heading">Pro tips for online/offline detection:</h3>
<ol class="wp-block-list">
<li><strong>Don’t trust Navigator.onLine alone</strong> – It can lie (especially on some browsers)</li>
<li><strong>Belt AND suspenders</strong> – Use both methods for best results</li>
<li><strong>Be ready for reconnection</strong> – Have a plan for when users come back online</li>
<li><strong>Make it obvious</strong> – Clear indicators when someone’s offline prevent frustration</li>
<li><strong>Design assuming offline</strong> – The web is flaky, plan accordingly!</li>
</ol>
<h2 class="wp-block-heading">3. Who’s Here Right Now? Real-time User Presence</h2>
<h3 class="wp-block-heading">What’s the deal?</h3>
<p>This is about knowing which users are currently active in multi-user applications. Think of the green dots next to names in chat apps or seeing who’s editing a Google Doc with you.</p>
<h3 class="wp-block-heading">Why you’d want this:</h3>
<ul class="wp-block-list">
<li>Chat apps showing who’s available</li>
<li>Collaborative editing tools</li>
<li>Multiplayer games</li>
<li>Those “Someone is typing…” indicators</li>
</ul>
<h3 class="wp-block-heading"><a href="https://firebase.google.com/docs/firestore/solutions/presence" target="_blank" rel="noopener">The popular option: Firebase</a></h3>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">// Assuming Firebase is set up
const uid = firebase.auth().currentUser.uid;
const userStatusRef = firebase.database().ref('/status/' + uid);
// Define our states
const isOfflineForDatabase = {
state: 'offline',
last_changed: firebase.database.ServerValue.TIMESTAMP,
};
const isOnlineForDatabase = {
state: 'online',
last_changed: firebase.database.ServerValue.TIMESTAMP,
};
// The magic happens here
firebase.database().ref('.info/connected').on('value', (snapshot) => {
if (snapshot.val() === false) {
return;
}
// This is the clever bit - it runs on the server even if they
// close the browser or lose connection
userStatusRef.onDisconnect().set(isOfflineForDatabase).then(() => {
// Now we can safely mark them as online
userStatusRef.set(isOnlineForDatabase);
});
});
// Get a list of who's currently online
firebase.database().ref('/status').on('value', (snapshot) => {
const statuses = snapshot.val() || {};
const activeUsers = Object.keys(statuses).filter(key =>
statuses[key].state === 'online'
);
console.log(`${activeUsers.length} people hanging out here`);
// Update your UI with who's around
});</pre></div>
<h3 class="wp-block-heading"><a href="https://socket.io/" target="_blank" rel="noopener">The DIY approach: Socket.io</a></h3>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">// Server-side code (Node.js)
const io = require('socket.io')(server);
const users = {};
io.on('connection', (socket) => {
// Someone shows up
socket.on('user-connect', (userId) => {
users[userId] = {
id: userId,
socketId: socket.id,
lastActive: new Date()
};
io.emit('user-presence-update', users);
});
// They did something
socket.on('user-activity', (userId) => {
if (users[userId]) {
users[userId].lastActive = new Date();
}
});
// They left
socket.on('disconnect', () => {
const userId = Object.keys(users).find(id => users[id].socketId === socket.id);
if (userId) {
delete users[userId];
io.emit('user-presence-update', users);
}
});
});
// Client-side code
const socket = io();
const userId = 'user123'; // Usually from login
// Let everyone know we're here
socket.emit('user-connect', userId);
// Ping periodically to show we're still active
setInterval(() => {
socket.emit('user-activity', userId);
}, 30000);
// Listen for updates about who's around
socket.on('user-presence-update', (users) => {
console.log(`There are ${Object.keys(users).length} people here`);
// Update your UI
});</pre></div>
<h3 class="wp-block-heading">Pro tips for real-time presence:</h3>
<ol class="wp-block-list">
<li><strong>Be forgiving about disconnections</strong> – Network hiccups shouldn’t mark people offline immediately</li>
<li><strong>Respect privacy</strong> – Let users go “invisible” if they want</li>
<li><strong>Add timeouts</strong> – Show “away” status before “offline”</li>
<li><strong>Think about scale</strong> – Presence updates can create lots of traffic</li>
<li><strong>Use clear indicators</strong> – Make status easy to understand at a glance</li>
</ol>
<h2 class="wp-block-heading">4. Are They Actually Looking At Us? Tab/Visibility Detection</h2>
<h3 class="wp-block-heading">What’s the deal?</h3>
<p>This is about knowing if your web page is currently visible to the user or if it’s hidden in a background tab or minimized window. Great for conserving resources and improving performance.</p>
<h3 class="wp-block-heading">Why you’d want this:</h3>
<ul class="wp-block-list">
<li>Pausing videos when people switch tabs</li>
<li>Saving battery by stopping animations</li>
<li>Changing notification sounds/visuals</li>
<li>Knowing actual viewing time for analytics</li>
</ul>
<h3 class="wp-block-heading"><a href="https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API" target="_blank" rel="noopener">The modern way: Page Visibility API</a></h3>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">// Handle visibility changes
function handleVisibilityChange() {
if (document.hidden) {
console.log("Tab is hidden - taking a break!");
// Pause stuff
document.querySelector('video')?.pause();
} else {
console.log("Tab is visible - back to work!");
// Resume stuff
document.querySelector('video')?.play();
}
}
// Listen for changes
document.addEventListener('visibilitychange', handleVisibilityChange);
// Check right away
handleVisibilityChange();</pre></div>
<h3 class="wp-block-heading">The old-school approach: Focus/Blur</h3>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">window.addEventListener('focus', () => {
console.log("Window active - hello again!");
// Resume heavy stuff
document.querySelector('video')?.play();
});
window.addEventListener('blur', () => {
console.log("Window inactive - taking a breather");
// Pause heavy stuff
document.querySelector('video')?.pause();
});
// Check right away
console.log(`Window is ${document.hasFocus() ? 'focused' : 'not focused'} right now`);</pre></div>
<h3 class="wp-block-heading"><a href="https://github.com/ai/visibilityjs" target="_blank" rel="noopener">The helper library: visibilityjs</a></h3>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">// Is the page hidden?
if (Visibility.hidden()) {
console.log('Page is in the background');
}
// Run when visibility changes
Visibility.change((e, state) => {
console.log(`Visibility changed to: ${state}`);
});
// Run when page becomes visible
Visibility.onVisible(() => {
console.log('Welcome back!');
});
// Get current state
console.log(`Current state: ${Visibility.state()}`);</pre></div>
<h3 class="wp-block-heading">Pro tips for visibility detection:</h3>
<ol class="wp-block-list">
<li><strong>Page Visibility API > focus/blur</strong> – It’s more reliable</li>
<li><strong>Think about mobile</strong> – Mobile browsers handle visibility differently</li>
<li><strong>Test on different browsers</strong> – Implementation varies</li>
<li><strong>Hidden doesn’t mean inactive</strong> – They might be listening to your audio</li>
<li><strong>Combine with idle detection</strong> – For the full picture of user engagement</li>
</ol>
<h2 class="wp-block-heading">What’s the Best Option? A Quick Comparison</h2>
<p>Here’s a no-nonsense ranking of the most popular solutions:</p>
<figure class="wp-block-table"><table class="has-fixed-layout mtr-table mtr-thead-th"><thead><tr><th data-mtr-content="Solution" class="mtr-th-tag"><div class="mtr-cell-content">Solution</div></th><th data-mtr-content="Popularity" class="mtr-th-tag"><div class="mtr-cell-content">Popularity</div></th><th data-mtr-content="Reliability" class="mtr-th-tag"><div class="mtr-cell-content">Reliability</div></th><th data-mtr-content="Difficulty" class="mtr-th-tag"><div class="mtr-cell-content">Difficulty</div></th><th data-mtr-content="Best For" class="mtr-th-tag"><div class="mtr-cell-content">Best For</div></th></tr></thead><tbody><tr><td data-mtr-content="Solution" class="mtr-td-tag"><div class="mtr-cell-content"><strong><a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/onLine" target="_blank" rel="noopener">Navigator.onLine</a></strong></div></td><td data-mtr-content="Popularity" class="mtr-td-tag"><div class="mtr-cell-content">Extremely High</div></td><td data-mtr-content="Reliability" class="mtr-td-tag"><div class="mtr-cell-content">Moderate</div></td><td data-mtr-content="Difficulty" class="mtr-td-tag"><div class="mtr-cell-content">Very Easy</div></td><td data-mtr-content="Best For" class="mtr-td-tag"><div class="mtr-cell-content">Quick online/offline checks</div></td></tr><tr><td data-mtr-content="Solution" class="mtr-td-tag"><div class="mtr-cell-content"><strong>Vanilla JS Idle Detection</strong></div></td><td data-mtr-content="Popularity" class="mtr-td-tag"><div class="mtr-cell-content">Very High</div></td><td data-mtr-content="Reliability" class="mtr-td-tag"><div class="mtr-cell-content">High</div></td><td data-mtr-content="Difficulty" class="mtr-td-tag"><div class="mtr-cell-content">Easy</div></td><td data-mtr-content="Best For" class="mtr-td-tag"><div class="mtr-cell-content">Auto-logout and activity tracking</div></td></tr><tr><td data-mtr-content="Solution" class="mtr-td-tag"><div class="mtr-cell-content"><strong><a href="https://firebase.google.com/docs/firestore/solutions/presence" target="_blank" rel="noopener">Firebase Presence</a></strong></div></td><td data-mtr-content="Popularity" class="mtr-td-tag"><div class="mtr-cell-content">High</div></td><td data-mtr-content="Reliability" class="mtr-td-tag"><div class="mtr-cell-content">Very High</div></td><td data-mtr-content="Difficulty" class="mtr-td-tag"><div class="mtr-cell-content">Moderate</div></td><td data-mtr-content="Best For" class="mtr-td-tag"><div class="mtr-cell-content">Chat apps and collaboration tools</div></td></tr><tr><td data-mtr-content="Solution" class="mtr-td-tag"><div class="mtr-cell-content"><strong><a href="https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API" target="_blank" rel="noopener">Page Visibility API</a></strong></div></td><td data-mtr-content="Popularity" class="mtr-td-tag"><div class="mtr-cell-content">High</div></td><td data-mtr-content="Reliability" class="mtr-td-tag"><div class="mtr-cell-content">High</div></td><td data-mtr-content="Difficulty" class="mtr-td-tag"><div class="mtr-cell-content">Easy</div></td><td data-mtr-content="Best For" class="mtr-td-tag"><div class="mtr-cell-content">Pausing videos and animations</div></td></tr><tr><td data-mtr-content="Solution" class="mtr-td-tag"><div class="mtr-cell-content"><strong><a href="https://socket.io/" target="_blank" rel="noopener">Socket.io Presence</a></strong></div></td><td data-mtr-content="Popularity" class="mtr-td-tag"><div class="mtr-cell-content">Moderate</div></td><td data-mtr-content="Reliability" class="mtr-td-tag"><div class="mtr-cell-content">High</div></td><td data-mtr-content="Difficulty" class="mtr-td-tag"><div class="mtr-cell-content">Moderate</div></td><td data-mtr-content="Best For" class="mtr-td-tag"><div class="mtr-cell-content">Custom real-time presence systems</div></td></tr></tbody></table></figure>
<h2 class="wp-block-heading">How to Choose What’s Right for Your Project</h2>
<p>When picking a solution, ask yourself:</p>
<ol class="wp-block-list">
<li><strong>What exactly am I trying to detect?</strong> (Idle users? Connection status? Who’s online?)</li>
<li><strong>How many users will I have?</strong> (Some solutions don’t scale well)</li>
<li><strong>Do I need something simple or feature-rich?</strong> (Balance complexity with needs)</li>
<li><strong>Am I okay using third-party services?</strong> (Or need to keep everything in-house)</li>
<li><strong>Which browsers need to be supported?</strong> (Older browsers need different approaches)</li>
</ol>
<h2 class="wp-block-heading">Wrapping Up</h2>
<p>Presence detection might seem like a small detail, but it can make a huge difference in how your app feels. Whether you’re building the next big social platform or just trying to make your web app more responsive, these techniques can help you create a better experience for your users.</p>
<p>Remember that you can (and often should) combine different approaches – for example, using both idle detection and visibility detection together will give you a much clearer picture of what your users are actually doing.</p>
<p>And always, always test on different devices and browsers! Nothing’s worse than deploying something that works great on your machine but falls apart on your users’ devices.</p>
<p>Want to dig deeper? Check out these resources:</p>
<ul class="wp-block-list">
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API" target="_blank" rel="noopener">MDN’s Page Visibility API docs</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/onLine" target="_blank" rel="noopener">All about Navigator.onLine</a></li>
<li><a href="https://firebase.google.com/docs/database/web/offline-capabilities" target="_blank" rel="noopener">Firebase’s offline capabilities</a></li>
<li><a href="https://socket.io/docs/v4/" target="_blank" rel="noopener">Socket.io docs</a></li>
</ul>
]]></content:encoded>
<wfw:commentRss>https://portalzine.de/the-ultimate-guide-to-presence-detection-in-javascript-what-works-and-why/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Best Server Hosts in Europe 2025: The Ultimate Guide</title>
<link>https://portalzine.de/best-server-hosts-in-europe-2025-the-ultimate-guide/</link>
<comments>https://portalzine.de/best-server-hosts-in-europe-2025-the-ultimate-guide/#respond</comments>
<dc:creator><![CDATA[]]></dc:creator>
<pubDate>Sat, 12 Apr 2025 09:02:02 +0000</pubDate>
<category><![CDATA[Development]]></category>
<category><![CDATA[Deployment]]></category>
<category><![CDATA[Hosting]]></category>
<guid isPermaLink="false">https://portalzine.de/?p=1733</guid>
<description><![CDATA[Looking for a rock-solid European server host in 2025? You’re not alone! With increasing concerns about data privacy, GDPR compliance, and the desire to keep data within European borders, more businesses than ever are seeking out EU-based hosting solutions. In this guide, I’ll walk you through the absolute best server hosts in Europe right now, […]]]></description>
<content:encoded><![CDATA[
<p>Looking for a rock-solid European server host in 2025? You’re not alone! With increasing concerns about data privacy, GDPR compliance, and the desire to keep data within European borders, more businesses than ever are seeking out EU-based hosting solutions.</p>
<p>In this guide, I’ll walk you through the absolute best server hosts in Europe right now, with all the juicy details on performance, pricing, and special features that make each one stand out. Whether you’re running a small blog or managing enterprise-level infrastructure, I’ve got you covered!</p>
<h2 class="wp-block-heading">Why Choose a European Server Host in 2025?</h2>
<p>Before diving into the rankings, let’s talk about why European hosting is having such a moment in 2025:</p>
<ul class="wp-block-list">
<li><strong>GDPR Compliance</strong>: European providers naturally align with the EU’s strict data protection regulations</li>
<li><strong>Data Sovereignty</strong>: Keep your data within European borders and away from foreign jurisdiction</li>
<li><strong>Reduced Latency</strong>: Faster speeds for European users (a huge plus for user experience!)</li>
<li><strong>Transparent Pricing</strong>: Many European hosts offer simpler pricing models without the surprise fees</li>
<li><strong>Sustainability Focus</strong>: European data centers often lead the way in green energy initiatives</li>
<li><strong>Political Stability</strong>: Recent changes in US politics have created uncertainty around transatlantic data transfers</li>
</ul>
<h2 class="wp-block-heading">The Top Server Hosts in Europe for 2025</h2>
<h3 class="wp-block-heading">1. Hetzner (Germany) – Best Overall Value</h3>
<p><strong>Why they’re awesome</strong>: Hetzner has earned the top spot by delivering an almost unbeatable combination of performance and affordability.</p>
<p><strong>Standout features</strong>:</p>
<ul class="wp-block-list">
<li>High-performance infrastructure with AMD EPYC CPUs and NVMe SSDs</li>
<li>Ridiculously competitive pricing (starting at just €4.15/month for cloud instances)</li>
<li>100% green energy powered data centers in Germany and Finland</li>
<li>Strict GDPR compliance with all data stored within the EU</li>
<li>Rock-solid reliability with 24/7 uptime monitoring</li>
</ul>
<p><strong>Perfect for</strong>: Businesses looking for the best performance-to-price ratio, developers, and budget-conscious projects that don’t want to sacrifice quality.</p>
<p><strong>Starting price</strong>: Cloud instances from €4.15/month, dedicated servers from €34/month</p>
<p><strong>Visit</strong>: <a href="https://www.hetzner.com/" target="_blank" rel="noopener">Hetzner</a></p>
<h3 class="wp-block-heading">2. OVHcloud (France) – Best for Enterprise Solutions</h3>
<p><strong>Why they’re awesome</strong>: As one of Europe’s largest cloud providers, OVHcloud offers an impressive range of hosting options with a strong focus on security and compliance.</p>
<p><strong>Standout features</strong>:</p>
<ul class="wp-block-list">
<li>Extensive service portfolio (VPS, dedicated servers, private cloud)</li>
<li>Data centers across multiple European locations for optimal performance</li>
<li>Strong emphasis on data sovereignty under GDPR</li>
<li>Industry-leading sustainability initiatives</li>
<li>Excellent DDoS protection included</li>
<li>4-star rating on Trustpilot in 2025</li>
</ul>
<p><strong>Perfect for</strong>: Large enterprises, businesses with complex hosting needs, and companies requiring the highest levels of security and compliance.</p>
<p><strong>Starting price</strong>: Plans from €4.00/month</p>
<p><strong>Visit</strong>: <a href="https://www.ovhcloud.com/" target="_blank" rel="noopener">OVHcloud</a></p>
<h3 class="wp-block-heading">3. IONOS (Germany) – Best for Small to Medium Businesses</h3>
<p><strong>Why they’re awesome</strong>: IONOS delivers enterprise-grade features with user-friendly interfaces, making it perfect for businesses without dedicated IT teams.</p>
<p><strong>Standout features</strong>:</p>
<ul class="wp-block-list">
<li>Highly scalable cloud solutions for growing businesses</li>
<li>Excellent security features with data encryption and automated backups</li>
<li>Intuitive control panel that makes management easy</li>
<li>Strong focus on customer support</li>
<li>Competitive pricing model with no hidden fees</li>
<li>European data centers ensuring GDPR compliance</li>
</ul>
<p><strong>Perfect for</strong>: Small to medium businesses, startups scaling their operations, and companies that value ease of use.</p>
<p><strong>Starting price</strong>: Starting at €1.00/month</p>
<p><strong>Visit</strong>: <a href="https://www.ionos.com/" target="_blank" rel="noopener">IONOS</a></p>
<h3 class="wp-block-heading">4. Scaleway (France) – Best for Developers</h3>
<p><strong>Why they’re awesome</strong>: Scaleway has positioned itself as the developer-friendly cloud provider with flexible solutions and excellent APIs.</p>
<p><strong>Standout features</strong>:</p>
<ul class="wp-block-list">
<li>Developer-focused tools and APIs</li>
<li>Kubernetes clusters and containerization support</li>
<li>Eco-friendly data centers powered by renewable energy</li>
<li>GDPR-compliant with data centers in France</li>
<li>Simple, predictable pricing model</li>
</ul>
<p><strong>Perfect for</strong>: Developers, tech startups, and companies using container-based deployments.</p>
<p><strong>Starting price</strong>: Plans from €2.99/month</p>
<p><strong>Visit</strong>: <a href="https://www.scaleway.com/" target="_blank" rel="noopener">Scaleway</a></p>
<h3 class="wp-block-heading">5. Contabo (Germany) – Best Budget Option</h3>
<p><strong>Why they’re awesome</strong>: Contabo offers some of the most affordable server hosting in Europe without significantly compromising on quality.</p>
<p><strong>Standout features</strong>:</p>
<ul class="wp-block-list">
<li>Incredibly low-priced VPS hosting with generous resources</li>
<li>Data centers in Germany and other EU countries ensuring compliance</li>
<li>Free DDoS protection on all plans</li>
<li>Highly scalable VPS options with up to 60GB RAM and 10 CPUs</li>
</ul>
<p><strong>Perfect for</strong>: Budget-conscious projects, startups, small businesses, and personal websites.</p>
<p><strong>Starting price</strong>: VPS hosting from €3.99/month, dedicated servers from €49.99/month</p>
<p><strong>Visit</strong>: <a href="https://contabo.com/" target="_blank" rel="noopener">Contabo</a></p>
<h3 class="wp-block-heading">6. UpCloud (Finland) – Best for Performance</h3>
<p><strong>Why they’s awesome</strong>: This Finnish provider has made a name for itself with blazing-fast storage capabilities and responsive infrastructure.</p>
<p><strong>Standout features</strong>:</p>
<ul class="wp-block-list">
<li>MaxIOPS storage technology for exceptional performance</li>
<li>100% uptime SLA guarantee</li>
<li>Excellent server response times</li>
<li>Strong security features</li>
<li>Data centers in multiple European locations</li>
</ul>
<p><strong>Perfect for</strong>: Performance-critical applications, businesses where speed is crucial, and high-traffic websites.</p>
<p><strong>Starting price</strong>: Plans from €3.00/month</p>
<p><strong>Visit</strong>: <a href="https://upcloud.com/" target="_blank" rel="noopener">UpCloud</a></p>
<h3 class="wp-block-heading">7. Exoscale (Switzerland) – Best for Privacy & Compliance</h3>
<p><strong>Why they’re awesome</strong>: Switzerland’s strict data protection laws make Exoscale an excellent choice for companies with stringent privacy requirements.</p>
<p><strong>Standout features</strong>:</p>
<ul class="wp-block-list">
<li>Swiss data privacy laws (some of the strongest in the world)</li>
<li>Full GDPR compliance</li>
<li>Multiple data centers across Switzerland, Germany, and Austria</li>
<li>Scalable Kubernetes and compute instances</li>
<li>Specialized cloud solutions for regulated industries</li>
</ul>
<p><strong>Perfect for</strong>: Financial services, healthcare, government sectors, and any business prioritizing privacy.</p>
<p><strong>Starting price</strong>: Cloud instances from €5.50/month</p>
<p><strong>Visit</strong>: <a href="https://www.exoscale.com/" target="_blank" rel="noopener">Exoscale</a></p>
<h3 class="wp-block-heading">8. CloudSigma (Switzerland) – Most Customizable</h3>
<p><strong>Why they’re awesome</strong>: CloudSigma offers highly flexible hosting options where you can tailor every aspect of your environment.</p>
<p><strong>Standout features</strong>:</p>
<ul class="wp-block-list">
<li>Fully customizable resource allocation</li>
<li>Private networking and hybrid cloud capabilities</li>
<li>Swiss-based GDPR-compliant cloud computing</li>
<li>Flexible pay-as-you-go pricing model</li>
<li>ISO 27001 certified security</li>
</ul>
<p><strong>Perfect for</strong>: Businesses with unique infrastructure requirements and those seeking custom cloud environments.</p>
<p><strong>Starting price</strong>: Cloud instances from €7.00/month with consumption-based billing</p>
<p><strong>Visit</strong>: <a href="https://www.cloudsigma.com/" target="_blank" rel="noopener">CloudSigma</a></p>
<h3 class="wp-block-heading">9. Leaseweb (Netherlands) – Best Global Reach</h3>
<p><strong>Why they’re awesome</strong>: While based in Europe, Leaseweb offers exceptional global connectivity for companies serving international markets.</p>
<p><strong>Standout features</strong>:</p>
<ul class="wp-block-list">
<li>Enterprise-grade infrastructure with 99.999% uptime SLA</li>
<li>Hybrid and customizable cloud solutions</li>
<li>Advanced security including built-in DDoS protection</li>
<li>Data centers across Europe and globally for maximum reach</li>
<li>Excellent support for high-traffic applications</li>
</ul>
<p><strong>Perfect for</strong>: Enterprise applications, SaaS companies, and high-traffic websites with global audiences.</p>
<p><strong>Starting price</strong>: Cloud hosting from €10.00/month</p>
<p><strong>Visit</strong>: <a href="https://www.leaseweb.com/" target="_blank" rel="noopener">Leaseweb</a></p>
<h3 class="wp-block-heading">10. Hostinger (Lithuania) – Best User Experience</h3>
<p><strong>Why they’re awesome</strong>: Hostinger combines ease of use with affordable pricing and good performance.</p>
<p><strong>Standout features</strong>:</p>
<ul class="wp-block-list">
<li>Servers in multiple European locations for optimal performance</li>
<li>User-friendly drag-and-drop website builder</li>
<li>Economical plans with numerous free tools</li>
<li>Good balance of features for beginners and advanced users</li>
</ul>
<p><strong>Perfect for</strong>: Beginners, small businesses, and those prioritizing ease of use.</p>
<p><strong>Starting price</strong>: Plans from €2.78/month</p>
<p><strong>Visit</strong>: <a href="https://www.hostinger.com/" target="_blank" rel="noopener">Hostinger</a></p>
<h2 class="wp-block-heading">Comparison Table: European Server Hosts in 2025</h2>
<figure class="wp-block-table"><table class="has-fixed-layout mtr-table mtr-thead-th"><thead><tr><th data-mtr-content="Provider" class="mtr-th-tag"><div class="mtr-cell-content">Provider</div></th><th data-mtr-content="Starting Price" class="mtr-th-tag"><div class="mtr-cell-content">Starting Price</div></th><th data-mtr-content="Best For" class="mtr-th-tag"><div class="mtr-cell-content">Best For</div></th><th data-mtr-content="Data Center Locations" class="mtr-th-tag"><div class="mtr-cell-content">Data Center Locations</div></th><th data-mtr-content="Green Energy" class="mtr-th-tag"><div class="mtr-cell-content">Green Energy</div></th><th data-mtr-content="GDPR Compliant" class="mtr-th-tag"><div class="mtr-cell-content">GDPR Compliant</div></th></tr></thead><tbody><tr><td data-mtr-content="Provider" class="mtr-td-tag"><div class="mtr-cell-content">Hetzner</div></td><td data-mtr-content="Starting Price" class="mtr-td-tag"><div class="mtr-cell-content">€4.15/month</div></td><td data-mtr-content="Best For" class="mtr-td-tag"><div class="mtr-cell-content">Overall Value</div></td><td data-mtr-content="Data Center Locations" class="mtr-td-tag"><div class="mtr-cell-content">Germany, Finland</div></td><td data-mtr-content="Green Energy" class="mtr-td-tag"><div class="mtr-cell-content">Yes</div></td><td data-mtr-content="GDPR Compliant" class="mtr-td-tag"><div class="mtr-cell-content">Yes</div></td></tr><tr><td data-mtr-content="Provider" class="mtr-td-tag"><div class="mtr-cell-content">OVHcloud</div></td><td data-mtr-content="Starting Price" class="mtr-td-tag"><div class="mtr-cell-content">€4.00/month</div></td><td data-mtr-content="Best For" class="mtr-td-tag"><div class="mtr-cell-content">Enterprise Solutions</div></td><td data-mtr-content="Data Center Locations" class="mtr-td-tag"><div class="mtr-cell-content">France, Germany, UK, Poland</div></td><td data-mtr-content="Green Energy" class="mtr-td-tag"><div class="mtr-cell-content">Yes</div></td><td data-mtr-content="GDPR Compliant" class="mtr-td-tag"><div class="mtr-cell-content">Yes</div></td></tr><tr><td data-mtr-content="Provider" class="mtr-td-tag"><div class="mtr-cell-content">IONOS</div></td><td data-mtr-content="Starting Price" class="mtr-td-tag"><div class="mtr-cell-content">€1.00/month</div></td><td data-mtr-content="Best For" class="mtr-td-tag"><div class="mtr-cell-content">SMBs</div></td><td data-mtr-content="Data Center Locations" class="mtr-td-tag"><div class="mtr-cell-content">Germany, UK, Spain</div></td><td data-mtr-content="Green Energy" class="mtr-td-tag"><div class="mtr-cell-content">Yes</div></td><td data-mtr-content="GDPR Compliant" class="mtr-td-tag"><div class="mtr-cell-content">Yes</div></td></tr><tr><td data-mtr-content="Provider" class="mtr-td-tag"><div class="mtr-cell-content">Scaleway</div></td><td data-mtr-content="Starting Price" class="mtr-td-tag"><div class="mtr-cell-content">€2.99/month</div></td><td data-mtr-content="Best For" class="mtr-td-tag"><div class="mtr-cell-content">Developers</div></td><td data-mtr-content="Data Center Locations" class="mtr-td-tag"><div class="mtr-cell-content">France, Netherlands, Poland</div></td><td data-mtr-content="Green Energy" class="mtr-td-tag"><div class="mtr-cell-content">Yes</div></td><td data-mtr-content="GDPR Compliant" class="mtr-td-tag"><div class="mtr-cell-content">Yes</div></td></tr><tr><td data-mtr-content="Provider" class="mtr-td-tag"><div class="mtr-cell-content">Contabo</div></td><td data-mtr-content="Starting Price" class="mtr-td-tag"><div class="mtr-cell-content">€3.99/month</div></td><td data-mtr-content="Best For" class="mtr-td-tag"><div class="mtr-cell-content">Budget Option</div></td><td data-mtr-content="Data Center Locations" class="mtr-td-tag"><div class="mtr-cell-content">Germany, EU Countries</div></td><td data-mtr-content="Green Energy" class="mtr-td-tag"><div class="mtr-cell-content">Yes</div></td><td data-mtr-content="GDPR Compliant" class="mtr-td-tag"><div class="mtr-cell-content">Yes</div></td></tr><tr><td data-mtr-content="Provider" class="mtr-td-tag"><div class="mtr-cell-content">UpCloud</div></td><td data-mtr-content="Starting Price" class="mtr-td-tag"><div class="mtr-cell-content">€3.00/month</div></td><td data-mtr-content="Best For" class="mtr-td-tag"><div class="mtr-cell-content">Performance</div></td><td data-mtr-content="Data Center Locations" class="mtr-td-tag"><div class="mtr-cell-content">Finland, UK, Germany</div></td><td data-mtr-content="Green Energy" class="mtr-td-tag"><div class="mtr-cell-content">Yes</div></td><td data-mtr-content="GDPR Compliant" class="mtr-td-tag"><div class="mtr-cell-content">Yes</div></td></tr><tr><td data-mtr-content="Provider" class="mtr-td-tag"><div class="mtr-cell-content">Exoscale</div></td><td data-mtr-content="Starting Price" class="mtr-td-tag"><div class="mtr-cell-content">€5.50/month</div></td><td data-mtr-content="Best For" class="mtr-td-tag"><div class="mtr-cell-content">Privacy & Compliance</div></td><td data-mtr-content="Data Center Locations" class="mtr-td-tag"><div class="mtr-cell-content">Switzerland, Austria, Germany</div></td><td data-mtr-content="Green Energy" class="mtr-td-tag"><div class="mtr-cell-content">Yes</div></td><td data-mtr-content="GDPR Compliant" class="mtr-td-tag"><div class="mtr-cell-content">Yes</div></td></tr><tr><td data-mtr-content="Provider" class="mtr-td-tag"><div class="mtr-cell-content">CloudSigma</div></td><td data-mtr-content="Starting Price" class="mtr-td-tag"><div class="mtr-cell-content">€7.00/month</div></td><td data-mtr-content="Best For" class="mtr-td-tag"><div class="mtr-cell-content">Customization</div></td><td data-mtr-content="Data Center Locations" class="mtr-td-tag"><div class="mtr-cell-content">Switzerland, Germany</div></td><td data-mtr-content="Green Energy" class="mtr-td-tag"><div class="mtr-cell-content">Yes</div></td><td data-mtr-content="GDPR Compliant" class="mtr-td-tag"><div class="mtr-cell-content">Yes</div></td></tr><tr><td data-mtr-content="Provider" class="mtr-td-tag"><div class="mtr-cell-content">Leaseweb</div></td><td data-mtr-content="Starting Price" class="mtr-td-tag"><div class="mtr-cell-content">€10.00/month</div></td><td data-mtr-content="Best For" class="mtr-td-tag"><div class="mtr-cell-content">Global Reach</div></td><td data-mtr-content="Data Center Locations" class="mtr-td-tag"><div class="mtr-cell-content">Netherlands, Germany, UK</div></td><td data-mtr-content="Green Energy" class="mtr-td-tag"><div class="mtr-cell-content">Yes</div></td><td data-mtr-content="GDPR Compliant" class="mtr-td-tag"><div class="mtr-cell-content">Yes</div></td></tr><tr><td data-mtr-content="Provider" class="mtr-td-tag"><div class="mtr-cell-content">Hostinger</div></td><td data-mtr-content="Starting Price" class="mtr-td-tag"><div class="mtr-cell-content">€2.78/month</div></td><td data-mtr-content="Best For" class="mtr-td-tag"><div class="mtr-cell-content">User Experience</div></td><td data-mtr-content="Data Center Locations" class="mtr-td-tag"><div class="mtr-cell-content">Lithuania, Netherlands, UK</div></td><td data-mtr-content="Green Energy" class="mtr-td-tag"><div class="mtr-cell-content">Yes</div></td><td data-mtr-content="GDPR Compliant" class="mtr-td-tag"><div class="mtr-cell-content">Yes</div></td></tr></tbody></table></figure>
<h2 class="wp-block-heading">How to Choose the Right European Server Host in 2025</h2>
<p>Still not sure which provider is right for you? Here are some quick guidelines:</p>
<ul class="wp-block-list">
<li><strong>If price is your main concern</strong>: Go with Contabo or Hetzner</li>
<li><strong>If you need top-tier performance</strong>: UpCloud or OVHcloud</li>
<li><strong>If privacy is paramount</strong>: Exoscale or CloudSigma (Swiss-based)</li>
<li><strong>If you’re just starting out</strong>: Hostinger or IONOS</li>
<li><strong>If you’re a developer</strong>: Scaleway or Hetzner</li>
<li><strong>If you have complex enterprise needs</strong>: OVHcloud or Leaseweb</li>
</ul>
<h2 class="wp-block-heading">The Future of European Hosting</h2>
<p>European cloud providers are gaining serious momentum as viable alternatives to AWS, Google Cloud, and Azure. With the EU strengthening its digital sovereignty initiatives like GAIA-X, and increasing concerns about data transfers to the US, the trend toward European hosting solutions is likely to continue growing throughout 2025 and beyond.</p>
<p>For businesses prioritizing GDPR compliance, transparent pricing, and high-performance hosting within European borders, these top providers offer compelling options for every need and budget.</p>
]]></content:encoded>
<wfw:commentRss>https://portalzine.de/best-server-hosts-in-europe-2025-the-ultimate-guide/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Visualize This: Open-Source Diagram Tools to Replace GoJS</title>
<link>https://portalzine.de/visualize-this-open-source-diagram-tools-to-replace-gojs/</link>
<comments>https://portalzine.de/visualize-this-open-source-diagram-tools-to-replace-gojs/#respond</comments>
<dc:creator><![CDATA[]]></dc:creator>
<pubDate>Sat, 12 Apr 2025 07:57:16 +0000</pubDate>
<category><![CDATA[Development]]></category>
<category><![CDATA[Javascript]]></category>
<guid isPermaLink="false">https://portalzine.de/?p=8395</guid>
<description><![CDATA[So you’re looking for a diagram library for your web project, and you’ve heard about GoJS. It’s powerful and feature-packed, but there’s one catch – it’s not free. While GoJS is undoubtedly excellent at what it does, its commercial licensing might not fit everyone’s budget or project requirements. The good news? There’s a vibrant ecosystem […]]]></description>
<content:encoded><![CDATA[
<p>So you’re looking for a diagram library for your web project, and you’ve heard about GoJS. It’s powerful and feature-packed, but there’s one catch – it’s not free. While GoJS is undoubtedly excellent at what it does, its commercial licensing might not fit everyone’s budget or project requirements.</p>
<p>The good news? There’s a vibrant ecosystem of open-source alternatives that might just do the trick. Let’s dive in!</p>
<h2 class="wp-block-heading">What’s GoJS All About, Anyway?</h2>
<p>Before we explore the alternatives, let’s understand what makes GoJS so popular.</p>
<p>GoJS is a JavaScript library that helps you build interactive diagrams in the browser. Think flowcharts, org charts, BPMN diagrams, network visualizations – pretty much any visual representation of connected data. It’s packed with features like drag-and-drop interaction, undo/redo functionality, and various layout algorithms to automatically arrange your nodes.</p>
<p>Developed by Northwoods Software, GoJS offers:</p>
<ul class="wp-block-list">
<li>Super interactive diagrams (drag, click, copy, paste – you name it)</li>
<li>A model-view architecture that separates your data from its visual representation</li>
<li>Tons of customization options</li>
<li>Excellent documentation with over 200 interactive examples</li>
<li>Battle-tested stability for production applications</li>
</ul>
<p>It’s a fantastic tool, but if the licensing costs don’t work for you, let’s check out some worthy open-source contenders.</p>
<h2 class="wp-block-heading">Top Open-Source Alternatives to GoJS</h2>
<h3 class="wp-block-heading">1. JointJS (Community Edition)</h3>
<p>JointJS feels closest to GoJS in terms of general-purpose diagramming. It offers an open-source community edition that’s quite capable, alongside a commercial version with extra features.</p>
<p><strong>What’s awesome:</strong></p>
<ul class="wp-block-list">
<li>SVG-based for crisp, high-quality graphics</li>
<li>Flexible shape system for custom diagram elements</li>
<li>Works with any JavaScript framework</li>
<li>Solid documentation and examples</li>
</ul>
<p><strong>The catch:</strong></p>
<ul class="wp-block-list">
<li>The free version is somewhat limited compared to the paid JointJS+</li>
<li>Might require more coding for advanced interactions</li>
</ul>
<p><strong>Perfect for:</strong> Web applications that need standard diagramming features without breaking the bank.</p>
<p><a href="https://www.jointjs.com/" target="_blank" rel="noopener">Check out JointJS →</a></p>
<h3 class="wp-block-heading">2. Cytoscape.js</h3>
<p>If your diagrams lean more toward networks, relationships, and graph theory, Cytoscape.js is an absolute powerhouse.</p>
<p><strong>What’s awesome:</strong></p>
<ul class="wp-block-list">
<li>Blazing fast, even with thousands of elements</li>
<li>Uses WebGL for rendering large networks</li>
<li>Rich set of graph algorithms built in</li>
<li>Used by major tech companies like Amazon, Google, and Microsoft</li>
<li>Fantastic for scientific and research applications</li>
</ul>
<p><strong>The catch:</strong></p>
<ul class="wp-block-list">
<li>Steeper learning curve if you’re new to graph theory</li>
<li>Not as focused on business-style diagrams like org charts</li>
</ul>
<p><strong>Perfect for:</strong> Network analysis, relationship mapping, scientific visualizations, and any project dealing with complex interconnected data.</p>
<p><a href="https://js.cytoscape.org/" target="_blank" rel="noopener">Check out Cytoscape.js →</a></p>
<h3 class="wp-block-heading">3. React Flow</h3>
<p>If you’re a React developer, this one’s a no-brainer. React Flow is specifically designed for building node-based editors and interactive diagrams in React apps.</p>
<p><strong>What’s awesome:</strong></p>
<ul class="wp-block-list">
<li>Built specifically for React with hooks and components</li>
<li>Smooth interactions right out of the box</li>
<li>Elegant API that feels natural for React devs</li>
<li>Active development and growing community</li>
<li>Smart rendering optimizations (only updates what changes)</li>
</ul>
<p><strong>The catch:</strong></p>
<ul class="wp-block-list">
<li>React-specific, so not ideal if you’re using another framework</li>
<li>Relatively newer library compared to some others</li>
</ul>
<p><strong>Perfect for:</strong> React applications needing workflow editors, node-based interfaces, or any interactive diagram component.</p>
<p><a href="https://reactflow.dev/" target="_blank" rel="noopener">Check out React Flow →</a></p>
<h3 class="wp-block-heading">4. diagrams.net (formerly draw.io) / mxGraph</h3>
<p>When you need a complete diagramming solution rather than just a library, diagrams.net (powered by the open-source mxGraph library) delivers.</p>
<p><strong>What’s awesome:</strong></p>
<ul class="wp-block-list">
<li>Full-featured diagram editor that works standalone or embedded</li>
<li>Massive selection of shape libraries and templates</li>
<li>Desktop apps, web version, and embeddable components</li>
<li>Client-side processing for privacy (no data sent to servers)</li>
<li>Mature and widely used in production</li>
</ul>
<p><strong>The catch:</strong></p>
<ul class="wp-block-list">
<li>More of a complete application than just a library</li>
<li>mxGraph itself isn’t actively developed anymore (focus is on diagrams.net)</li>
</ul>
<p><strong>Perfect for:</strong> General diagramming needs, standalone applications, or when you want to embed a full diagram editor.</p>
<p><a href="https://app.diagrams.net/" target="_blank" rel="noopener">Try diagrams.net →</a> | <a href="https://github.com/jgraph/drawio" target="_blank" rel="noopener">diagrams.net GitHub →</a> | <a href="https://github.com/jgraph/mxgraph" target="_blank" rel="noopener">mxGraph GitHub →</a></p>
<h3 class="wp-block-heading">5. D3.js</h3>
<p>The venerable D3.js isn’t specifically a diagramming library, but it’s the Swiss Army knife of data visualization and can definitely create interactive diagrams.</p>
<p><strong>What’s awesome:</strong></p>
<ul class="wp-block-list">
<li>Unmatched flexibility and customization</li>
<li>Direct DOM manipulation for precise control</li>
<li>Incredible community support and examples</li>
<li>Powers some of the web’s most impressive visualizations</li>
</ul>
<p><strong>The catch:</strong></p>
<ul class="wp-block-list">
<li>Significant learning curve</li>
<li>Requires more code for basic functionality</li>
<li>You’ll need to build diagramming features yourself</li>
</ul>
<p><strong>Perfect for:</strong> Custom visualizations where you need complete control, unique diagrams that don’t fit standard patterns.</p>
<p><a href="https://d3js.org/" target="_blank" rel="noopener">Check out D3.js →</a></p>
<h3 class="wp-block-heading">6. Vis.js Network</h3>
<p>For straightforward network visualizations without the complexity of Cytoscape.js, Vis.js Network component is worth a look.</p>
<p><strong>What’s awesome:</strong></p>
<ul class="wp-block-list">
<li>Easy to get started with</li>
<li>Physics-based layouts that create natural-looking networks</li>
<li>Interactive nodes and edges with customizable appearance</li>
<li>Handles relatively large datasets efficiently</li>
</ul>
<p><strong>The catch:</strong></p>
<ul class="wp-block-list">
<li>Limited to network-style visualizations</li>
<li>Not as performant as Cytoscape.js for very large graphs</li>
</ul>
<p><strong>Perfect for:</strong> Simple to medium complexity network visualizations and relationship graphs.</p>
<p><a href="https://visjs.org/" target="_blank" rel="noopener">Check out Vis.js →</a></p>
<h2 class="wp-block-heading">Features Comparison, Part 1</h2>
<figure class="wp-block-table"><table class="has-fixed-layout mtr-table mtr-thead-th"><thead><tr><th data-mtr-content="Feature" class="mtr-th-tag"><div class="mtr-cell-content">Feature</div></th><th data-mtr-content="GoJS" class="mtr-th-tag"><div class="mtr-cell-content">GoJS</div></th><th data-mtr-content="JointJS (Free)" class="mtr-th-tag"><div class="mtr-cell-content">JointJS (Free)</div></th><th data-mtr-content="Cytoscape.js" class="mtr-th-tag"><div class="mtr-cell-content">Cytoscape.js</div></th></tr></thead><tbody><tr><td data-mtr-content="Feature" class="mtr-td-tag"><div class="mtr-cell-content">License</div></td><td data-mtr-content="GoJS" class="mtr-td-tag"><div class="mtr-cell-content">Commercial</div></td><td data-mtr-content="JointJS (Free)" class="mtr-td-tag"><div class="mtr-cell-content">Open-source (MIT)</div></td><td data-mtr-content="Cytoscape.js" class="mtr-td-tag"><div class="mtr-cell-content">Open-source (MIT)</div></td></tr><tr><td data-mtr-content="Feature" class="mtr-td-tag"><div class="mtr-cell-content">Rendering</div></td><td data-mtr-content="GoJS" class="mtr-td-tag"><div class="mtr-cell-content">Canvas</div></td><td data-mtr-content="JointJS (Free)" class="mtr-td-tag"><div class="mtr-cell-content">SVG</div></td><td data-mtr-content="Cytoscape.js" class="mtr-td-tag"><div class="mtr-cell-content">Canvas/WebGL</div></td></tr><tr><td data-mtr-content="Feature" class="mtr-td-tag"><div class="mtr-cell-content">Diagram Types</div></td><td data-mtr-content="GoJS" class="mtr-td-tag"><div class="mtr-cell-content">Flowcharts, org charts, BPMN, etc.</div></td><td data-mtr-content="JointJS (Free)" class="mtr-td-tag"><div class="mtr-cell-content">Basic diagrams</div></td><td data-mtr-content="Cytoscape.js" class="mtr-td-tag"><div class="mtr-cell-content">Network/graph focused</div></td></tr><tr><td data-mtr-content="Feature" class="mtr-td-tag"><div class="mtr-cell-content">Interactive Editing</div></td><td data-mtr-content="GoJS" class="mtr-td-tag"><div class="mtr-cell-content">Extensive</div></td><td data-mtr-content="JointJS (Free)" class="mtr-td-tag"><div class="mtr-cell-content">Basic</div></td><td data-mtr-content="Cytoscape.js" class="mtr-td-tag"><div class="mtr-cell-content">Moderate</div></td></tr><tr><td data-mtr-content="Feature" class="mtr-td-tag"><div class="mtr-cell-content">Layout Algorithms</div></td><td data-mtr-content="GoJS" class="mtr-td-tag"><div class="mtr-cell-content">Multiple</div></td><td data-mtr-content="JointJS (Free)" class="mtr-td-tag"><div class="mtr-cell-content">Basic</div></td><td data-mtr-content="Cytoscape.js" class="mtr-td-tag"><div class="mtr-cell-content">Multiple</div></td></tr><tr><td data-mtr-content="Feature" class="mtr-td-tag"><div class="mtr-cell-content">Learning Curve</div></td><td data-mtr-content="GoJS" class="mtr-td-tag"><div class="mtr-cell-content">Moderate</div></td><td data-mtr-content="JointJS (Free)" class="mtr-td-tag"><div class="mtr-cell-content">Moderate</div></td><td data-mtr-content="Cytoscape.js" class="mtr-td-tag"><div class="mtr-cell-content">Steep</div></td></tr><tr><td data-mtr-content="Feature" class="mtr-td-tag"><div class="mtr-cell-content">Documentation</div></td><td data-mtr-content="GoJS" class="mtr-td-tag"><div class="mtr-cell-content">Extensive</div></td><td data-mtr-content="JointJS (Free)" class="mtr-td-tag"><div class="mtr-cell-content">Good</div></td><td data-mtr-content="Cytoscape.js" class="mtr-td-tag"><div class="mtr-cell-content">Extensive</div></td></tr></tbody></table></figure>
<h2 class="wp-block-heading">Features Comparison, Part 2</h2>
<figure class="wp-block-table"><table class="has-fixed-layout mtr-table mtr-thead-th"><thead><tr><th data-mtr-content="Feature" class="mtr-th-tag"><div class="mtr-cell-content">Feature</div></th><th data-mtr-content="React Flow" class="mtr-th-tag"><div class="mtr-cell-content">React Flow</div></th><th data-mtr-content="diagrams.net" class="mtr-th-tag"><div class="mtr-cell-content">diagrams.net</div></th><th data-mtr-content="D3.js" class="mtr-th-tag"><div class="mtr-cell-content">D3.js</div></th></tr></thead><tbody><tr><td data-mtr-content="Feature" class="mtr-td-tag"><div class="mtr-cell-content">License</div></td><td data-mtr-content="React Flow" class="mtr-td-tag"><div class="mtr-cell-content">Open-source (MIT)</div></td><td data-mtr-content="diagrams.net" class="mtr-td-tag"><div class="mtr-cell-content">Open-source (Apache)</div></td><td data-mtr-content="D3.js" class="mtr-td-tag"><div class="mtr-cell-content">Open-source (BSD)</div></td></tr><tr><td data-mtr-content="Feature" class="mtr-td-tag"><div class="mtr-cell-content">Rendering</div></td><td data-mtr-content="React Flow" class="mtr-td-tag"><div class="mtr-cell-content">SVG/HTML</div></td><td data-mtr-content="diagrams.net" class="mtr-td-tag"><div class="mtr-cell-content">SVG</div></td><td data-mtr-content="D3.js" class="mtr-td-tag"><div class="mtr-cell-content">SVG</div></td></tr><tr><td data-mtr-content="Feature" class="mtr-td-tag"><div class="mtr-cell-content">Diagram Types</div></td><td data-mtr-content="React Flow" class="mtr-td-tag"><div class="mtr-cell-content">Node-based</div></td><td data-mtr-content="diagrams.net" class="mtr-td-tag"><div class="mtr-cell-content">Flowcharts, UML, etc.</div></td><td data-mtr-content="D3.js" class="mtr-td-tag"><div class="mtr-cell-content">Custom</div></td></tr><tr><td data-mtr-content="Feature" class="mtr-td-tag"><div class="mtr-cell-content">Interactive Editing</div></td><td data-mtr-content="React Flow" class="mtr-td-tag"><div class="mtr-cell-content">Extensive</div></td><td data-mtr-content="diagrams.net" class="mtr-td-tag"><div class="mtr-cell-content">Extensive</div></td><td data-mtr-content="D3.js" class="mtr-td-tag"><div class="mtr-cell-content">Requires coding</div></td></tr><tr><td data-mtr-content="Feature" class="mtr-td-tag"><div class="mtr-cell-content">Layout Algorithms</div></td><td data-mtr-content="React Flow" class="mtr-td-tag"><div class="mtr-cell-content">Basic</div></td><td data-mtr-content="diagrams.net" class="mtr-td-tag"><div class="mtr-cell-content">Multiple</div></td><td data-mtr-content="D3.js" class="mtr-td-tag"><div class="mtr-cell-content">Requires coding</div></td></tr><tr><td data-mtr-content="Feature" class="mtr-td-tag"><div class="mtr-cell-content">Learning Curve</div></td><td data-mtr-content="React Flow" class="mtr-td-tag"><div class="mtr-cell-content">Low (for React devs)</div></td><td data-mtr-content="diagrams.net" class="mtr-td-tag"><div class="mtr-cell-content">Low</div></td><td data-mtr-content="D3.js" class="mtr-td-tag"><div class="mtr-cell-content">Steep</div></td></tr><tr><td data-mtr-content="Feature" class="mtr-td-tag"><div class="mtr-cell-content">Documentation</div></td><td data-mtr-content="React Flow" class="mtr-td-tag"><div class="mtr-cell-content">Good</div></td><td data-mtr-content="diagrams.net" class="mtr-td-tag"><div class="mtr-cell-content">Good</div></td><td data-mtr-content="D3.js" class="mtr-td-tag"><div class="mtr-cell-content">Extensive</div></td></tr></tbody></table></figure>
<h2 class="wp-block-heading">Picking the Right Tool for Your Job</h2>
<p>Choosing the right alternative to GoJS really depends on what you’re trying to build:</p>
<ul class="wp-block-list">
<li><strong>Building a network analysis tool?</strong> Cytoscape.js is your best bet.</li>
<li><strong>Creating a React-based workflow editor?</strong> React Flow will save you tons of time.</li>
<li><strong>Need a complete diagramming solution?</strong> diagrams.net/draw.io has you covered.</li>
<li><strong>Creating custom, unique visualizations?</strong> D3.js gives you total control.</li>
<li><strong>Want something closest to GoJS?</strong> Try JointJS Community Edition.</li>
<li><strong>Just need simple network visualization?</strong> Vis.js Network will do the trick.</li>
</ul>
<p>Remember, the best library is the one that fits your specific needs, technical stack, and the complexity of diagrams you’re creating. Don’t be afraid to experiment with a couple of options before committing.</p>
<h2 class="wp-block-heading">The Bottom Line</h2>
<p>While GoJS is a fantastic library with comprehensive features, these open-source alternatives prove you don’t always need a commercial license to create impressive interactive diagrams. Each library has its own strengths and focus areas, so take some time to explore them based on your project requirements.</p>
<p>Happy diagramming!</p>
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<p><strong>Additional Resources:</strong></p>
<ul class="wp-block-list">
<li><a href="https://alternativeto.net/software/gojs/?license=opensource" target="_blank" rel="noopener">AlternativeTo: GoJS Alternatives</a></li>
<li><a href="https://www.jointjs.com/blog/javascript-diagramming-libraries" target="_blank" rel="noopener">JavaScript Diagramming Libraries Comparison</a></li>
<li><a href="https://modeling-languages.com/javascript-drawing-libraries-diagrams/" target="_blank" rel="noopener">JavaScript Drawing Libraries for Diagrams</a></li>
<li><a href="https://github.com/xyflow/awesome-node-based-uis" target="_blank" rel="noopener">Node-Based UI Libraries Collection</a></li>
</ul>
]]></content:encoded>
<wfw:commentRss>https://portalzine.de/visualize-this-open-source-diagram-tools-to-replace-gojs/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>Sorry, Not Sorry: Why You Can’t Escape AI in Your Dev Life (And Why That’s Mostly Okay)</title>
<link>https://portalzine.de/sorry-not-sorry-why-you-cant-escape-ai-in-your-dev-life-and-why-thats-mostly-okay/</link>
<comments>https://portalzine.de/sorry-not-sorry-why-you-cant-escape-ai-in-your-dev-life-and-why-thats-mostly-okay/#respond</comments>
<dc:creator><![CDATA[]]></dc:creator>
<pubDate>Fri, 11 Apr 2025 09:54:34 +0000</pubDate>
<category><![CDATA[Development]]></category>
<category><![CDATA[AI]]></category>
<guid isPermaLink="false">https://portalzine.de/?p=8386</guid>
<description><![CDATA[Remember when the scariest thing about coding was forgetting a semicolon? Those were simpler times. Now your IDE is literally finishing your sentences like an overeager partner who may or may not be planning digital world domination. AI tools have crashed the dev party, and whether you’re grabbing the aux cord to blast ‘Welcome to […]]]></description>
<content:encoded><![CDATA[
<p>Remember when the scariest thing about coding was forgetting a semicolon? Those were simpler times. Now your IDE is literally finishing your sentences like an overeager partner who may or may not be planning digital world domination. </p>
<p>AI tools have crashed the dev party, and whether you’re grabbing the aux cord to blast ‘Welcome to the Machine’ or hiding in the bathroom hoping they’ll leave, one thing’s crystal clear: these algorithmic party crashers aren’t taking the hint. They’re here to stay, they’re reshaping everything, and honestly? The relationship status is… complicated.</p>
<h2 class="wp-block-heading">The Good Stuff: Why Some Devs Are Swiping Right</h2>
<p>Look, I get it—you’re sick of hearing how AI is going to change everything. But here’s the uncomfortable truth: the numbers don’t lie. According to <a href="https://www.deloitte.com/uk/en/Industries/technology/blogs/2024/the-future-of-coding-is-here-how-ai-is-reshaping-software-development.html" target="_blank" rel="noopener">Deloitte research</a>, AI can save developers up to a whopping 50% of their time on generic programming tasks. That’s like getting every other day off work while still getting paid. The 2024 <a href="https://middlewarehq.com/blog/how-ai-is-reshaping-software-development-insights-from-the-2024-dora-report" target="_blank" rel="noopener">DORA report</a> found teams using AI tools detected and fixed bugs up to 40% faster. And let’s be real—debugging is the coding equivalent of cleaning the bathroom. Anything that makes that process less painful deserves at least a golf clap.</p>
<p>Plenty of developers are already all-in on the AI hype train. They’re letting GitHub Copilot finish their sentences, having ChatGPT explain complex algorithms, and generally vibing with their new silicon buddies. For these early adopters, AI isn’t replacing their jobs—it’s eliminating the soul-crushing parts they never wanted to do anyway.</p>
<h2 class="wp-block-heading">The Not-So-Good Stuff: Red Flags in Your Digital Relationship</h2>
<p>But hold up—before you commit to this digital relationship, let’s talk red flags. Remember that perfect code GitHub Copilot generated for you? <a href="https://arxiv.org/html/2204.04741v5" target="_blank" rel="noopener">Research suggests</a> it might be churning out insecure code about 40% of the time. Yikes. A <a href="https://visualstudiomagazine.com/articles/2024/01/25/copilot-research.aspx" target="_blank" rel="noopener">recent study</a> even found “disconcerting trends for maintainability” in AI-generated code. Translation: that quick fix might become tomorrow’s maintenance nightmare.</p>
<p>Then there’s the whole “is this even legal?” question. Copilot was trained on billions of lines of code, much of it open-source. Some developers are raising eyebrows about intellectual property rights, wondering if their code is being regurgitated without credit. And don’t forget the privacy concerns—as <a href="https://www.kolide.com/blog/github-copilot-isn-t-worth-the-risk" target="_blank" rel="noopener">one critic pointedly observed</a>, “Copilot is a keylogger.” Everything you type could potentially become training data for the next iteration. Feeling comfortable yet?</p>
<h2 class="wp-block-heading">Hot Takes From Both Sides</h2>
<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>“I haven’t written a for-loop in six months. Copilot does it better than I ever did.” —AI Enthusiast</p>
</blockquote>
<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>“I’ll start using AI when it stops suggesting solutions that make me question its sanity.” —AI Skeptic</p>
</blockquote>
<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>“My team shipped in 3 weeks what used to take 3 months. The code quality? Let’s just say we’re keeping our QA team very busy.” —Pragmatic Manager</p>
</blockquote>
<h2 class="wp-block-heading">The Middle Ground: It’s Just Another Tool (But Like, a Really Fancy One)</h2>
<p>Maybe the truth is somewhere in between the utopian AI wonderland and the dystopian code-pocalypse. According to <a href="https://www.mckinsey.com/capabilities/quantumblack/our-insights/the-state-of-ai" target="_blank" rel="noopener">McKinsey’s 2024 survey</a>, 53% of executives report regularly using generative AI at work—but interestingly, fewer mid-level managers do. This suggests AI is still finding its place in the development workflow, not conquering it overnight.</p>
<p>The most level-headed take might be seeing AI as just another tool in an already crowded toolbox. Sure, it’s a shiny hammer that occasionally mistakes thumbs for nails, but it’s still just a hammer. The developers who thrive won’t be the ones who refuse to use AI or who blindly accept its every suggestion. They’ll be the ones who understand both its capabilities and limitations, who know when to leverage its strengths and when to rely on their own expertise.</p>
<h2 class="wp-block-heading">Why Resistance Is Probably Futile</h2>
<p>Here’s why fighting against AI in development is like trying to swim against a tsunami while wearing concrete shoes: the market has decided. <a href="https://www.forrester.com/blogs/predictions-2025-software-development/" target="_blank" rel="noopener">Forrester’s 2025 predictions</a> suggest AI will be embedded in every part of the software development process. Companies facing developer shortages are turning to AI to bridge the gap. Your competitors are already using these tools to ship faster. Love it or hate it, AI adoption in development isn’t slowing down—it’s accelerating.</p>
<p>The question isn’t whether AI will be part of development; it’s how you’ll adapt your workflow to incorporate it while mitigating its risks. Because while you’re debating whether to use it, someone else is figuring out how to use it better.</p>
<h2 class="wp-block-heading">Plot Twist: The Real Winners Aren’t Who You Think</h2>
<p>Here’s where things get interesting. The real winners in this AI revolution won’t be the evangelists who blindly trust everything the machine spits out. Nor will they be the purists who refuse to touch AI with a ten-foot keyboard.</p>
<p>The developers who’ll truly thrive will be the critical thinkers—those who can leverage AI’s speed while applying human judgment to its output. As Clark notes in <a href="https://www.dice.com/career-advice/how-ai-will-impact-software-development-in-2025-and-beyond" target="_blank" rel="noopener">this Dice article</a>, “Five years from now, AI will be embedded in every part of the software development process,” but it’s still going to be a co-pilot, not the captain.</p>
<p>Think less “AI will code for me” and more “AI will handle the boring parts so I can focus on the challenging, creative aspects that humans excel at.” The sweet spot is in the collaboration, not the replacement.</p>
<h2 class="wp-block-heading">So Where Does This Leave Us?</h2>
<p>So where does all this leave us mere mortals with our manually typed for-loops and caffeine dependencies? Probably somewhere between excitement and existential dread—which, if we’re being honest, is where most developers live anyway.</p>
<p>Here’s my take: AI isn’t going to replace developers any more than calculators replaced mathematicians. But it will change what being a developer means. The most valuable skills might shift from memorizing syntax to knowing which problems AI can solve and which ones require good old-fashioned human ingenuity.</p>
<p>The developers who thrive will be those who form a healthy relationship with AI—one where you’re neither rejecting its help nor letting it make all your decisions. Think of it as pair programming with a partner who’s simultaneously brilliant and occasionally hallucinates.</p>
<p>In the end, whether you’re an AI evangelist or a skeptic, there’s one point we can all agree on: this tech is reshaping our field, and the only truly risky move is pretending it isn’t happening. So maybe it’s time to swipe right on AI tools—just keep your eyes open, your code reviews thorough, and your sense of humor intact. After all, if the machines do eventually take over, you’ll want them to remember you were nice to them.</p>
]]></content:encoded>
<wfw:commentRss>https://portalzine.de/sorry-not-sorry-why-you-cant-escape-ai-in-your-dev-life-and-why-thats-mostly-okay/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>CSS Libraries That Are Actually Worth Your Time in 2025</title>
<link>https://portalzine.de/the-best-css-libraries-to-use-in-2025/</link>
<comments>https://portalzine.de/the-best-css-libraries-to-use-in-2025/#respond</comments>
<dc:creator><![CDATA[]]></dc:creator>
<pubDate>Fri, 11 Apr 2025 09:44:11 +0000</pubDate>
<category><![CDATA[Design]]></category>
<category><![CDATA[CSS]]></category>
<category><![CDATA[Development]]></category>
<category><![CDATA[SCSS]]></category>
<guid isPermaLink="false">https://portalzine.de/?p=1711</guid>
<description><![CDATA[Hey there, fellow developers! The CSS world keeps evolving, and it’s pretty wild how many awesome tools we have at our fingertips in 2025. Whether you’re building a quick side project or tackling a massive web app, these CSS frameworks and libraries can seriously level up your development game. Let’s dive into the ones that […]]]></description>
<content:encoded><![CDATA[
<p>Hey there, fellow developers! The CSS world keeps evolving, and it’s pretty wild how many awesome tools we have at our fingertips in 2025. Whether you’re building a quick side project or tackling a massive web app, these CSS frameworks and libraries can seriously level up your development game. Let’s dive into the ones that are actually worth your time this year.</p>
<p><strong>BTW, I am really digging the MVP.css approach ;)</strong></p>
<h2 class="wp-block-heading">1. Tailwind CSS – Still the Utility King</h2>
<p><a href="https://tailwindcss.com" target="_blank" rel="noopener">https://tailwindcss.com</a></p>
<p>Tailwind is absolutely crushing it in 2025! This utility-first framework lets you slap together amazing designs right in your HTML without writing a single line of CSS. It’s basically developer catnip at this point.</p>
<p><strong>Why you’ll love it:</strong></p>
<ul class="wp-block-list">
<li>Build stuff crazy fast with utility classes</li>
<li>Customize everything through a simple config file</li>
<li>Tons of plugins from an awesome community</li>
<li>Perfect for complex UIs when you’re sick of writing custom CSS</li>
<li>Plays nice with React, Vue, Angular, or whatever framework you’re into</li>
</ul>
<h2 class="wp-block-heading">2. Bootstrap 6 – The Reliable Old Friend With New Tricks</h2>
<p><a href="https://getbootstrap.com" target="_blank" rel="noopener">https://getbootstrap.com</a></p>
<p>Bootstrap 6 is like that friend who keeps reinventing themselves. The latest version brings better CSS variables, accessibility improvements, and smoother integration with modern JS frameworks. It’s still the go-to when you need to ship something yesterday.</p>
<p><strong>Why it’s still awesome:</strong></p>
<ul class="wp-block-list">
<li>That grid system is <em>chef’s kiss</em> for responsive designs</li>
<li>Pre-built components that just work</li>
<li>Documentation that actually makes sense</li>
<li>Better CSS custom properties support</li>
<li>Works for both traditional sites and fancy modern apps</li>
</ul>
<h2 class="wp-block-heading">3. UnoCSS – The Speed Demon</h2>
<p><a href="https://unocss.dev" target="_blank" rel="noopener">https://unocss.dev</a></p>
<p>UnoCSS is the new kid on the block that’s turning heads. It’s an instant, on-demand atomic CSS engine that’s ridiculously fast and super flexible.</p>
<p><strong>Why it’s gaining fans:</strong></p>
<ul class="wp-block-list">
<li>Way faster than other atomic CSS frameworks</li>
<li>Customizable with preset configurations</li>
<li>Zero runtime overhead</li>
<li>Works with any framework or vanilla projects</li>
<li>Perfect for performance-obsessed developers</li>
</ul>
<h2 class="wp-block-heading">4. Open Props – CSS Variables on Steroids</h2>
<p><a href="https://open-props.style" target="_blank" rel="noopener">https://open-props.style</a></p>
<p>Open Props takes CSS custom properties to a whole new level. It’s basically a collection of carefully crafted variables that make your designs consistent without the bloat of a full framework.</p>
<p><strong>Why it’s worth checking out:</strong></p>
<ul class="wp-block-list">
<li>Drop-in design tokens that just work</li>
<li>Perfect for design systems</li>
<li>Mix and match only what you need</li>
<li>Zero opinion on your HTML structure</li>
<li>Works alongside any other framework</li>
</ul>
<h2 class="wp-block-heading">5. Chakra UI – The Accessibility Champion</h2>
<p><a href="https://chakra-ui.com" target="_blank" rel="noopener">https://chakra-ui.com</a></p>
<p>Chakra UI keeps climbing the popularity charts, especially for React devs who care about building accessible interfaces without the headache.</p>
<p><strong>Why people are loving it:</strong></p>
<ul class="wp-block-list">
<li>Accessibility features baked right in</li>
<li>Component-based styling that’s super intuitive</li>
<li>Theme support that actually makes sense</li>
<li>Dark mode without the drama</li>
<li>Less custom CSS = happier developers</li>
</ul>
<h2 class="wp-block-heading">6. Water.css – The Minimalist Dream</h2>
<p><a href="https://watercss.kognise.dev" target="_blank" rel="noopener">https://watercss.kognise.dev</a></p>
<p>Water.css is the definition of “less is more.” It’s a drop-in stylesheet that makes plain HTML look surprisingly good without any classes or configuration.</p>
<p><strong>Why it’s refreshing:</strong></p>
<ul class="wp-block-list">
<li>Zero classes needed – just write semantic HTML</li>
<li>Perfect for quick projects, docs, or prototypes</li>
<li>Light and dark themes built in</li>
<li>Ridiculously small file size</li>
<li>Makes your content shine, not your framework</li>
</ul>
<h2 class="wp-block-heading">7. MVP.css – HTML That Just Works</h2>
<p><a href="https://andybrewer.github.io/mvp" target="_blank" rel="noopener">https://andybrewer.github.io/mvp</a></p>
<p>Similar to Water.css, MVP.css is all about letting you focus on content instead of classes. Just write proper HTML, and it’ll look decent without any extra effort.</p>
<p><strong>Why it’s a game-changer:</strong></p>
<ul class="wp-block-list">
<li>No classes, no framework overhead</li>
<li>Responsive out of the box</li>
<li>Perfect for content-heavy sites</li>
<li>Makes semantic HTML look good by default</li>
<li>Ideal for quick projects when you don’t want to think about styling</li>
</ul>
<h2 class="wp-block-heading">8. DaisyUI – Tailwind’s Best Friend</h2>
<p><a href="https://daisyui.com" target="_blank" rel="noopener">https://daisyui.com</a></p>
<p>DaisyUI is like Tailwind’s cool cousin who brings components to the party. It extends Tailwind CSS with beautiful pre-designed components while keeping all the customization goodness.</p>
<p><strong>Why the combo works:</strong></p>
<ul class="wp-block-list">
<li>All of Tailwind’s utility power with ready-made components</li>
<li>Speeds up UI development like crazy</li>
<li>Fully customizable design system</li>
<li>Beautiful and accessible UIs without the hassle</li>
<li>Multiple themes including dark mode</li>
</ul>
<h2 class="wp-block-heading">9. Windi CSS – The Tailwind Alternative</h2>
<p><a href="https://windicss.org" target="_blank" rel="noopener">https://windicss.org</a></p>
<p>Windi CSS offers a fresh take on the utility-first approach, with on-demand generation and some unique features that Tailwind doesn’t have.</p>
<p><strong>Why some devs are switching:</strong></p>
<ul class="wp-block-list">
<li>Faster than traditional Tailwind in some cases</li>
<li>Supports arbitrary values without extra config</li>
<li>Variant groups for cleaner HTML</li>
<li>Attribute-based utilities</li>
<li>No PurgeCSS needed</li>
</ul>
<h2 class="wp-block-heading">10. Bulma – The Flexbox Master</h2>
<p><a href="https://bulma.io" target="_blank" rel="noopener">https://bulma.io</a></p>
<p>Bulma keeps things simple with its Flexbox-based approach. If you’re into clean, readable CSS and a straightforward layout system, Bulma’s still a solid choice in 2025.</p>
<p><strong>Why it works for many projects:</strong></p>
<ul class="wp-block-list">
<li>Zero JavaScript dependencies</li>
<li>Intuitive and flexible layouts</li>
<li>Code that actually makes sense when you read it</li>
<li>Easy to customize with Sass</li>
<li>Great docs for when you get stuck</li>
</ul>
<h2 class="wp-block-heading">11. Lightning CSS – The Performance Optimizer</h2>
<p><a href="https://lightningcss.dev" target="_blank" rel="noopener">https://lightningcss.dev</a></p>
<p>Lightning CSS isn’t a traditional framework but rather an extremely fast CSS parser, transformer, and bundler that can supercharge your existing styles.</p>
<p><strong>Why performance geeks love it:</strong></p>
<ul class="wp-block-list">
<li>Ridiculously fast processing</li>
<li>Better minification than traditional tools</li>
<li>Modern CSS features with automatic fallbacks</li>
<li>Works with any framework or vanilla CSS</li>
<li>Perfect for production optimization</li>
</ul>
<h2 class="wp-block-heading">12. Foundation – The Enterprise Option</h2>
<p><a href="https://get.foundation" target="_blank" rel="noopener">https://get.foundation</a></p>
<p>Foundation continues to be the go-to for serious enterprise projects that need rock-solid reliability and advanced responsive features.</p>
<p><strong>Why it’s still relevant:</strong></p>
<ul class="wp-block-list">
<li>Mobile-first approach that actually works</li>
<li>Flexible grid for complex layouts</li>
<li>Advanced responsive tools beyond breakpoints</li>
<li>Customizable through Sass</li>
<li>Built for performance and accessibility</li>
</ul>
<h2 class="wp-block-heading">13. Pico.css – The Semantic Minimalist</h2>
<p><a href="https://picocss.com" target="_blank" rel="noopener">https://picocss.com</a></p>
<p>Pico.css focuses on making native HTML elements look great without additional classes, perfect for when you want to keep things clean and semantic.</p>
<p><strong>Why minimalists love it:</strong></p>
<ul class="wp-block-list">
<li>Class-free styling that just works</li>
<li>Lightweight and fast</li>
<li>Modern web standards support</li>
<li>Elegant default styling without the bloat</li>
<li>Light/dark modes that respect user preferences</li>
</ul>
<h2 class="wp-block-heading">14. UIkit – The All-in-One Solution</h2>
<p><a href="https://getuikit.com" target="_blank" rel="noopener">https://getuikit.com</a></p>
<p>UIkit provides a comprehensive framework with powerful components and flexible layouts for developers who want a complete solution in one package.</p>
<p><strong>Why it’s a solid choice:</strong></p>
<ul class="wp-block-list">
<li>Modular architecture that keeps things organized</li>
<li>Rich component library for any UI need</li>
<li>Mobile-friendly from the ground up</li>
<li>Smooth animations without extra libraries</li>
<li>Professional-looking results with minimal effort</li>
</ul>
<h2 class="wp-block-heading">The Bottom Line</h2>
<p>The CSS landscape in 2025 is all about choice – whether you’re team utility-first, component-based, or minimalist, there’s something awesome waiting for you. My advice? Pick the one that matches your project’s needs and your personal style. Sometimes the “best” framework is simply the one that helps you ship faster and makes you happy while coding.</p>
<p><strong>Keep on styling!</strong></p>
]]></content:encoded>
<wfw:commentRss>https://portalzine.de/the-best-css-libraries-to-use-in-2025/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
<item>
<title>lnav – A Powerful Tool for Log File Debugging</title>
<link>https://portalzine.de/lnav-a-powerful-tool-for-log-file-debugging/</link>
<comments>https://portalzine.de/lnav-a-powerful-tool-for-log-file-debugging/#respond</comments>
<dc:creator><![CDATA[]]></dc:creator>
<pubDate>Tue, 08 Apr 2025 09:24:41 +0000</pubDate>
<category><![CDATA[Development]]></category>
<category><![CDATA[Debugging]]></category>
<category><![CDATA[Deployment]]></category>
<guid isPermaLink="false">https://portalzine.de/?p=8376</guid>
<description><![CDATA[Updated article from 2019. When debugging any complex application, log files are your best friends. However, navigating through thousands of log entries can quickly become overwhelming. This is where lnav (Log Navigator) comes in. This powerful command-line utility transforms the log analysis experience, making it easier to identify problems and troubleshoot issues in various applications […]]]></description>
<content:encoded><![CDATA[
<p><em>Updated article from 2019.</em></p>
<p>When debugging any complex application, log files are your best friends. However, navigating through thousands of log entries can quickly become overwhelming. This is where <strong>lnav</strong> (Log Navigator) comes in. This powerful command-line utility transforms the log analysis experience, making it easier to identify problems and troubleshoot issues in various applications and systems.</p>
<p>In this comprehensive guide, we’ll explore how to use lnav for efficient log file debugging, from basic usage to advanced log analysis techniques. We’ll use WordPress as one example, but the techniques apply to any application that generates log files.</p>
<h2 class="wp-block-heading">What is lnav?</h2>
<p>Lnav is a sophisticated log file navigator designed to enhance the way developers and system administrators interact with log files. Unlike traditional tools like <code>tail</code>, <code>grep</code>, or <code>less</code>, lnav offers a feature-rich environment specifically designed for log analysis.</p>
<h3 class="wp-block-heading">Key Features:</h3>
<ul class="wp-block-list">
<li><strong>Consolidated View</strong>: View multiple log files simultaneously in a single, chronologically ordered display</li>
<li><strong>Syntax Highlighting</strong>: Automatic colorization of log levels, timestamps, and other elements</li>
<li><strong>Real-time Monitoring</strong>: Watch logs update in real-time with automatic refreshing</li>
<li><strong>Powerful Filtering</strong>: Filter log entries using regular expressions</li>
<li><strong>SQL Queries</strong>: Run SQL queries against your logs to extract specific information</li>
<li><strong>Timestamps Navigation</strong>: Easily jump to specific time periods</li>
<li><strong>Customizable Formats</strong>: Support for custom log formats, including WordPress</li>
<li><strong>Bookmarking</strong>: Mark important log entries for later reference</li>
</ul>
<h2 class="wp-block-heading">Installing lnav</h2>
<p>Before diving into WordPress debugging, let’s get lnav installed on your system.</p>
<h3 class="wp-block-heading">Linux</h3>
<p><strong>Debian/Ubuntu</strong>:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">sudo apt update
sudo apt install lnav</pre></div>
<p><strong>Fedora</strong>:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">sudo dnf install lnav</pre></div>
<p><strong>CentOS/RHEL</strong>:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">sudo yum install lnav</pre></div>
<p><strong>Arch Linux</strong>:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">sudo pacman -S lnav</pre></div>
<h3 class="wp-block-heading">macOS</h3>
<p>Using Homebrew:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">brew install lnav</pre></div>
<h3 class="wp-block-heading">Windows</h3>
<p>Using Chocolatey:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">choco install lnav</pre></div>
<p>Alternatively, download binaries from the <a href="https://github.com/tstack/lnav/releases" target="_blank" rel="noopener">lnav GitHub releases page</a>.</p>
<h2 class="wp-block-heading">Configuring Applications for Logging</h2>
<p>Before using lnav, you need to ensure your applications are configured to generate detailed logs. Here’s an example of setting up WordPress for logging, which demonstrates a typical configuration process:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">// Enable debugging
define('WP_DEBUG', true);
// Enable debug logging to wp-content/debug.log
define('WP_DEBUG_LOG', true);
// Display errors on page (set to false in production)
define('WP_DEBUG_DISPLAY', false);
// For development: Disable JavaScript concatenation
define('SCRIPT_DEBUG', true);</pre></div>
<p>This WordPress configuration creates a <code>debug.log</code> file that captures PHP errors, warnings, and notices. Other applications will have their own logging configuration methods, but the general principle is to enable detailed logging to files that lnav can read.</p>
<h3 class="wp-block-heading">Other Common Logging Configurations</h3>
<p>Different applications and systems have their own logging mechanisms:</p>
<ul class="wp-block-list">
<li><strong>Apache/Nginx</strong>: These web servers typically log to access.log and error.log files</li>
<li><strong>MySQL/MariaDB</strong>: Database logs can be configured to capture slow queries and errors</li>
<li><strong>System logs</strong>: Linux systems log to /var/log/syslog or through journald</li>
<li><strong>Application frameworks</strong>: Most frameworks like Laravel, Django, and Spring have configurable logging systems</li>
</ul>
<h2 class="wp-block-heading">Basic lnav Usage</h2>
<p>Let’s start with the basics of using lnav to analyze WordPress logs.</p>
<h3 class="wp-block-heading">Opening Log Files</h3>
<p>To open any log file with lnav, simply run:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">lnav /path/to/logfile.log</pre></div>
<p>One of lnav’s greatest strengths is the ability to monitor multiple log files simultaneously:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">lnav /var/log/apache2/access.log /var/log/apache2/error.log /var/log/mysql/error.log</pre></div>
<p>For example, with a WordPress site, you might monitor:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">lnav /path/to/wp-content/debug.log /var/log/apache2/error.log /var/log/php/errors.log</pre></div>
<p>This combined view helps you correlate events across different components of your application stack, making it easier to track issues that span multiple systems.</p>
<h3 class="wp-block-heading">Essential lnav Commands</h3>
<p>Once inside lnav, you’ll need these basic commands:</p>
<figure class="wp-block-table"><table class="has-fixed-layout mtr-table mtr-tr-th"><tbody><tr><th data-mtr-content="Key" class="mtr-th-tag"><div class="mtr-cell-content">Key</div></th><th data-mtr-content="Action" class="mtr-th-tag"><div class="mtr-cell-content">Action</div></th></tr><tr><td data-mtr-content="Key" class="mtr-td-tag"><div class="mtr-cell-content"><code>?</code></div></td><td data-mtr-content="Action" class="mtr-td-tag"><div class="mtr-cell-content">View help</div></td></tr><tr><td data-mtr-content="Key" class="mtr-td-tag"><div class="mtr-cell-content"><code>q</code></div></td><td data-mtr-content="Action" class="mtr-td-tag"><div class="mtr-cell-content">Quit</div></td></tr><tr><td data-mtr-content="Key" class="mtr-td-tag"><div class="mtr-cell-content"><code>e</code></div></td><td data-mtr-content="Action" class="mtr-td-tag"><div class="mtr-cell-content">Examine current line in text editor</div></td></tr><tr><td data-mtr-content="Key" class="mtr-td-tag"><div class="mtr-cell-content"><code>i</code></div></td><td data-mtr-content="Action" class="mtr-td-tag"><div class="mtr-cell-content">Enter interactive command mode</div></td></tr><tr><td data-mtr-content="Key" class="mtr-td-tag"><div class="mtr-cell-content"><code>/</code></div></td><td data-mtr-content="Action" class="mtr-td-tag"><div class="mtr-cell-content">Search forwards</div></td></tr><tr><td data-mtr-content="Key" class="mtr-td-tag"><div class="mtr-cell-content"><code>n</code></div></td><td data-mtr-content="Action" class="mtr-td-tag"><div class="mtr-cell-content">Move to next search hit</div></td></tr><tr><td data-mtr-content="Key" class="mtr-td-tag"><div class="mtr-cell-content"><code>N</code></div></td><td data-mtr-content="Action" class="mtr-td-tag"><div class="mtr-cell-content">Move to previous search hit</div></td></tr><tr><td data-mtr-content="Key" class="mtr-td-tag"><div class="mtr-cell-content"><code>f</code></div></td><td data-mtr-content="Action" class="mtr-td-tag"><div class="mtr-cell-content">Filter lines using a regular expression</div></td></tr><tr><td data-mtr-content="Key" class="mtr-td-tag"><div class="mtr-cell-content"><code>F</code></div></td><td data-mtr-content="Action" class="mtr-td-tag"><div class="mtr-cell-content">Clear active filters</div></td></tr><tr><td data-mtr-content="Key" class="mtr-td-tag"><div class="mtr-cell-content"><code>r</code></div></td><td data-mtr-content="Action" class="mtr-td-tag"><div class="mtr-cell-content">Toggle between relative/absolute timestamps</div></td></tr><tr><td data-mtr-content="Key" class="mtr-td-tag"><div class="mtr-cell-content"><code>;</code></div></td><td data-mtr-content="Action" class="mtr-td-tag"><div class="mtr-cell-content">Enter SQL query mode</div></td></tr></tbody></table></figure>
<h2 class="wp-block-heading">Practical Examples for Log Debugging</h2>
<p>Let’s look at some practical examples of using lnav for various debugging scenarios.</p>
<h3 class="wp-block-heading">Example 1: Filtering Specific Components</h3>
<p>If you suspect a particular component is causing issues, you can filter the logs to show only relevant entries:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag"># Start lnav with your log files
lnav /path/to/application.log
# Once inside lnav, press 'f' and type a filter:
f database
# Filter for a specific component
f authentication
# In a WordPress context, filter for a specific plugin:
f wp-content/plugins/specific-plugin-name
# Clear filter by pressing 'F'</pre></div>
<h3 class="wp-block-heading">Example 2: Using SQL Queries for Log Analysis</h3>
<p>Lnav’s SQL capabilities are extremely powerful for extracting insights from your logs:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag"># Press ';' to enter SQL mode, then type queries like:
# Count errors by type
;SELECT log_level, COUNT(*) FROM access_log GROUP BY log_level
# Find the most frequent errors
;SELECT message, COUNT(*) AS count
FROM error_log
GROUP BY message
ORDER BY count DESC
LIMIT 10
# Find events during a specific time period
;SELECT * FROM syslog
WHERE log_time BETWEEN '2023-04-01 00:00:00' AND '2023-04-01 23:59:59'
# For WordPress logs, you could look for errors in specific plugin files:
;SELECT * FROM debug_log
WHERE file_path LIKE '%plugin-name%'</pre></div>
<h3 class="wp-block-heading">Example 3: Advanced Filtering Techniques</h3>
<p>You can use regular expressions for more sophisticated filtering:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag"># Multiple conditions with regex
f (ERROR|FATAL)
# Finding database errors
f database error
# Finding specific error types (PHP example)
f PHP (Fatal|Parse) error
# Finding errors after a certain time
f '2023-04-01 14:00:00'
# For WordPress, finding specific hooks:
f 'apply_filters|do_action'</pre></div>
<h3 class="wp-block-heading">Example 4: Monitoring During Critical Operations</h3>
<p>System updates, deployments, and other critical operations can be risky. Set up monitoring before performing them:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag"># Set up monitoring before performing operations
lnav /var/log/syslog /var/log/auth.log /var/log/application.log
# For a web application like WordPress:
lnav /path/to/wp-content/debug.log /var/log/apache2/error.log
# Keep lnav running during the operation
# Press 'r' to toggle between relative and absolute timestamps
# Press 'p' to pause automatic tailing if needed</pre></div>
<h2 class="wp-block-heading">Customizing lnav for Different Log Formats</h2>
<p>Most applications produce logs in specific formats. You can enhance lnav’s capabilities by creating custom format definitions for your applications.</p>
<h3 class="wp-block-heading">Example: WordPress Custom Format</h3>
<p>Here’s an example of creating a custom format for WordPress logs. Create or edit <code>~/.lnav/formats/wordpress.json</code>:</p>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">{
"wordpress_debug": {
"title": "WordPress Debug Log",
"description": "Format for WordPress debug.log",
"url": "https://developer.wordpress.org/",
"regex": {
"standard": {
"pattern": "\\[(\\d{4}-\\d{2}-\\d{2} \\d{2}:\\d{2}:\\d{2})\\] PHP (\\w+): (.+) in (.+) on line (\\d+)"
}
},
"timestamp-format": [
"%Y-%m-%d %H:%M:%S"
],
"level-field": "level",
"level": {
"error": "Fatal error|Parse error",
"warning": "Warning|Notice",
"info": "Deprecated"
},
"value": {
"timestamp": { "kind": "string", "identifier": true },
"level": { "kind": "string", "identifier": true },
"message": { "kind": "string" },
"file": { "kind": "string" },
"line": { "kind": "integer" }
},
"sample": [
"[2023-04-01 12:34:56] PHP Warning: file_get_contents(): failed to open stream in /var/www/html/wp-content/plugins/example/file.php on line 123"
]
}
}</pre></div>
<p>Custom format definitions like this help lnav properly parse and display application-specific logs, enabling better filtering and SQL queries.</p>
<h3 class="wp-block-heading">Creating Custom Formats for Other Applications</h3>
<p>The same approach can be used for any application with a consistent log format. The key elements to define are:</p>
<ul class="wp-block-list">
<li>The regex pattern that matches log lines</li>
<li>The timestamp format for proper time-based navigation</li>
<li>Log levels for proper coloring and filtering</li>
<li>Named capturing groups for SQL access</li>
</ul>
<h2 class="wp-block-heading">Common Error Patterns in Different Applications</h2>
<p>Understanding common error patterns helps you create effective filters in lnav. Here are some examples from various applications:</p>
<h3 class="wp-block-heading">PHP/WordPress Errors</h3>
<ol class="wp-block-list">
<li><strong>Undefined Variables</strong>:</li>
</ol>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">PHP Notice: Undefined variable: variable_name</pre></div>
<ul class="wp-block-list">
<li><strong>Memory Exhaustion</strong>:</li>
</ul>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">PHP Fatal error: Allowed memory size of X bytes exhausted</pre></div>
<h3 class="wp-block-heading">Web Server Errors</h3>
<ol class="wp-block-list">
<li><strong>Apache 404 Errors</strong>:</li>
</ol>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">GET /missing-page HTTP/1.1" 404</pre></div>
<ul class="wp-block-list">
<li><strong>Permission Issues</strong>:</li>
</ul>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">AH00035: access to /protected denied (filesystem path '/var/www/html/protected')</pre></div>
<h3 class="wp-block-heading">Database Errors</h3>
<ol class="wp-block-list">
<li><strong>Connection Failures</strong>:</li>
</ol>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">ERROR 1040 (HY000): Too many connections</pre></div>
<ul class="wp-block-list">
<li><strong>Query Errors</strong>:</li>
</ul>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">ERROR 1054 (42S22): Unknown column in field list</pre></div>
<h2 class="wp-block-heading">Advanced Debugging Workflows</h2>
<p>Here are some advanced workflows for debugging application issues with lnav:</p>
<h3 class="wp-block-heading">Workflow 1: Tracing a User Experience Issue</h3>
<ol class="wp-block-list">
<li>Enable detailed logging in your application</li>
<li>Reproduce the issue while monitoring logs across multiple systems:<br></li>
</ol>
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="urvanov-syntax-highlighter-plain-tag">lnav /var/log/application.log /var/log/web-server/access.log /var/log/web-server/error.log</pre></div>
<h2 class="wp-block-heading">Thoughts</h2>
<p>Lnav transforms the often tedious task of log analysis into a more efficient and insightful process. For WordPress developers and administrators, it provides a powerful way to debug issues, monitor performance, and understand the inner workings of their sites.</p>
<p>By mastering lnav’s filtering, SQL capabilities, and navigation features, you can dramatically reduce the time needed to troubleshoot problems and gain deeper insights into your WordPress installation’s behavior.</p>
<p>Whether you’re dealing with plugin conflicts, performance issues, or mysterious errors, lnav equips you with the tools needed to cut through the noise and find the answers hidden in your logs.</p>
<h2 class="wp-block-heading">Additional Resources</h2>
<ul class="wp-block-list">
<li><a href="https://lnav.org/" target="_blank" rel="noopener">Official lnav documentation</a></li>
<li><a href="https://github.com/tstack/lnav" target="_blank" rel="noopener">GitHub repository</a></li>
<li><a href="https://wordpress.org/documentation/article/debugging-in-wordpress/" target="_blank" rel="noopener">WordPress Debugging Documentation</a></li>
</ul>
]]></content:encoded>
<wfw:commentRss>https://portalzine.de/lnav-a-powerful-tool-for-log-file-debugging/feed/</wfw:commentRss>
<slash:comments>0</slash:comments>
</item>
</channel>
</rss>

If you would like to create a banner that links to this page (i.e. this validation result), do the following:

Download the "valid RSS" banner.
Upload the image to your own server. (This step is important. Please do not link directly to the image on this server.)
Add this HTML to your page (change the image src attribute if necessary):

<a href="http://www.feedvalidator.org/check.cgi?url=https%3A//portalzine.de/feed%3Fclean"><img src="valid-rss-rogers.png" alt="[Valid RSS]" title="Validate my RSS feed" /></a>

If you would like to create a text link instead, here is the URL you can use:

http://www.feedvalidator.org/check.cgi?url=https%3A//portalzine.de/feed%3Fclean

Home · About · News · Docs · Terms