Technology: August 2022

Wednesday, August 10, 2022

Front End learning material

Front-End Resources - DEV Community

Javascript Learning resources

`Javascript Style Guides`

`Performance/Code Optimization`

`Javascript Interview Questions`

`Tips and Tricks`

`Javascript Cheatsheet`

`Javascript News Letters`

`Developers to follow`

`Javascript Algorithm`

`Learn Javascript`

`Javascript Books`

`General`

`Best Practices`

`Javascript Projects`

`Youtube channels`

Javascript using Console - Facts you might have missed while debugging

The shortcut to open console window in the browser : Ctrl + Shift + I

You might have used console.log("log here") many times but there are other methods of console object which we might be omitting and could be very beneficial time to time. Here are the others:

1. console.error()

2. console.dir()

console.table()

console.group() & console.groupEnd()

console.time() & console.timeEnd()

console.clear()

Outstanding Tips:

Use console.log("%cTEXT", "color: purple; text-size: 20px")

Monday, August 8, 2022

Client side error catching using Sentry.io

When going live with an application we very often come up with the question how reliable it really works on the clients machines. The most important thing for the operators of the application is to monitor crashes and errors caused by the application.

We can catch Server side errors easily with Logging and monitoring tools available these day but how about any issue rising in Client side due to client side scripting i.e JS or due to browser's incompatibility.

All these issues are to be caught up to analyze and hence comes Sentry.

In the past, I have used Raygun.io for the same purpose but Sentry is more robust and popular.

“Every developer writes tons of bugs. And many of those bugs get shipped to production. That’s unavoidable. But thanks to Sentry, you can find and fix those bugs before your customers even notice a problem. When things go to hell, we’ll help you fight the fires.”

-- Sentry’s website.

I am working on an angular application on Front end side and here is the code to install Sentry package :

npm install --save @sentry/angular @sentry/tracing

Use the following plumbing code in the main.ts file to initialize Sentry:

Sentry.init({
  dsn: "https://...." ,
  environment: environment.production ? 'prod' : 'dev',
  integrations: [
    // Registers and configures the Tracing integration,
    // which automatically instruments your application to monitor its
    // performance, including custom Angular routing instrumentation
    new Integrations.BrowserTracing({
      tracingOrigins: ["localhost", "https://yourserver.io/api"],
      routingInstrumentation: Sentry.routingInstrumentation,

    }),
  ],

  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,
}

Relevant readings:

Angular + Sentry: Application Monitoring with Releases & Source Maps | by Leonardo Giroto | Loft | Medium

Subscribe to: Posts (Atom)