Logging client side error(JS file added in a visual webpart) to server side - sharepoint 2016

Question

I have a visual webpart, where there is a JS file added to it.

Now i need to log the errors which occur in the JS to my local drive.

What we need to know is how to push the error message from client side to server side. In sharepoint terms - JS file added in the webpart to Code behind file of Visual webpart.

Few code examples are also required. Thanks in advance

Answer 1

Let us go through your questions one by one

Now i need to log the errors which occur in the JS to my local drive.

First at server side, you would need to write a web service which would takes request from client and writes to file in your local drive(this would be your custom application log file and not ULS log)

Second on client side, write a common function which will take care of calling above web service and log the exception in format you require.

Third thing which would need extra eyes is to exception handling for all of your js code to capture each exception raised from client code. Once exception is captured in catch block, call the above common function by sending exception as parameters.

What we need to know is how to push the error message from client side to server side. In sharepoint terms - JS file added in the webpart to Code behind file of Visual webpart.

This is another way to do it from above method but it would be little tricky. So if I understand correctly you have method in server side which takes care of writing exception/message to local file. Now what you need is a mechanism which calls this server side method once any exception occurs at client side.

1. Declare or create a WebMethod say 'WriteToLogFile' on server side which take cares of writing to log file.

2. Add a ASP.Net AJAX ScriptManager to the page and set its EnablePageMethods property to true.

3. Write a client side common method which takes care of calling WebMethod 'WriteToLogFile'

   function CallingServerMethodWriteToLogFile() { PageMethods.WriteToLogFile("My Exception Message", OnSuccess); } function OnSuccess(response, userContext, methodName) { console.log(response); }

4. Exception handling for all of your js code to capture each exception raised from client code. Once exception is captured in catch block, call the above common 'CallingServerMethodWriteToLogFile' function by sending exception details as parameters.

Option 2 full code

In ASCX
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager> 

In JS: 
try { alert("Welcome guest!"); } 
catch(err) { 
CallingServerMethodWriteToLogFile(err.message); 

} 

function CallingServerMethodWriteToLogFile(ErrMessage) 
{ 
PageMethods.WriteToLogFile(ErrMessage,OnSuccess); 

} 

function OnSuccess(response, userContext, methodName) {
        alert(response);
}

In C# 
[System.Web.Services.WebMethod] 
public static void WriteToLogFile(string message) { 
System.IO.File.WriteAllText(@"C:\LogsTest\Log.txt", message); 
}

Reference: link

I would also like to propose another way to log all client side exception. If you are okay with logging exception in SharePoint List and logging to local drive file is not mandatory.

1. Create a SharePoint list with required columns to store all your exceptions. for e.g. Pagename, method name, exception message, user details etc...

2. Create a common method 'CreateEntryToLogList' on client side which will create entry in above list. Parameters could be all the columns required in your list schema. Use JSOM(javascript object model) to add data to SP List.

3. Exception handling for all of your js code to capture each exception raised from client code. Once exception is captured in catch block, call the above common 'CreateEntryToLogList' function by sending exception details as parameters.

Hope this helps... Happy coding..!!!