Making a Native Log Viewer App using Wails

I don’t know about you, but I know I’m having a bad day when I’m copying and pasting 1000s of lines of log output into TextEdit and trying to make sense of it. It’s even worse when it’s late in the day and the characters start to burn into your eyes.

Stare at this for 5 minutes, I dare you.

I spent a whole 2 minutes looking for something where I could just dump log files and have them presented back to me in some structured way. Gold medals if I could filter the output.

This was the closest thing I could find. Not exactly what I had in mind 🎵

Finally, an opportunity to embark on a new project!

Thing is, for most of my career I’ve worked on backend systems and websites. I think I did some Android stuff at some point, but everytime I try to remember I black out and 5 minutes later find myself in foetal position on the sofa screaming and crying.

React Native

A quick search and my first hit was React Native. How exciting! I’ve done a tonne of React so this is right up my alley.

Let me quickly just run npx create-expo-app@latest like the docs say and…​ and…​ wow that actually took 20 minutes.

OK, everything’s installed, my 750mb empty repo and I are ready to go. The docs say that starting everything off is as simple as npx expo start. Wow, this sure is easy! …​

❌  /Users/[REDACTED]/Library/Developer/Xcode/DerivedData/Oreille-bxxuvxrzbbojtictzbxfgyypfvxf/Build/Intermediates.noindex/ArchiveIntermediates/Oreille/BuildProductsPath/Release-iphoneos/RCT-Folly/folly.framework/Headers/folly/Optional.h:667:10: 'folly/experimental/coro/Coroutine.h' file not found
#include <folly/experimental/coro/Coroutine.h>
                                                           ^
❌  /Users/[REDACTED]/Library/Developer/Xcode/DerivedData/Oreille-bxxuvxrzbbojtictzbxfgyypfvxf/Build/Intermediates.noindex/ArchiveIntermediates/Oreille/BuildProductsPath/Release-iphoneos/RCT-Folly/folly.framework/Headers/folly/Optional.h:667:10: 'folly/experimental/coro/Coroutine.h' file not found
#include <folly/experimental/coro/Coroutine.h>
         ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
❌  /Users/[REDACTED]/Library/Developer/Xcode/DerivedData/Oreille-bxxuvxrzbbojtictzbxfgyypfvxf/Build/Intermediates.noindex/ArchiveIntermediates/Oreille/BuildProductsPath/Release-iphoneos/React-RCTAppDelegate/React_RCTAppDelegate.framework/Headers/RCTAppDelegate.h:8:9: could not build module 'React'
#import <React/RCTBridgeDelegate.h>
         ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
❌  /Users/[REDACTED]/Library/Developer/Xcode/DerivedData/Oreille-bxxuvxrzbbojtictzbxfgyypfvxf/Build/Intermediates.noindex/ArchiveIntermediates/Oreille/BuildProductsPath/Release-iphoneos/react-native-branch/RNBranch.framework/Headers/RNBranch.h:2:9: could not build module 'React'
#import <React/RCTBridgeModule.h>
 ~~~~~~~^

 The following build commands failed:
	CompileC /Users/[REDACTED]/Library/Developer/Xcode/DerivedData/Oreille-bxxuvxrzbbojtictzbxfgyypfvxf/Build/Intermediates.noindex/ArchiveIntermediates/Oreille/IntermediateBuildFilesPath/Oreille.build/Release-iphoneos/Oreille.build/Objects-normal/arm64/AppDelegate.o /Users/[REDACTED]/git/ios/Oreille/AppDelegate.mm normal arm64 objective-c++ com.apple.compilers.llvm.clang.1_0.compiler (in target 'Oreille' from project 'Oreille')
(1 failure)

WTF is that?

Bah, it doesn’t matter. To get an error like that when having run the 2nd command from the most professional looking README I’ve ever seen, well I must be one of 1000s of people to encounter it. I’ll just search their repository for the issue.

GitHub issue OPEN. Opened 2 weeks ago.

Do more cruel words exist? If you ask ChatGPT to rewrite that in 2 words it’ll say: "You’re f****d".

What the hell. I’m out of my depth before the hello world. I’ve got people suggesting to recursively chmod my cocoapod Podfile. Are they crazy?

Spoilt by consumer choice, I decided I didn’t want to go down the path of figuring out what a pbxproj is, or how far right I have to scroll to read the entire error message, and just try something else instead.

Wails

An opportunity to learn Go! Finally a language with a cool logo.

Wails lets you write your backend in Go, which is blazingly fast! And lets you write your frontend in JS, which is…​ Let’s move on.

I would bore you with the details, but everything kinda just worked. You can install Wails with Go:

go install github.com/wailsapp/wails/v2/cmd/wails@latest

If you don’t already have Go, I’d recommend installing Go version manager (GVM).

To initialise your project:

wails init -n log-viewer -t react

In this case we’re using React, but the default for Wails is actually Svelte, which is a lot of fun if you haven’t tried it already. Lot less boilerplate, but less mature than React.

To work on your project, with live-reload:

wails dev

You can right click the app window and open the inspector when in dev mode. Great for figuring out styles and seeing console errors.

And when you’re done building it is as simple as:

wails build

Log Viewer App

Take a look at my baby:

Figure 1. Single file open. Note how the colorscheme 😺 draws your eyes to the things of importance. You can change the viewing options to whatever suits you. I find that a lot of logs have ANSI codes from console colour output, but they’re horrendous to see. They’re automatically removed! Being able to filter logs by text inclusive or exclusive is super useful for filtering out noise.

Figure 2. Split screen with scroll lock. Note how the number of warnings/errors for each side are in the footer, so you can quickly see if there was a difference between the logs.

Figure 3. Paste logs, browse and open, or drag and drop as many files as you like. The Go backend is super fast and can process 10,000s lines in microseconds.

You can download it now on the App Store.