Application Insights Build Version on all telemetry

Something very interesting is to know which version was affected by a telemetry. This is good for custom events, traces and very interesting for exceptions. However, adding this information on every calls are redundant and not clean. That is why, Application Insights allows you to add a telemetry initializer.

A telemetry initializer is a a piece of code that is executed when a telemetry starts. There is two steps to make it works. First, create a class that inherit ITelemetryInitializer. Second, register the class to Application Insights.

To accomplish the goal of having the system version in every telemetry, let’s create a class that will add in Application Insights’ context a property named BuildVersion. I place this class in my website project which allows me to grap the assembly version. Indeed, you need to use the AssemblyInfo.cs file and its versions on every release to have this method to work.

    public class AssemblyVersionInitializer : ITelemetryInitializer
    {
        public void Initialize(Microsoft.ApplicationInsights.Channel.ITelemetry telemetry)
        {
            telemetry.Context.Properties["BuildVersion"] = this.GetType().Assembly.GetName().Version.ToString();
        }
    }

The next and final step is to use this class.

public class MvcApplication : System.Web.HttpApplication
{
   protected void Application_Start()
   {
       TelemetryConfiguration.Active.TelemetryInitializers.Add(new AssemblyVersionInitializer());
   }
}

From there, what ever you add or not custom properties, it will always have also the BuildVersion one. The goal of having this BuildVersion is primary to see difference in your telemetries between version. You can clearly identify if a problem is resolve or is created between version. You can also see if the performance goes worse. However, this only work if you release often since Application Insights retention of the information if very limited with most of the data is restricted to 7 days (or 14 days).

Drag and drop with React and JQuery

Dragging element is possible through different library. One option that has been around for more than 8 years is JQuery UI. It comes with different API : Droppable, Draggable and Sortable which allow you to click an Html element and move it around with some restriction that you configure. Few months ago, we needed to have dragging capability with out React page. Initially, we though to use Html5 but we the experience was different between browsers in term of dragging experience. There is some nice well build third party library but we also had the constraint of bringing new library in with all the trouble of handling licencing which become fast a nightmare with today’s library that have a lot of dependencies. We ended up to use JQuery UI, which the product already have.

The problem with JQuery UI and React is that the modification done by JQuery is done to the Dom element and not the React’s component. That means that when an event is raised about something being dragged or dropped, the component doesn’t render. The consequence is that if you do something to re-render your component that the change made to the Html Dom by JQuery will be overridden.

The solution is that when JQuery UI drop the element at its new position to tell JQuery UI to cancel the move and have the React component to render its elements with with the new position. In practice, the user won’t notice because it is very fast.

Some quick pointers:
1- On the stop of the drag, listen the stop event which take JQueryEventObject and JQueryUI.SortableUIParams as parameter. This can be done when your component is mounted or dynamically when you need after the component is mounted. It’s important that the component it’s mounted because you need to access the rendered Dom element by refs.

public componentDidMount() {
    const $element= $(this.refs.dom);
    const options = {
        update: (e: JQueryEventObject, ui: JQueryUI.SortableUIParams) => { this.onUpdate(e, ui) },
    } as JQueryUI.SortableOptions;
    $element.sortable(options);
}

2- On the onUpdate, cancel the drag. This can be done by getting using the sortable method.

private onUpdate(e: JQueryEventObject, ui: JQueryUI.SortableUIParams): void {
    const $element= $(this.refs.dom);
    $element.sortable("cancel");
    //Step 3 goes here
}

3- The last step is to get React render your list again with the new position. This can be done by setting a state, calling a property callback or directly calling the action creator to have this one set the new position in the store to kick a new round of render. At that step, you need to send the all the items or the items that got moved.

This solution is not perfect and it would be great to not have to mess with JQuery UI cancel and to invoke a render. However, it’s a quick way to use an old library that you may already have in your system with a new technology like React.