Sentry 10 is by far the best software available in the open source community for error monitoring, log reporting, and real-time event data analysis. Deploying it to Kubernetes with its own Snuba service for data analysis using Clickhouse (big data real-time analysis engine) is a blast. (Unbeatable 😂)

Vue

To use Sentry with a Vue application, you will need to use the Vue SDK for Sentry: @sentry/ Vue.

npm install --save  @sentry/vue
# or
yarn add  @sentry/vue
Copy the code

@sentry/vue reports any uncaught exceptions raised by your application.

In addition, the SDK captures the name and property status of the active component that caused the error. This is reported via Vue’s config.errorHandler hook.

Then add it to your app.js:

import Vue from "vue";
import * as Sentry from '@sentry/vue';

Sentry.init({
  Vue: Vue,
  dsn: '__PUBLIC_DSN__'});Copy the code

Additionally, the SDK accepts a number of different configuration options that can be used to change its behavior:

  • The incomingVueIs optional, if it’s not passed in,window.VueMust exist.
  • The incomingattachPropsIs optional, or if not providedtrue. If it is set tofalse, Sentry will disallow sending all Vue component properties for recording.
  • The incominglogErrorsIs optional, or if not providedfalse. If it is set totrue, Sentry will also call the original VuelogErrorFunction.

Vue error handling

Note that if the SDK is enabled, Vue will not call its logError internally. This means that errors that occur in the Vue renderer will not show up in the developer console. If you want to keep this feature, be sure to pass the logErrors: True option.

If you are using a CDN version or Loader, we provide a separate file for each integration, you can use it like this:

<script	
  src="https://browser.sentry-cdn.com/5.29.2/vue.min.js"	
  integrity="sha384-FKagncFah3a9nkKNEIDQqXhYnny5Wzc37/AZV5eKKnRVS8uPpeFPdu9dnrvAnRpF"	
  crossorigin="anonymous"	
></script>	

<script>	
  Sentry.init({	
    Vue,
    dsn: "https://[email protected]/0"});</script>
Copy the code

Monitor performance

npm install --save @sentry/vue @sentry/tracing
# or
yarn add @sentry/vue @sentry/tracing
Copy the code

Tracing the most basic configuration of a Vue application (tracing only top-level components) looks like this:

import Vue from "vue";
import * as Sentry from "@sentry/browser";
import { Integrations } from "@sentry/tracing";

Sentry.init({
  // ...
  integrations: [
    new Integrations.BrowserTracing(),
  ],

  // We recommend adjusting this value in production or using tracesSampler for finer control
  tracesSampleRate: 1.0});Copy the code

If you want to trace child components and see more details about the rendering process, configure the integration to track all child components:

Sentry.init({
  Vue,
  tracingOptions: {
    trackComponents: true,}});Copy the code

Document synchronization to:

  • Getsentry.hacker-linner.com/platforms/j…

I am for less.

Wechat: uuhells123.

Public account: Hacker afternoon tea.

Thank you for your support 👍👍👍!