mirror of
https://github.com/jlengrand/bugsink.git
synced 2026-03-10 08:01:17 +00:00
85 lines
3.4 KiB
HTML
85 lines
3.4 KiB
HTML
{% extends "base.html" %}
|
|
{% load static code %}
|
|
|
|
{% block title %}Set up your SDK · {{ site_title }}{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
|
|
<div class="flex items-center justify-center">
|
|
|
|
<div class="m-4 max-w-4xl flex-auto">
|
|
<h1 class="text-4xl font-bold">Set up your SDK</h1>
|
|
|
|
<div class="mt-4">
|
|
Connect your JavaScript application to Bugsink to start tracking errors.
|
|
Bugsink is compatible with the <a class="text-cyan-500 dark:text-cyan-300 font-bold" href="https://docs.sentry.io/platforms/javascript/">Sentry SDK</a>.
|
|
Detailed instructions per framework are in the <a class="text-cyan-500 dark:text-cyan-300 font-bold" href="https://docs.sentry.io/platforms/javascript/">Sentry SDK Documentation</a>. In the below we provide an overview, zoom in on the differences between Bugsink and Sentry, and provide a snippet with the correct DSN set.
|
|
</div>
|
|
|
|
<h2 class="mt-8 text-2xl font-bold">Step 1: Install the SDK</h2>
|
|
|
|
<div class="mt-4">
|
|
Install the SDK by including a script tag, or by using a package manager such as npm or yarn. Note that the SDK to use depends on your framework (e.g. React, Angular, Vue, etc.).
|
|
|
|
{% code %}:::text
|
|
npm install @sentry/your-js-flavor --save
|
|
{% endcode %}
|
|
</div>
|
|
|
|
<h2 class="mt-8 text-2xl font-bold">Step 2: Initialize the SDK</h2>
|
|
|
|
<div class="mt-4">
|
|
Initialize and configure the SDK with your DSN. Use the configuration snippet that applies to your framework,
|
|
and replace the Sentry.init call with the call below:
|
|
</div>
|
|
|
|
{% code %}:::javascript
|
|
// use the correct import statement for your framework, like:
|
|
|
|
// import * as Sentry from "@sentry/browser";
|
|
// const Sentry = require("@sentry/node");
|
|
// import * as Sentry from "@sentry/angular";
|
|
|
|
Sentry.init({
|
|
dsn: "{{ dsn }}",
|
|
|
|
// Alternatively, use `process.env.npm_package_version` for a dynamic release version
|
|
// if your build tool supports it.
|
|
release: "my-project-name@...",
|
|
|
|
integrations: [],
|
|
tracesSampleRate: 0,
|
|
{% comment %} sendDefaultPii: true, // not actually implemented yet, see https://github.com/getsentry/sentry-javascript/issues/5347
|
|
{% endcomment %}});
|
|
{% endcode %}
|
|
|
|
<h2 class="mt-6 text-2xl font-bold">Step 3: Verify the setup</h2>
|
|
|
|
<div class="mt-4">
|
|
To verify that everything is working, raise an exception on purpose and check that it appears in Bugsink.
|
|
A good location for this depends on your framework, but a good place is in the main entry point of your application.
|
|
(Don't use the devtools console, because it will not be caught by the SDK).
|
|
</div>
|
|
|
|
{% code %}:::javascript
|
|
// Put something like this in the handler of a button click, on a timeout, or similar.
|
|
throw new Error("Error Thrown on purpose to send it to Bugsink");
|
|
{% endcode %}
|
|
|
|
<div class="mt-4">
|
|
Your event should now appear in the <a href="{% url "issue_list_open" project_pk=project.pk %}" class="text-cyan-500 dark:text-cyan-300 font-bold">list of open issues</a>.
|
|
</div>
|
|
|
|
<h2 class="mt-6 text-2xl font-bold">Further reading</h2>
|
|
|
|
<div class="mt-4">
|
|
For more information on how to use the SDK, check the <a href="https://www.bugsink.com/docs/sdk-recommendations/" class="text-cyan-500 dark:text-cyan-300 font-bold">Bugsink-specific SDK recommendations</a>.
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|