सामने के छोर पर कीड़े की खोज कैसे करें: 4 मुख्य चरण

1. जावास्क्रिप्ट उपकरण

कोशिश करें / ब्लॉक पकड़ें

• नाम - त्रुटि का मानकीकृत नाम;
• संदेश - त्रुटि के विवरण के बारे में संदेश;
• स्टैक - वर्तमान कॉल स्टैक जिसमें त्रुटि हुई।

try {

   callFunc();

} catch (e) {

   console.log(e.name) // ReferenceError

   console.log(e.message) // callFunc is not defined

   console.log(e.stack) // ReferenceError: callFunc is not defined at window.onload

}

const user = {

  name : «Mike»

};

try {

   if (!user.age) throw new SyntaxError(«User age is absent!»);

} catch (e) {

   console.log(e.name) // SyntaxError

   console.log(e.message) // User age is absent!

   console.log(e.stack) // SyntaxError: User age is absent! at window.onload

}

try {

   callFunc();

} catch (e) {

   console.log(e)

} finally {

   ...

}

Window.onerror घटना

window.onerror = function(message, url, line, col, error) {

   console.log(`${message}\n  ${line}:${col}  ${url}`);

};

फ्रेमवर्क घटक

class ErrorBoundary extends React.Component {

   constructor(props) {

       super(props);

       this.state = { hasError: false };

   }

   static getDerivedStateFromError(error) {

       //    ,      UI.

       return { hasError: true };

   }

   componentDidCatch(error, errorInfo) {

       //           

       logErrorToMyService(error, errorInfo);

   }

   render() {

       if (this.state.hasError) {

           //    UI  

           return <h1>-   .</h1>;

       }

       return this.props.children;

   }

}

<ErrorBoundary>

   <MyWidget />

</ErrorBoundary>

2. प्रोजेक्ट असेंबली टूल्स

3. परीक्षण

const func = (data) => {

   return JSON.parse(data)

}

func('{«a»:1}')

func() // Uncaught SyntaxError: Unexpected token u in JSON at position 0.

const obj = {

   outer : {

       last : 9

   }

}

if (obj.outer.inner.last) {

   console.log(«SUCCESS»)

}

if (obj.outer?.inner?.last) {

   console.log(«SUCCESS»)

}

4. लॉगिंग

<script

   src=«https://browser.sentry-cdn.com/5.13.0/bundle.min.js»

   integrity=«sha384-ePH2Cp6F+/PJbfhDWeQuXujAbpil3zowccx6grtsxOals4qYqJzCjeIa7W2UqunJ»

   crossorigin="anonymous"></script>

Sentry.init({

   dsn: 'https://<your account key here>@sentry.io/<your project id here>'

});

Sentry.init({

   dsn: 'https://<your account key here>@sentry.io/<your project id here>',

   release: '2020.03.06.1'

});

# Using yarn

yarn add @sentry/browser

# Using npm

npm install @sentry/browser

import * as Sentry from «@sentry/browser»;

Sentry.init({ dsn: 'https://<your account key here>@sentry.io/<your project id here>' });

# Vue

Sentry.init({

   dsn: '<your account key here>@sentry.io/<your project id here>',

   integrations: [new Integrations.Vue({Vue, attachProps: true})],

});

# Ember

Sentry.init({

   dsn: '<your account key here>@sentry.io/<your project id here>',

   integrations: [new Integrations.Ember()]

});

# Using yarn

yarn add @sentry/integrations

# Using npm

npm install @sentry/integrations

import { BrowserClient } from «@sentry/browser»;

const client = new BrowserClient({

   dsn: '<your account key here>@sentry.io/<your project id here>',

});

client.captureException(new Error('example'));

1. रिएक्टेबल रिएक्ट कंपोनेंट्स: सेम राइटिंग को कैसे रोकें ।
2. रिएक्ट पर विकास करते समय त्रुटियों से कैसे बचें ।
3. - .