Skip to content

Updated logging of exception stack traces #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DaveSussman merged 4 commits into from
Aug 1, 2022
Merged

Updated logging of exception stack traces #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
976fcba
Corrected agent stack handling to ensure the posted stack is an array
DaveSussman Apr 6, 2022
c8cadfb
bumped version
DaveSussman Apr 6, 2022
9cd204f
Additional instructions for the React demo
DaveSussman Apr 7, 2022
818f5a2
Corrected exception stacktrace casing. Updated creation of stack trac…
DaveSussman Aug 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 35 additions & 1 deletion src/Loupe.React.Demo/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,43 @@ This is an ASP.NET Core application with a React frontend that hooks into the @g

## Running the application

The application can be run through Visual Studio simply by pressing F5.
The application can be run through Visual Studio simply by pressing F5.

The demo builds upon the ASP.NET Core React template by adding in calls to loupe in various locations:

* A call is made to <code>loupe.information</code> when the counter is incremented on the Counter page.


## Installing the Loupe Agent in React Applications

1. Install the agent:

<pre>
npm install @gibraltarsoftware/loupe-typescript
</pre>

2. Create a wrapper service (LoupeService.js):

<pre>
import { LoupeAgent } from '@gibraltarsoftware/loupe-typescript';

var loupe = new LoupeAgent(window, window.document);

export default loupe
</pre>

3. Import the service into your component:

<pre>
import loupe from "./LoupeService";
</pre>

4. Log some details:

<pre>
const counterObject = { name: "counter", value: this.state.currentCount };
loupe.information(
"Angular", "Incrementing Counter", 'Counter is now {0}',
[this.state.currentCount], null, counterObject
);
</pre>
70 changes: 67 additions & 3 deletions src/loupe-typescript/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export class LoupeService {
import { LoupeService } from '../LoupeService/loupe.service';

@Component({
selector: 'app-root',
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
Expand All @@ -54,7 +54,7 @@ export class AppComponent {
constructor(private readonly loupe: LoupeService) {
loupe.loupe.setLogServer('https://myserver.com');
}

}
</pre>

Expand Down Expand Up @@ -92,6 +92,70 @@ loupe.information(
);
</pre>

### Installation in Javascript
#### Using a Package Manager

1. Install the agent:

<pre>
npm install @gibraltarsoftware/loupe-typescript
</pre>

2. Import the agent package:

<pre>
import { LoupeAgent } from '@gibraltarsoftware/loupe-typescript';
</pre>

3. Create a new instance of the agent:

<pre>
const loupe = new LoupeAgent(window, document);
</pre>

4. Log some details:

<pre>
const counterObject = { name: "counter", value: this.state.currentCount };
loupe.information(
"Angular", "Incrementing Counter", 'Counter is now {0}',
[this.state.currentCount], null, counterObject
);
</pre>

#### Without a Package Manager
If you are creating applications without a package manager, you will need to download/clone this project (loupe-typescript), build it, and use
the built Javascript agent code directly.

1. Build the project

<pre>
npm build
</pre>

The build generates a javascript source (see dist/loupe.typescript.js), which you can copy to your project folder.

2. Import th the Javascript agent into your module code:

<pre>
import "/js/loupe.javascript.js";
</pre>

3. Create a new instance of the agent:

<pre>
const loupe = new exports["loupe-typescript"].LoupeAgent(window, document);
</pre>

4. Log some details:
<pre>
const counterObject = { name: "counter", value: this.state.currentCount };
loupe.information(
"Angular", "Incrementing Counter", 'Counter is now {0}',
[this.state.currentCount], null, counterObject
);
</pre>

## API
* critical(category: string, caption: string, description: string, parameters?: any[] | null, exception?: any | null, details?: any | null, methodSourceInfo?: * MethodSourceInfo | null) - write a categorized Crticial message to Loupe.
* error(category: string, caption: string, description: string, parameters?: any[] | null, exception?: any | null, details?: any | null, methodSourceInfo?: * MethodSourceInfo | null) - write a categorized Error message to Loupe.
Expand Down Expand Up @@ -154,7 +218,7 @@ loupe.error('Web', 'Error Occurred', 'An error occurred', null, err,

The additional details parameter can be either a string or a JSON object.

The agent will attempt to parse stack traces and source details from the error, but to
The agent will attempt to parse stack traces and source details from the error, but to
add source information manually you can use the <code>MethodSourceInfo</code>:

<pre>
Expand Down
Loading