🥇 JavaScript ਵਿੱਚ ਲਿਖੀਆਂ ਫਰੰਟ-ਐਂਡ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ Sentry ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਗਲਤੀਆਂ ਦੀ ਨਿਗਰਾਨੀ: ਭਾਗ 1

ਸੇਵਾ ਸੰਤਰੀ ਵਿੱਚ ਲਿਖੀਆਂ ਫਰੰਟ-ਐਂਡ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਤੁਹਾਨੂੰ ਰਿਮੋਟਲੀ ਬੱਗ ਦੀ ਨਿਗਰਾਨੀ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ ਜਾਵਾਸਕਰਿਪਟ.

'ਤੇ ਫਰੰਟ-ਐਂਡ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਹੱਲ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਿਹਾ ਹੈ ਜਾਵਾਸਕਰਿਪਟ ਔਖਾ ਹੋ ਸਕਦਾ ਹੈ ਕਿਉਂਕਿ ਉਹ ਉਪਭੋਗਤਾ ਦੇ ਬ੍ਰਾਊਜ਼ਰ ਤੋਂ ਉਤਪੰਨ ਹੁੰਦੇ ਹਨ, ਜਿਸ ਤੱਕ ਤੁਹਾਡੇ ਕੋਲ ਅਕਸਰ ਪਹੁੰਚ ਨਹੀਂ ਹੁੰਦੀ ਹੈ। ਹਾਲਾਂਕਿ, ਸੰਤਰੀ ਰਿਮੋਟਲੀ ਬੱਗਾਂ ਦੀ ਨਿਗਰਾਨੀ ਕਰਨਾ ਸੰਭਵ ਬਣਾਉਂਦਾ ਹੈ।

ਇਹ ਇਸ ਲਈ ਹੈ ਤੁਸੀਂ ਇਸ ਲੇਖ ਵਿਚ ਦੱਸੇ ਗਏ ਹੱਲਾਂ ਨੂੰ ਡਾਊਨਲੋਡ ਕਰ ਸਕਦੇ ਹੋ.

ਕੀ ਜ਼ਰੂਰੀ ਹੈ

ਜੇ ਤੁਸੀਂ ਇਹਨਾਂ ਉਦਾਹਰਣਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਲੋੜ ਹੋਵੇਗੀ:

Node.js: ਇੱਕ ਵਿਸ਼ੇਸ਼ਤਾ-ਅਮੀਰ ਵਿਕਾਸ ਸਾਧਨ ਜੋ ਐਪਲੀਕੇਸ਼ਨ ਦਾ ਹਿੱਸਾ ਨਹੀਂ ਹੈ। ਅਸੀਂ ਨਵੀਨਤਮ LTS ਸੰਸਕਰਣ (8.12.0) ਨੂੰ ਡਾਊਨਲੋਡ ਕੀਤਾ ਹੈ
ਸੰਤਰੀ: ਜਾਂ ਤਾਂ ਸੰਤਰੀ ਸੇਵਾ ਵਿੱਚ ਇੱਕ ਖਾਤਾ (ਤੁਸੀਂ ਪ੍ਰਤੀ ਮਹੀਨਾ 10 ਹਜ਼ਾਰ ਬੱਗ ਮੁਫਤ ਵਿੱਚ ਰਿਕਾਰਡ ਕਰ ਸਕਦੇ ਹੋ) ਜਾਂ ਇੱਕ ਸਥਾਪਿਤ ਸਥਾਨਕ ਸੰਤਰੀ - https://github.com/getsentry/onpremise

ਤੁਹਾਡੇ ਸਰਵਰ 'ਤੇ ਇੰਸਟਾਲੇਸ਼ਨ

ਆਪਣੇ ਸਰਵਰ 'ਤੇ ਸੰਤਰੀ ਆਨ-ਪ੍ਰੀਮਿਸ ਨੂੰ ਸਥਾਪਿਤ ਕਰਨ ਲਈ ਤੁਸੀਂ 2 ਤਰੀਕਿਆਂ ਨਾਲ ਜਾ ਸਕਦੇ ਹੋ

rpm ਬਣਾਓ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਸਥਾਪਿਤ ਕਰੋ - https://habr.com/ru/post/500632/

ਅਧਿਕਾਰਤ ਇੰਸਟਾਲਰ ਦੀ ਵਰਤੋਂ ਕਰੋ:

Установить на сервер docker и docker-compose
git clone https://github.com/getsentry/onpremise.git
./install.sh

ਮਿਆਰੀ ਵਰਤੋਂ

ਸ਼ੁਰੂ ਕਰਨ ਲਈ, ਸੇਵਾ ਦੀ ਵੈੱਬਸਾਈਟ ਤੋਂ ਇੱਕ ਨਵਾਂ ਸ਼ਾਮਲ ਕਰੋ ਸੰਤਰੀ- ਐਪਲੀਕੇਸ਼ਨ ਲਈ ਪ੍ਰੋਜੈਕਟ. ਲੋੜੀਂਦੀ ਭਾਸ਼ਾ ਚੁਣਨ ਤੋਂ ਬਾਅਦ, ਤੁਹਾਨੂੰ ਸੰਬੰਧਿਤ ਦਸਤਾਵੇਜ਼ ਪ੍ਰਾਪਤ ਹੋਣਗੇ। ਸਾਡੇ ਕੇਸ ਵਿੱਚ ਅਸੀਂ ਚੁਣਿਆ ਹੈ ਜਾਵਾਸਕਰਿਪਟ.

ਪਹਿਲੀ ਉਦਾਹਰਣ ਮਿਆਰੀ ਹੈ ਜਾਵਾਸਕਰਿਪਟ. ਇੱਥੇ ਦੋ ਬਟਨ ਹਨ: "ਸਤ ਸ੍ਰੀ ਅਕਾਲ" (ਹੈਲੋ) ਅਤੇ "ਗਲਤੀ" (ਗਲਤੀ)।

ਬਟਨ ਨੂੰ ਦਬਾਉਣ ਤੋਂ ਬਾਅਦ "ਸਤ ਸ੍ਰੀ ਅਕਾਲ", ਸਕਰੀਨ ਰੀਬੂਟ ਹੋ ਜਾਵੇਗੀ ਅਤੇ ਬਲਾਕ ਹੋ ਜਾਵੇਗਾ ਕੋਸ਼ਿਸ਼ ਕਰੋ ਬੱਗ ਨੂੰ ਖੋਜੇਗਾ ਅਤੇ ਫੜੇਗਾ। ਬੱਗ ਦੇ "ਪਕੜ" ਜਾਣ ਤੋਂ ਬਾਅਦ, ਗਲਤੀ ਰਿਪੋਰਟ ਮੈਨੂਅਲੀ ਸੇਵਾ ਨੂੰ ਭੇਜੀ ਜਾਂਦੀ ਹੈ ਸੰਤਰੀ.

"ਗਲਤੀ" ਬਟਨ ਤੁਹਾਨੂੰ ਇੱਕ ਬੱਗ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਖੋਜਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।

vanilla/index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vanilla</title>
</head>
<body>
  <button id="hello">Hello</button>
  <button id="error">Error</button>
  <div id="output"></div>
  <script src="https://browser.sentry-cdn.com/4.0.5/bundle.min.js" crossorigin="anonymous"></script>
  <script>
    (function () {
      'use strict';
      Sentry.init({ dsn: 'https://[email protected]/1289664' });
      var helloEl = document.getElementById('hello');
      var errorEl = document.getElementById('error');
      var outputEl = document.getElementById('output');
      helloEl.addEventListener('click', handleHelloClick);
      errorEl.addEventListener('click', handleErrorClick);
      function handleHelloClick() {
        outputEl.innerHTML = 'Hello World';
        try {
          throw new Error('Caught');
        } catch (err) {
          Sentry.captureException(err);
        }
      }
      function handleErrorClick() {
        throw new Error('Uncaught');
      }
    })();
  </script>
</body>
</html>

ਟਿੱਪਣੀ:

ਸੰਤਰੀ ਨੂੰ ਇੱਕ CDN ਤੋਂ ਸਥਾਪਿਤ ਕੀਤਾ ਗਿਆ ਹੈ ਅਤੇ ਇੱਕ ਗਲੋਬਲ ਵੇਰੀਏਬਲ ਦੇ ਰੂਪ ਵਿੱਚ ਪ੍ਰਗਟ ਕੀਤਾ ਗਿਆ ਹੈ
ਥੋੜੀ ਦੇਰ ਪਹਿਲਾਂ ਅਸੀਂ ਆਪਣੀ JavaScript ਵਿੱਚ Sentry ਨੂੰ ਲਾਂਚ ਕੀਤਾ ਸੀ

ਇਸ ਉਦਾਹਰਣ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ, ਅਸੀਂ ਇੱਕ ਸਥਿਰ ਵੈਬ ਸਰਵਰ ਪਲੇਟਫਾਰਮ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਾਂ Node.js: http ਸਰਵਰ. ਉਸ ਫੋਲਡਰ 'ਤੇ ਜਾਓ ਜਿੱਥੇ ਫਾਈਲ ਸਟੋਰ ਕੀਤੀ ਗਈ ਹੈ Index.html, ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਐਡਰੈੱਸ ਖੋਲ੍ਹਣ ਲਈ ਹੇਠ ਦਿੱਤੀ ਲਾਈਨ (ਅਯੋਗ ਕੈਚਿੰਗ ਦੇ ਨਾਲ ਵਿਕਲਪ) ਦਰਜ ਕਰੋ http://localhost:8080.

ਫੜੇ ਗਏ ਬੱਗ ਕਿਵੇਂ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤੇ ਜਾਂਦੇ ਹਨ

ਪਹਿਲਾਂ ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰੋ "ਸਤ ਸ੍ਰੀ ਅਕਾਲ".

ਅਸੀਂ ਇੱਕ ਬੱਗ ਫੜਿਆ ਹੈ, ਇਸਲਈ ਇਹ ਕਾਲ ਸਟੈਕ ਨੂੰ ਪੌਪ ਅਪ ਨਹੀਂ ਕਰੇਗਾ, ਅਤੇ ਇਸਲਈ ਕੰਸੋਲ ਵਿੱਚ ਨਿਗਰਾਨੀ ਨਹੀਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਹਾਲਾਂਕਿ, ਕਿਉਂਕਿ ਅਸੀਂ ਭੇਜਦੇ ਹਾਂ ਸੰਤਰੀ ਹੱਥੀਂ ਇੱਕ ਬੱਗ ਦੀ ਰਿਪੋਰਟ ਕਰੋ, ਅਸੀਂ ਤੁਹਾਡੇ ਖਾਤੇ ਵਿੱਚ ਇਸ ਬਾਰੇ ਇੱਕ ਸੁਨੇਹਾ ਵੇਖਾਂਗੇ।

ਟਿੱਪਣੀ:

ਅਸੀਂ ਟਰੇਸ ਕਰ ਸਕਦੇ ਹਾਂ ਕਿ ਕਿਹੜੀ ਲਾਈਨ (24) ਵਿੱਚ ਬੱਗ ਹੈ
ਇਸ ਤੋਂ ਇਲਾਵਾ, ਬ੍ਰੈੱਡਕ੍ਰੰਬ ਟ੍ਰੇਲ ਉਹਨਾਂ ਬ੍ਰਾਊਜ਼ਰ ਕਿਰਿਆਵਾਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦਾ ਹੈ ਜਿਸ ਨਾਲ ਗਲਤੀ ਹੋਈ।

ਅਣਪਛਾਤੇ ਬੱਗ ਕਿਵੇਂ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦੇ ਹਨ

ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰੋ "ਗਲਤੀ".

ਬੱਗ ਕਾਲ ਸਟੈਕ ਨੂੰ ਬਬਲ ਕਰਦਾ ਹੈ ਅਤੇ ਇਸ ਤਰ੍ਹਾਂ ਕੰਸੋਲ 'ਤੇ ਇੱਕ ਗਲਤੀ ਸੁਨੇਹਾ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ। ਇਸ ਤੋਂ ਬਾਅਦ, ਸੰਤਰੀ ਬਿਨਾਂ ਕਿਸੇ ਵਾਧੂ ਕਾਰਵਾਈਆਂ ਦੇ ਆਪਣੇ ਆਪ ਹੀ ਬੱਗ ਦੀ ਨਿਗਰਾਨੀ ਕਰਦੀ ਹੈ।

ਟਿੱਪਣੀ:

ਅਸੀਂ ਦੇਖ ਸਕਦੇ ਹਾਂ ਕਿ ਕਿਹੜੀ ਲਾਈਨ (30) ਵਿੱਚ ਬੱਗ ਖਤਮ ਹੋ ਗਿਆ ਹੈ
ਇੱਥੇ ਕੋਈ ਬ੍ਰੈੱਡਕ੍ਰੰਬ ਟ੍ਰੇਲ ਨਹੀਂ ਹੈ (ਮੈਨੂੰ ਬਿਲਕੁਲ ਸਮਝ ਨਹੀਂ ਆਉਂਦੀ ਕਿ ਕਿਉਂ)

ਪ੍ਰੋਜੈਕਟ ਸੁਰੱਖਿਆ ਨੂੰ ਕਿਵੇਂ ਯਕੀਨੀ ਬਣਾਇਆ ਜਾਵੇ

ਤੁਸੀਂ ਸ਼ਾਇਦ ਸਾਡੇ ਦੁਆਰਾ ਨਿਯੰਤਰਿਤ ਕਰਨ ਦੇ ਤਰੀਕੇ ਨੂੰ ਦੇਖਿਆ ਹੋਵੇਗਾ ਕਿ ਕਿਹੜੇ ਪੰਨੇ ਸਾਡੇ ਪ੍ਰੋਜੈਕਟ ਲਈ ਗਲਤੀਆਂ ਦੀ ਰਿਪੋਰਟ ਕਰ ਸਕਦੇ ਹਨ ਸੰਤਰੀ; ਮਦਦ ਨਾਲ ਡੀਐਸਐਨ ਰਿਕਾਰਡ। ਸਮੱਸਿਆ ਇਹ ਹੈ ਕਿ ਇਨਪੁਟ ਕਿਸੇ ਵੀ ਵਿਅਕਤੀ ਦੁਆਰਾ ਦੇਖਿਆ ਜਾ ਸਕਦਾ ਹੈ ਜੋ ਤੁਹਾਡੇ ਪੰਨੇ ਦੇ ਸਰੋਤ ਕੋਡ ਨੂੰ ਦੇਖਦਾ ਹੈ.

ਇਸ ਤੋਂ ਬਚਣ ਲਈ, ਸਾਨੂੰ ਡੋਮੇਨਾਂ ਦੀ ਗਿਣਤੀ ਨੂੰ ਸੀਮਤ ਕਰਨ ਦੀ ਲੋੜ ਹੈ ਜੋ ਸਾਡੇ ਪ੍ਰੋਜੈਕਟ ਲਈ ਗਲਤੀ ਰਿਪੋਰਟਾਂ ਜਮ੍ਹਾਂ ਕਰ ਸਕਦੇ ਹਨ। ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ ਅਸੀਂ ਵਰਤਿਆ ਲੋਕਲਹੋਸਟ (ਸਥਾਨਕ ਮੇਜ਼ਬਾਨ)। ਇਹ ਵਿਕਲਪ ਸੈਟਿੰਗ ਟੈਬ ਵਿੱਚ ਕੌਂਫਿਗਰ ਕੀਤਾ ਗਿਆ ਹੈ ਸੰਤਰੀ- ਪ੍ਰੋਜੈਕਟ, ਸੰਤਰੀ ਪ੍ਰੋਜੈਕਟ ਸੈਟਿੰਗ.

ਜਾਰੀ ਕਰਦਾ ਹੈ

ਜੇ ਤੁਸੀਂ ਇਸ ਬਾਰੇ ਸੋਚਦੇ ਹੋ ਕਿ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ ਸੰਤਰੀ ਸਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਦੇ ਵੱਖ-ਵੱਖ ਰੂਪਾਂ ਵਿੱਚ, ਫਿਰ ਸਾਨੂੰ ਕਿਸੇ ਕਿਸਮ ਦੀ ਵਿਧੀ ਦੀ ਲੋੜ ਹੈ ਜੋ ਇੱਕ ਸੰਸਕਰਣ ਨੰਬਰ ਨਾਲ ਗਲਤੀਆਂ ਨੂੰ ਚਿੰਨ੍ਹਿਤ ਕਰੇਗੀ।

ਆਖ਼ਰਕਾਰ, ਅਸੀਂ ਨਹੀਂ ਚਾਹੁੰਦੇ ਕਿ ਅਸੀਂ ਜੋ ਬੱਗ ਫਿਕਸ ਕੀਤਾ ਹੈ ਉਹ ਦੁਬਾਰਾ ਦਿਖਾਈ ਦੇਵੇ, ਅਤੇ ਅਸੀਂ ਸੋਚਦੇ ਹਾਂ ਕਿ ਜੋ ਅਸੀਂ ਠੀਕ ਕੀਤਾ ਹੈ ਉਹ ਕੰਮ ਨਹੀਂ ਕਰਦਾ ਹੈ। ਇਹ ਵੀ ਹੋ ਸਕਦਾ ਹੈ ਕਿ ਉਪਭੋਗਤਾ ਨੇ ਐਪਲੀਕੇਸ਼ਨ ਦਾ ਇੱਕ ਪੁਰਾਣਾ, ਕੈਸ਼ ਕੀਤਾ ਸੰਸਕਰਣ ਲਾਂਚ ਕੀਤਾ ਹੋਵੇ।

ਸਮੱਸਿਆ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ, ਤੁਹਾਨੂੰ ਪਛਾਣਕਰਤਾ ਦਾਖਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ ਜਾਰੀ (ਵਰਜਨ) ਸ਼ੁਰੂ ਹੋਣ 'ਤੇ ਸੰਤਰੀ.

vanilla/index.html

...
var RELEASE = '0.1.0';
Sentry.init({
  dsn: 'https://[email protected]/1289664',
  release: RELEASE,
});
...

ਇਸ ਤੋਂ ਬਾਅਦ, ਸਾਰੀਆਂ ਨਵੀਆਂ ਗਲਤੀਆਂ ਦੇ ਤੌਰ 'ਤੇ ਮਾਰਕ ਕੀਤਾ ਜਾਵੇਗਾ ਰਿਲੀਜ਼ (0.1.0), ਭਾਵ, ਉਹ ਕੋਡ ਦੇ ਸਹੀ ਸੰਸਕਰਣ ਨਾਲ ਬੰਨ੍ਹੇ ਜਾਣਗੇ।

ਟਿੱਪਣੀ:

ਅਸੀਂ ਰੀਲੀਜ਼ਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਇੱਕ ਸਧਾਰਨ ਤਰੀਕਾ ਲੱਭ ਲਿਆ ਹੈ
Sentry ਤੁਹਾਨੂੰ ਹੋਰ ਵਰਤਣ ਲਈ ਸਹਾਇਕ ਹੈ ਕੰਪਲੈਕਸ ਆਪਣੇ ਦੀ ਵਰਤੋ, ਜਿਸ ਨਾਲ ਨੇੜਿਓਂ ਸਬੰਧਤ ਹੈ GitHub. ਇਹ ਫੰਕਸ਼ਨ ਕੁਝ ਕਾਰਵਾਈਆਂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਬੱਗਾਂ ਨੂੰ ਟਰੈਕ ਕਰਨਾ ਸੰਭਵ ਬਣਾਉਂਦਾ ਹੈ।

PS ਦੂਜਾ ਭਾਗ ਲੰਬਾ ਹੈ, ਇਸ ਲਈ ਇਹ ਇੱਕ ਵੱਖਰੀ ਪੋਸਟ ਵਿੱਚ ਹੋਵੇਗਾ।

PS ਟੈਲੀਗ੍ਰਾਮ ਚੈਟ ਸੰਤਰੀ https://t.me/sentry_ru

PS ਮੈਂ ਇਹ ਦੱਸਣਾ ਭੁੱਲ ਗਿਆ ਕਿ ਇਹ ਪੋਸਟ ਦਾ ਅਨੁਵਾਦ ਹੈ https://codeburst.io/sentry-error-reporting-by-example-part-1-999b2df11556

ਸਰੋਤ: www.habr.com

ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਵਿੱਚ ਲਿਖੀਆਂ ਫਰੰਟ-ਐਂਡ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਸੰਤਰੀ ਨਾਲ ਨਿਗਰਾਨੀ ਦੀਆਂ ਗਲਤੀਆਂ: ਭਾਗ 1

ਇੱਕ ਟਿੱਪਣੀ ਜੋੜੋ Отменить ответ