Archive for April 2018

The Angular applications are starting to become and more complicated with more layers on the client side then ever before. This means we should treat client-side applications similarly as back-end projects.
For non-dev environments, I would recommend mature libraries like Raygun or TrackJS to track issues over time and be able to resolve them for specific versions.
However in development environment we can use a bit more chatty tool that gives us a lot more information about is happening with client-side application. As we all know, sometimes it’s more important how the user got to the error than the error itself.
For that I use JSNLog with Serilog + Seq. There are several JS to Seq libraries but I like this one the best because I can use exatly the same Serilog configuration with not much effort. (You can also use loggers like Structured log to directly log into Seq without the need of a backend)
The easiest way and not recommended despite being the part of tutorial, is to simply add the logging into app.module.ts:

import { NgModule, ErrorHandler } from ‘@angular/core’;
import { JL } from ‘jsnlog’;

// Logging stuff
class UncaughtExceptionHandler implements ErrorHandler {
handleError(error: any) {
JL().fatalException(‘Uncaught Exception’, error);
console.warn(‘logged’);
}
}

const logLevel = JL.getAllLevel();
const appender = JL.createAjaxAppender(‘example appender’);
appender.setOptions({
‘bufferSize’: 20,
‘storeInBufferLevel’: 1000,
‘level’: logLevel,
‘sendWithBufferLevel’: 6000,
‘url’: ‘https://localhost:51213/jsnlog.logger’
});

// Configure the JSNLog logging library.
// See https://jsnlog.com/Documentation/JSNLogJs
JL().setOptions({
‘appenders’: [appender],
‘level’: logLevel
});

JL().info(‘Angular is starting…’);

const appRoutes: Routes = [
// …
providers: [
{ provide: ‘JSNLOG’, useValue: JL },
{ provide: ErrorHandler, useClass: UncaughtExceptionHandler }
],
bootstrap: [AppComponent]
})
export class AppModule { }

Server side:

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}

app.UseMvc();

// Configure JSNLog
// See https://jsnlog.com/Documentation/Configuration/JSNLog
var jsnlogConfiguration = new JsnlogConfiguration()
{
// HACK: Format “%message” will break logging.
serverSideMessageFormat = “JL: %message”,
};

app.UseJSNLog(new LoggingAdapter(loggerFactory), jsnlogConfiguration);
}

Official instructions: https://jsnlog.com/Documentation/HowTo/Angular2LoggingMy oversimplified implementation based on instructions: https://github.com/jernejk/JSNLog/tree/features/jsnlog-simple
However this version will swallow all errors amoung other things if it fails to load on bootstraps, resulting in a white page and non-sense errors in console output.
I have improved the initial quick start to have LogService and UncaughtExceptionHandler in separate files, as well starting the JSNLog only when Angular essentials have been correctly bootstrapping. This solves the problem of the official quick start tutorial!
Since the code is too big, here is a diff between new application and adding log: https://github.com/jernejk/JSNLog/compare/features/jsnlog
Personally I use this all the way to UAT and disable it for preprod and production. I want the application to work as efficiently as possible once they hit production environments and unfortenately, JSNLog doesn’t work 100% well all of the time. All things consider, it’s an increadiable tool in development environement.

Every year the market share of mobile devices is growing, which means that testing on a mobile device is becoming increasingly more important.
While in easy cases we can open just open up the server to outside world and connect with your phone. However, in this blog I’ll tackle a much harder scenario:
WiFi is blocked and not accessible by mobile devices
Some of the resources are locked behind VPN, no mobile client for the VPN
Dev and staging servers are not available to mobile devices
The problem only happens on the mobile devices, specifically iPad
The blog post will still be very useful if you only have an issue with WiFi or VPN.
Software used
For enabling remote debugging in a locked down environment I used:
You can use any other applications that do the same functionality.
1. Create and connect to Wi-Fi hotspot
Create a hotspot and connect to hotspot via your mobile device.You can skip this part if you already can ping your laptop via the mobile device.
With Connectify it took me 2 minutes to do just that.Too easy, right?
On your mobile device use network utils that allows you to ping your laptop to see if the mobile device has access to the laptop.Connect to the VPN and repeat ping process to verify that the connection is still OK.
2. Configure IIS
Open applicationhost.config:
VS2015+
open [solution folder].vsconfigapplicationhost.config

Pre-VS2015
open C:Users[user-name]My DocumentsIISExpressconfigapplicationhost.config

Find bindings for your website, e.g.

And add a binding with your own IP address that is pingable through the mobile device.

Close your Visual Studio and run it as admin.The above change may require admin permissions in order to spin a new instance of IIS Express with the custom bindings.
If you don’t need to get all communication via VPN or don’t need to track all HTTP(S) requests, you’re done.If not, follow the last step.
Bonus: You can use Conveyor by Keyoti to simplify the process of enabling web apps to be accessible outside the local network.
3. Use Fiddler for debugging and enabling VPN on the mobile device
In this step, we’ll use Fiddler as a proxy that will redirect all the traffic from the mobile device directly to current network connection. You’ll be able to access everything your laptop can access via the phone, include the VPN connection.
You can follow this official guide to setup it up: Capture Traffic from iOS Device
Short version (Fiddler on desktop):
In Fiddler go to Tools | Options | Connections
Tick Allow remote computers to connect
Restart Fiddler
On iOS (similar steps for other mobile devices):
Go to Settings | General | Network > Wi-Fi
Select current Wi-Fi
On the bottom select Manual
Server: [laptops IP]
Port: 8888 (unless changed in Fiddler)
Authentication: Off
Now you should be able to access all of the laptop’s resources.
As a bonus, you can use Fiddler to manipulate traffic on your phone, simulate slow connections, modify packages, go offline or selectively cancel requests.
Bonus – Setup Angular CLI
When trying to run Angular CLI project instead of running ng serve run:

ng s –host [laptop IP] –port 4200

This will make the website available on the [laptop IP] address.
Update 24/08/2018: Added Angular CLI steps for remote debugging.