Hoje vou falar sobre rastreamento de erros em tempo real em um aplicativo React. Um aplicativo front-end normalmente não é usado para rastreamento de erros. Algumas empresas muitas vezes adiam o rastreamento de bugs, retornando a ele após documentação, testes, etc. Porém, se você pode mudar seu produto para melhor, faça-o!
1. Por que você precisa do Sentry?
Presumo que você esteja interessado em rastrear bugs durante a produção
Você acha que isso não é suficiente?
Ok, vamos ver os detalhes.
Principais motivos para os desenvolvedores usarem o Sentry:
- Permite evitar riscos ao implantar código com erros
- Ajude o controle de qualidade com testes de código
- Receba notificações rápidas sobre problemas
- Capacidade de corrigir erros rapidamente
- Obtendo uma exibição conveniente de erros no painel de administração
- Classifique os erros por segmento de usuário/navegador
Principais razões para o projeto CEO/Lead
- Economize dinheiro (o Sentry pode ser instalado em seus servidores)
- Obtendo feedback do usuário
- Entendendo o que há de errado com seu projeto em tempo real
- Compreender a quantidade de problemas que as pessoas têm com seu aplicativo
- Ajudar você a encontrar lugares onde seus desenvolvedores cometeram erros
Acho que os desenvolvedores estariam interessados neste artigo primeiro. Você também pode usar esta lista de motivos para convencer seu chefe a integrar o Sentry.
Tenha cuidado com o último item da lista de negócios.
Você já está interessado?
O que é Sentinela?
Sentry é um aplicativo de rastreamento de bugs de código aberto que ajuda os desenvolvedores a rastrear e corrigir falhas em tempo real. Não se esqueça que o aplicativo permite aumentar a eficiência e melhorar a experiência do usuário. Sentry oferece suporte a JavaScript, Node, Python, PHP, Ruby, Java e outras linguagens de programação.
2. Faça login e crie um projeto
- Abra sua conta Sentry. Talvez você precise fazer login. (Observe que o Sentry pode ser instalado em seus servidores)
- O próximo passo é criar um projeto
- Selecione seu idioma na lista. (Vamos selecionar React. Clique em "Criar Projeto")
Personalize seu aplicativo. Um exemplo básico de como integrar o Sentry em um container pode ser visto abaixo:
import * as Sentry from '@sentry/browser';
// Sentry.init({
// dsn: "<https://[email protected]/1432138>"
// });
// should have been called before using it here
// ideally before even rendering your react app
class ExampleBoundary extends Component {
constructor(props) {
super(props);
this.state = { error: null };
}
componentDidCatch(error, errorInfo) {
this.setState({ error });
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}
render() {
if (this.state.error) {
//render fallback UI
return (
<a onClick={() => Sentry.showReportDialog()}>Report feedback</a>
);
} else {
//when there's not an error, render children untouched
return this.props.children;
}
}
}O Sentry possui um assistente útil para ajudá-lo a descobrir o que fazer a seguir. Você pode seguir estas etapas. Quero mostrar como criar seu primeiro manipulador de erros. Ótimo, criamos um projeto! Vamos para a próxima etapa
3. Integração React e Sentry
Você deve instalar o pacote npm em seu projeto.
npm i @sentry/browserInicialize o Sentry em seu contêiner:
Sentry.init({
// dsn: #dsnUrl,
});O DSN está localizado em Projetos -> Configurações -> Chaves do Cliente. Você pode encontrar as chaves do cliente na barra de pesquisa.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Rastreando o primeiro erro
Por exemplo, usei um aplicativo de música simples com a API Deezer. Você pode ver isso . Precisamos criar um erro. Uma maneira é acessar a propriedade "indefinida"
Precisamos criar um botão que chame console.log с usuário.e-mail. Após esta ação devemos receber uma mensagem de erro: TypeError não capturado (não é possível ler a propriedade de indefinido email) devido à falta do objeto de usuário. Você também pode usar Exceção Javascript.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>O contêiner inteiro fica assim:
import React, { Component } from "react";
import { connect } from "react-redux";
import { Input, List, Skeleton, Avatar } from "antd";
import * as Sentry from "@sentry/browser";
import getList from "../store/actions/getList";
const Search = Input.Search;
const mapState = state => ({
list: state.root.list,
loading: state.root.loading
});
const mapDispatch = {
getList
};
class Container extends Component {
constructor(props) {
super(props);
Sentry.init({
dsn: "https://[email protected]/1417586",
});
}
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}
render() {
const { list, loading, getList } = this.props;
const user = undefined;
return (
<div className="App">
<button
type="button"
onClick={() => console.log(user.email)}
>
test error1
</button>
<div onClick={() => Sentry.showReportDialog()}>Report feedback1</div>
<h1>Music Finder</h1>
<br />
<Search onSearch={value => getList(value)} enterButton />
{loading && <Skeleton avatar title={false} loading={true} active />}
{!loading && (
<List
itemLayout="horizontal"
dataSource={list}
locale={{ emptyText: <div /> }}
renderItem={item => (
<List.Item>
<List.Item.Meta
avatar={<Avatar src={item.artist.picture} />}
title={item.title}
description={item.artist.name}
/>
</List.Item>
)}
/>
)}
</div>
);
}
}
export default connect(
mapState,
mapDispatch
)(Container);Após integrar este botão, você deverá testá-lo no navegador.
Temos nosso primeiro erro
Uau!
Se você clicar no erro do cabeçalho, verá um rastreamento de pilha.
As mensagens parecem ruins. Claro que vimos mensagens de erro sem entender onde está o código. Por padrão estamos falando sobre o mapa de origem no ReactJS porque eles não estão configurados.
Também gostaria de fornecer instruções para configurar o mapa de origem, mas isso tornaria este artigo muito mais longo do que pretendia.
Você pode estudar este tópico . Se você estiver interessado neste artigo, publicará a segunda parte sobre integração do mapa de origem. Então, clique em mais curtidas e inscreva-se para não perder a segunda parte.
5. Uso de Sentry com ponto final API
OK. Abordamos a exceção de javascript nos parágrafos anteriores. No entanto, o que faremos em relação aos erros XHR?
O Sentry também possui tratamento de erros personalizado. Eu usei-o para rastrear erros de API.
Sentry.captureException(err)Você pode personalizar o nome do erro, nível, adicionar dados, dados exclusivos do usuário usando seu aplicativo, e-mail, etc.
superagent
.get(`https://deezerdevs-deezer.p.rapidapi.com/search?q=${query}`)
.set("X-RapidAPI-Key", #id_key)
.end((err, response) => {
if (err) {
Sentry.configureScope(
scope => scope
.setUser({"email": "[email protected]"})
.setLevel("Error")
);
return Sentry.captureException(err);
}
if (response) {
return dispatch(setList(response.body.data));
}
});Gostaria de usar uma função genérica para a API catch.
import * as Sentry from "@sentry/browser";
export const apiCatch = (error, getState) => {
const store = getState();
const storeStringify = JSON.stringify(store);
const { root: { user: { email } } } = store;
Sentry.configureScope(
scope => scope
.setLevel("Error")
.setUser({ email })
.setExtra("store", storeStringify)
);
// Sentry.showReportDialog(); - If you want get users feedback on error
return Sentry.captureException(error);
};Importe esta função em sua chamada de API.
export default query => (dispatch, getState) => {
superagent
.get(`https://deezerdevs-deezer.p.rapidapi.com/search?q=${query}`)
.set("X-RapidAPI-Key", #id_key)
.end((error, response) => {
if (error) {
return apiCatch(error, getState)
}
if (response) {
return dispatch(setList(response.body.data));
}
});
};Vamos verificar os métodos:
- definirNível permite inserir um erro de nível no painel do sentinela. Possui propriedades - 'fatal', 'error', 'warning', 'log', 'info, 'debug', 'critical').
- setUser ajuda a salvar quaisquer dados do usuário (id, endereço de e-mail, plano de pagamento, etc.).
- definirExtra permite que você especifique quaisquer dados necessários, por exemplo, armazenar.
Se quiser obter feedback do usuário sobre um bug, você deve usar a função showReportDialog.
Sentry.showReportDialog();Conclusão:
Hoje descrevemos uma maneira de integrar o Sentry em um aplicativo React.
→ Bate-papo por telegrama por
Fonte: habr.com