Configuration

djaty-js-sdk can be configured through Djaty.init() method which receives only one argument as an options object. The only required options are apiKey; all others are optional.


Required

apiKey: string

Project key identifier. You can find and control it through the Djaty dashboard.


Optional

allowAutoSubmission: string (default: true)

Flag to allow/disallow the bug automatic submission (Note: It is always disabled when the Djaty extension is active).

debug: boolean (default: false)

Show Djaty internal log messages (For debugging purposes).

timelineLimit: number (default: 30, Max allowed value: 100)

The limit for the number of timeline items per bug.

stackTraceLimit: number (default: 40, Max allowed value: 100)

The max-allowed number of stacktrace frames when Djaty captures an exception.

reportDjatyCrashes: boolean (default: true)

Flag to allow/disallow automatic djaty crashes reporting. Read more

onBeforeBugSubmission: Function

Params:

  • djatyBugReport: {data: AgentPatchItem, addCustomDataCb: () => void }
  • next: (djatyBugReport) => void

Return: void

A callback function to filter the context data right before bug submission. It should not alter the Djaty core structure to avoid server validation errors. If you want to add custom data to the currently processed bug, use addCustomDataCb as the following:

Djaty.init({
  // ...
  onBeforeBugSubmission: (djatyBugReport, next) => {
    djatyBugReport.addCustomDataCb(() => 'Any custom data here');
    next(djatyBugReport);
  },
});

But If you want to add a one - Or more - filter dynamically use Djaty.addSubmitHandler() instead.

ignoreTimelineItem: Function

Params:

Return: boolean

A callback function to control which timeline item should be appended to bug timeline items. It should not alter the Djaty core structure to avoid server validation errors. Return true for timeline item that you need to ignore false otherwise.

// Below example will ignore all success ajax requests (response status between `200:300`)
// on "http://example.com/users/create" url.

Djaty.init({
  // ...
  ignoreTimelineItem: (item, utils) => {
    // utils.console.log('For debugging purpose', item);
    return item.itemType === 'ajax' &&
      item.openParams.url === 'http://example.com/users/create' &&
      item.status >= 200 && item.status < 300;
  }),
});

tags: array

Array of strings to be used as tags

stage: string (default: null)

Machine identifying stage. Allowed values are Djaty.DefaultStages (DEV,PROD,STAG,TEST). I.e, Djaty.DefaultStages.PROD.

user: object

To allow attaching the current user object to the bug context. Allowed values:

  • userId: string | number
  • logon: string | number

ignoredErrors: array

To ignore specific errors from the timeline. (We neither trigger bugs for them nor put them inside the timeline).

It is an array of strings and each string should partially match one of the following:

  • Exception message.
  • File name.
  • Ajax request URL.

mode: string (default: default, available options : default/full)

To specify the tracking behaviour depending on your need. For example, use default mode for a production environment as this mode protects your passwords, credit card, email, cookies, headers, ... But If you need the full context of the browser (cookies, localStorage, ...), use the full mode. To see the the default options for every mode, check mode-options

If you need to customize the default options for a certain mode, check trackingOptions.

trackingOptions: object (default: Default Mode object)

To customize the default options for a certain mode. All the following properties are optional:

  • removeSecretData: Array | boolean

    An array of property names to hide their values from the following contexts: Forms, Cookies, Local Storage, Session Storage and Ajax (Cookies, Headers, Query Params, payload).

    • The default value
      • Default Mode: true to hide the property that its name match one of the following: token, apikey, api_key, creditcard, credit_card, auth, password, secret.
      • Full Mode: false
  • removeEmail: boolean

    To hide any string matches the email format in the whole context.

    • The default value
      • Default Mode: true
      • Full Mode: false
  • localStorage: boolean

    To control tracking the localStorage.

    • The default value
      • Default Mode: false
      • Full Mode: true
  • sessionStorage: boolean

    To control tracking the sessionStorage.

    • The default value
      • Default Mode: false
      • Full Mode: true
  • cookies: boolean

    To control tracking the cookies.

    • The default value
      • Default Mode: false
      • Full Mode: true
  • file: boolean

    To track the failure for files.

    • The default value
      • Default Mode: true
      • Full Mode: true
  • form: boolean

    To track the form submissions.

    • The default value
      • Default Mode: true
      • Full Mode: true
  • exception: boolean | object

    To track uncaught exceptions. If passed as true, the default values of the selected mode will be applied. It also accepts an object with the following properties:

    • repetitionCount: boolean

      To count if the same exception occurred repeatedly instead of adding the same exception multiple times (The same UX of the browser Console).

      • The default value
        • Default Mode: true
        • Full Mode: true
  • console: boolean | object

    To track console logs, If passed as true, the default values of the selected mode will be applied. It also accepts an object with the following properties:

    • repetitionCount: boolean

      To count if the same console occurred repeatedly instead of adding the same console log multiple times (The same UX of the browser Console).

    • excludedMethods: Array

      To control which console methods you don’t need to track its logs.

    • The default value

      • Default Mode:

        {
          "excludedMethods": ["profile", "count"],
          "repetitionCount": false
        }
        
      • Full Mode:

        {
          "repetitionCount": true
        }
        
  • navigation: boolean | object

    To track the navigation between pages. If passed as true, the default values of the selected mode will be applied. It also accepts an object with the following properties:

    • title: boolean

      To control tracking the page title for the navigation.

    • state: boolean

      To control tracking the navigation state (pushstate, popstate) for the navigation item.

    • The default value

      • Default Mode:

        {
          "title": true,
          "state": false
        }
        
      • Full Mode:

        {
          "title": true,
          "state": true
        }
        
  • ajax: boolean | object

    To track all ajax requests. If passed as true, the default values of the selected mode will be applied. It accepts an object with the following properties:

    • queryParams: boolean

    To control tracking the request query parameters.

    • cookies: boolean

    To control tracking the request cookies.

    • headers: boolean

    To control tracking the request headers (request/response headers).

    • requestTime: boolean

    To control tracking the request time.

    • response: boolean

    To control tracking the response object.

    • requestPayload: boolean

    To control tracking the request payload.

    • The default value

      • Default Mode:

        {
          "queryParams": false,
          "cookies": false,
          "headers": false,
          "requestTime": false,
          "response": false,
          "requestPayload": false
        }
        
      • Full Mode:

        {
          "queryParams": true,
          "cookies": true,
          "headers": true,
          "requestTime": true,
          "response": true,
          "requestPayload": true
        }
        

Mode Options

Default Mode
defaultMode = {
   removeSecretData: ['token', 'apikey', 'api_key', 'creditcard', 'credit_card', 'auth', 'password', 'secret'],
   removeEmail: true,
   localStorage: false,
   sessionStorage: false,
   cookies: false,
   ajax: {
     queryParams: false,
     cookies: false,
     headers: false,
     requestTime: false,
     response: false,
     requestPayload: false,
   },
  
   console: {
     excludedMethods: ['profile', 'count'],
     repetitionCount: false,
   },
  
   navigation: {
     title: true,
     state: false,
   },
  
   form: true,
  
   file: true,
  
   exception: {
     repetitionCount: false,
   },
  }
Full Mode
fullMode = {
  removeSecretData: false,
  removeEmail: false,
  localStorage: true,
  sessionStorage: true,
  cookies: true,
  ajax: {
    queryParams: true,
    cookies: true,
    headers: true,
    requestTime: true,
    response: true,
    requestPayload: true,
  },

  console: {
    repetitionCount: true,
  },

  navigation: {
    title: true,
    state: true,
  },

  form: true,
  file: true,
  exception: {
    repetitionCount: true,
  },
}

Full example with all Djaty configuration

<script type="text/javascript" src="https://cdn.djaty.com/js-sdk/djaty-javascript.js"></script>

<script>
Djaty.init({
  apiKey: 'YOUR_PROJECT_API_KEY_HERE',
  mode: 'full',
  user: {
    userId: 123,
    logon: 'john',
  },
  tags: ['milestone-2'],
  stage: Djaty.constants.defaultStages.DEV,
  allowAutoSubmission: true,
  trackingOptions: {
    removeSecretData: true,
    removeEmail: true,
    localStorage: true,
    sessionStorage: true,
    cookies: false,
    ajax: {
      queryParams: true,
      cookies: false,
      headers: false,
      requestPayload: true,
    },
    
    console: {
      repetitionCount: true,
    },
    
    navigation: {
      title: true,
      state: true,
    },
    
    form: true,
    file: false,
    exception: {
      repetitionCount: true,
    },
  },

  release: '1.0.2',
  debug: true,
  ignoredErrors: ['/bootstrap.js.map', '/api/currentUser', 'function of undefined'],

  onBeforeBugSubmission: (djatyBugReport, next) => {
    bugReport.addCustomDataCb(() => 'test data');
    const data = bugReport.rawData;
    if (!data.localStorage) {
      djatyBugReport.addCustomDataCb(() => 'LocalStorage disabled');
      next(bugReport);
      
      return;
    }

    if (!data.localStorage.user) {
      djatyBugReport.addCustomDataCb(() => 'User isn\'t authenticated');
      next(bugReport);

      return;
    }
    
    try {
      const user = JSON.parse(data.localStorage.user);
      if (user.type === 'admin') {
        delete data.localStorage.user;
        djatyBugReport.addCustomDataCb(() => 'Admin data has been removed.');
      }
    
      next(bugReport);
    } catch (err) {
      djatyBugReport.addCustomDataCb(() => 'User isn\'t authenticated');

      next(bugReport);
    }
  },
});
 </script>